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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • geonikolai
    Participant

    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 getting

    Uncaught 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 grid

    
    var 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  '}
    
                            ]
                        });

    geonikolai
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.