Issues with jqGrid

[FirmTelMember]

Hello,

We have multiple issues with jqGrid functionality.

1. We have implemented filter row functionality. The problem is in that when you are trying to use drop down filter, you have to select it twice, before it will filter data as you expect.

2. Subsequent filtering doesn’t work as expected. When first select on a dropdown value (grid refreshes with data matching the selection) followed by a filter value in one of the input fields the chosen dropdown value is lost. And the filter you’ve given is lost too.

3. When we are filtering on some column, first column  become highlighted together with column you are filtering on, like you do a filter on both columns.

4. The selected value of a dropdown list is not ‘remembered’ after the grid has reloaded with the filtered results.

All results from out backend are correct. All issues appear on UI.

Code we are using:

        var source =

            {

                datatype: “json”,

                datafields: [

                     { name: ‘Company’ },

                     { name: ‘ICCID’ },

                     { name: ‘MSISDN’ },

                     { name: ‘SubscriptionID’ },

                     { name: ‘CompanyName’ },

                     { name: ‘UserName’ },

                     { name: ‘UserDepartment’ },

                     { name: ‘MxNENAme’ },

                     { name: ‘State’ }

                ],

                id: ‘SubscriptionID’,

                root: ‘Rows’,

                url: ‘Subscription/GetSubscriptionsListByXsp’,

                sort: function () {

                    $(“#jqxgrid”).jqxGrid(‘updatebounddata’);

                },

                filter: function () {

                    $(“#jqxgrid”).jqxGrid(‘updatebounddata’);

                },

                beforeprocessing: function (data) {

                    source.totalrecords = data.TotalRows;

                }

            };

 

        var dataadapter = new $.jqx.dataAdapter(source);

 

        var actionsrenderer = function (row, column, value) {

            var state = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row)[“State”];

            var html = ‘<center><div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”><a id=”action” href=”#” onclick=”return menu(‘ + state + ‘, ‘ + value + ‘);”>[Actions]</a></div></center>’;

            return html;

        };

 

        function stateFormatter(row, column, value) {

            var template = ‘<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>{0}</div>’;

            switch (cellvalue) {

                case 1:

                    return template.replace(‘{0}’, ‘Suspended’);

                case 3:

                    return template.replace(‘{0}’, ‘Blocked’);

                case 4:

                    return template.replace(‘{0}’, ‘Active’);

                case 5:

                    return template.replace(‘{0}’, ‘Porting’);

                default:

                    return template.replace(‘{0}’, ‘Unknown’);

            }

        }

 

        // initialize jqxGrid

        $(“#jqxgrid”).jqxGrid(

            {

                width: 910,

                height: 350,

                source: dataadapter,

                theme: theme,

                sortable: true,

                filterable: true,

                pagesize: 20,

                pageable: true,

                pagesizeoptions: [’20’, ’50’, ‘100’],

                virtualmode: true,

                autoheight: true,

                columnsresize: true,

                showfilterrow: true,

                rendergridrows: function () {

                    return dataadapter.records;

                },

                columns: [

              { text: ‘ICCID’, datafield: ‘ICCID’, width: 150, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’ },

              { text: ‘MSISDN’, datafield: ‘MSISDN’, width: 100, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’ },

              { text: ‘Network’, datafield: ‘MxNENAme’, width: 80, filtertype: ‘list’, filteritems: [@Html.Raw(ViewBag.MxNEs)] },

              { text: ‘Status’, datafield: ‘State’, width: 100, filtertype: ‘list’, cellsrenderer: stateFormatter, filteritems: [‘Active’, ‘Porting’, ‘Blocked’, ‘Suspended’] },

              { text: ‘Company name’, datafield: ‘CompanyName’, width: 140, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’ },

              { text: ‘User name’, datafield: ‘UserName’, width: 140, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’ },

              { text: ‘UserDepartment’, datafield: ‘UserDepartment’, width: 140, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’ },

              { text: ‘Actions’, datafield: ‘SubscriptionID’, width: 60, cellsrenderer: actionsrenderer, cellsalign: ‘center’, align: ‘center’, sortable: false, filterable: false }]

            });

Thank you!

Best regards,
Anton.

[Peter StoevKeymaster]

Hi Anton,

Our Grid Server Sorting, Paging and Filtering online sample demonstrates how to correctly implement server sorting, paging and filtering: serverfiltering_paging_and_sorting.htm. In case of a filter row, see this sample: serverfiltering.htm. The examples require at least jQWidgets 2.6.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[antonomaseParticipant]

Hi,

I had a lot of problems with filtering :
– a column containing numerical values (55, 56, 57, 58) : impossible to filter with textbox nor list. The resultat was not good
– applying a filter on one column put this column gray (normal) and another one also gray (not normal)

I have resolved all the problems when I indicate the type of values :

filter does not work :
datafields: [{name: ‘NOM’}, {name: ‘VILLE’}, {name: ‘DEPA’}, {name: ‘IDE’]]

filter works :
datafields: [{name: ‘NOM’, type: ‘string’}, {name: ‘VILLE’, type: ‘string’}, {name: ‘DEPA’, type: ‘string’}, {name: ‘IDE’, type: ‘bool’}]

[Peter StoevKeymaster]

Hi antonomase,

For filtering of numbers, you should specify the “type” when you define the datafields array and set it to “number”. In addition, you should specify that your filter is numeric. I suggest you to take a look at the online samples and their implementation. There are columns with numbers.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts