jQWidgets Forums
jQuery UI Widgets › Forums › Grid › error when filter is applied to a mapped column
This topic contains 1 reply, has 1 voice, and was last updated by geonikolai 9 years, 11 months ago.
-
Author
-
Trying to build my grid i ve discovered i m getting an Uncaught TypeError: Cannot read property ‘toString’ of null when i apply a filter
on a mapped column under some conditions.
The error happens when the column is mapped as a property of an object , the data is a string containing numbers etc(‘department 101’ still string!),
and the rows on grid is more than 3.
example if the column Department has as data {department 101,department 102,department 103,} cause no error if there is more data department 104,105…then on filter apply i m gettingUncaught TypeError: Cannot read property ‘toString’ of nulli.jqx.filter.H.evaluate @ jqxdata.js:7i.jqx.filter.evaluate @ jqxdata.js:7b.jqx.dataview.refresh @ jqxgrid.js:7a.extend.applyfilters @ jqxgrid.filter.js:7a.extend._applyfilterfromfilterrow @
The error comes either with filtertype: ‘input’ or filtertype: ‘checkedlist’
The error comes only with chrome,on firefox and iexplorer there is no error, is there any workaround about?Using version 3.8.2
The code of my gridvar source = { datatype: "json", totalrecords: 1000000, datafields: [ {name: 'id', type: 'int'}, {name: 'FirstName'}, {name: 'LastName'}, {name: 'UserName', map: 'User>username'}, {name: 'Department', map: 'Department>Description'}, {name: 'Role', map: 'Role>Description'}, {name: 'Store', map: 'Store>Description'}, {name: 'CreatedBy', map: 'CreatedBy>username'}, {name: 'UpdatedBy', map: 'UpdatedBy>username'}, {name: 'IsActive', type: 'bool'}, {name: 'CreatedTime', map: 'CreatedTime>date', type: 'date'}, {name: 'UpdatedTime', map: 'UpdatedTime>date', type: 'date'}, {name: 'edit', map: 'id'} ], id: 'id', url: url, root: 'data' }; var dataAdapter = new $.jqx.dataAdapter(source, {async: true, autoBind: true}); $("#jqxgrid").jqxGrid( { //showtoolbar: true, theme: 'ui-sunny', width: '100%', height: 500, showfilterrow: true, sortable: true, groupable: true, filterable: true, source: dataAdapter, columnsresize: true, autoloadstate: false, autosavestate: false, columnsreorder: true, enabletooltips: true, showfiltercolumnbackground: true, statusbarheight: 45, showstatusbar: true, renderstatusbar: function (statusbar) { var container = $("<div style= overflow: hidden; position: relative;'></div>"); var showrows = $("<label id='rows' style='color: whitesmoke; font-size:120%; font-weight: 900!important; margin-top: 15px; margin-bottom: 10px; float: right; margin-right: 65px;'> Εγγραφές : </label>"); var resetButton = $("<div style='margin-top: 12px; float: left; margin-left: 5px;'><i style='position: relative; top: 3px;' class='fa fa-home'></i><span style='margin-left: 4px; position: relative; top: 3px;'>Επαναφορά Πίνακα</span></div>"); var clearfiltersButton = $("<div style='margin-top: 12px; float: left; margin-left: 5px;'><i style='position: relative; top: 3px;' class='fa fa-eye'></i><span style='margin-left: 4px; position: relative; top: 3px;'>Καθαρισμός Φίλτρων</span></div>"); var refreshButton = $("<div style='margin-top: 12px; float: left; margin-left: 5px;'><i style='position: relative; top: 3px;' class='fa fa-refresh'></i><span style='margin-left: 4px; position: relative; top: 3px;'>Ανανέωση</span></div>"); resetButton.jqxButton({width: 200, height: 25}); clearfiltersButton.jqxButton({width: 200, height: 25}); refreshButton.jqxButton({width: 200, height: 25}); container.append(resetButton); container.append(clearfiltersButton); container.append(refreshButton); resetButton.jqxButton({theme: 'ui-sunny'}); clearfiltersButton.jqxButton({theme: 'ui-sunny'}); refreshButton.jqxButton({theme: 'ui-sunny'}); statusbar.append(container); statusbar.append(showrows); //reset grid button resetButton.click(function (event) { removeObjectFromLocalStorage(list); removeObjectFromLocalStorage(states); $("#jqxgrid").jqxGrid('cleargroups'); var s = [{label: 'id', value: 'id', checked: false}, {label: 'Όνομα', value: 'FisrtName', checked: true}, {label: 'Επίθετο', value: 'LastName', checked: true},{label: 'Username', value: 'UserName', checked: true},{label: 'Τμήμα', value: 'Department', checked: true},{label: 'Ρόλος', value: 'Role', checked: true},{label: 'Αποθήκη', value: 'Store', checked: true},{label: 'Δημιουργήθηκε Από', value: 'CreatedBy', checked: true}, {label: 'Τροποποιήθηκε Από', value: 'UpdatedBy', checked: true}, {label: 'Ενεργό', value: 'IsActive', checked: true}, {label: 'Ημ/νία Δημ/γίας', value: 'CreatedTime', checked: true}, {label: 'Ημ/νία Τροπ/σης', value: 'UpdatedTime', checked: true}, ]; $("#jqxgrid").jqxGrid('loadstate', defaultState); $("#jqxlistbox").jqxListBox({source: s, width: 200, height: 200, checkboxes: true}); }); //clear filters clearfiltersButton.click(function (event) { $("#jqxgrid").jqxGrid('clearfilters'); state = $("#jqxgrid").jqxGrid('savestate'); saveObjectInLocalStorage(states, state); var rows = $('#jqxgrid').jqxGrid('getrows'); var rowscount = rows.length; $('#rows').html('Εγγραφές :' + rowscount); }); // refresh grid button refreshButton.click(function (event) { $("#jqxgrid").jqxGrid('updatebounddata', 'filter'); //get grid rows setTimeout(function () { var rows = $('#jqxgrid').jqxGrid('getrows'); var rowscount = rows.length; $('#rows').html('Εγγραφές :' + rowscount); }, 5000); }); }, rendered: function () { }, ready: function () { defaultState = $("#jqxgrid").jqxGrid('getstate'); var loadstate = getObjectFromLocalStorage(states); if (loadstate !== null) { loadstate.groups = []; $("#jqxgrid").jqxGrid('loadstate', loadstate); } //get grid rows setTimeout(function () { var rows = $('#jqxgrid').jqxGrid('getrows'); var rowscount = rows.length; $('#rows').html('Εγγραφές :' + rowscount); }, 10); }, columns: [ {text: 'edit', datafield: 'edit', width: '4%', cellsrenderer: linkrenderer, pinned: true, filterable: false, sortable: false, resizable: false, groupable: false}, {text: 'id', dataField: 'id', filtertype: 'number', width: '5%', hidden: true}, {text: 'Όνομα', columntype: 'textbox', filtertype: 'input', dataField: 'FirstName', width: '15%'}, {text: 'Επίθετο', columntype: 'textbox', filtertype: 'input', dataField: 'LastName', width: '15%'}, {text: 'Username', columntype: 'textbox', filtertype: 'input', dataField: 'UserName', width: '15%'}, {text: 'Τμήμα', columntype: 'textbox',filtertype: 'checkedlist', dataField: 'Department', width: '15%'}, {text: 'Ρόλος', columntype: 'textbox',filtertype: 'checkedlist', dataField: 'Role', width: '15%'}, {text: 'Αποθήκη', filtertype: 'input', dataField: 'Store', width: '15%'}, {text: 'Δημιουργήθηκε Από', filtertype: 'checkedlist', dataField: 'CreatedBy', width: '10%'}, {text: 'Τροποποιήθηκε Από', filtertype: 'checkedlist', dataField: 'UpdatedBy', width: '10%'}, {text: 'Ενεργό', columntype: 'checkbox', filtertype: 'bool', dataField: 'IsActive', width: '10%', editable: false}, {text: 'Ημ/νία Δημ/γίας', dataField: 'CreatedTime', filtertype: 'range', width: '15%', cellsformat: 'dd/MM/yyyy h:mm '}, {text: 'Ημ/νία Τροπ/σης', dataField: 'UpdatedTime', filtertype: 'range', width: '15%', cellsformat: 'dd/MM/yyyy h:mm '} ] });
It seems the error has little to do with the grid, the problem was caused from my encoded json.
changed from json_encode($profiles);
to json_encode($profiles, JSON_UNESCAPED_UNICODE);
or to $serializer->serialize($profiles, ‘json’, SerializationContext::create()->enableMaxDepthChecks());
solved my problem -
AuthorPosts
You must be logged in to reply to this topic.