Grid filtering with server side paging

[PietervkParticipant]

Hi,
I have a grid with server side paging, that I would like to filter using the API. However, the JSON data received at the server does not contain the filter group after applying the filter.

Here is my code for applying the filter:

 $(".getEx", this).on("click",
            function (e) {
                if (statusId > 0) {
                    $('.jqxTabsAdmin').jqxTabs('select', 1); 
                    var filtergroup = new $.jqx.filter();
                    var filterEx = filtergroup.createfilter('stringfilter', statusExaminer, 'contains');
                    $('#jqxgridEx').jqxGrid('addfilter', 'UserName', filterEx);
                    $("#jqxgridEx").jqxGrid('applyfilters');
                }
            });

And here the code to create the grid:

 //     Get Active Examiners
        var sourceEx = {
            datatype: "json",
            datafields: [
                { name: 'UserName', type: 'string' },
                { name: 'DisplayName', type: 'string' },
                { name: 'EmailInvite', type: 'string' },
                { name: 'Active', type: 'bool' },
                { name: 'ActiveUntil', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                { name: 'Department', type: 'string' },
                { name: 'DepartmentDetails', type: 'string' },
                { name: 'LanguageId', type: 'string' },
                { name: 'ProductId', type: 'string' },
                { name: 'Credit', type: 'float' },
                { name: 'LastCreditDate', type: 'date', format: 'yyyy-MM-dd' }
            ],
            async: true,
            type: 'GET',
            cache: false,
            root: 'Users',
            id: "UserName",
            url: '/online/admin/GetExaminers',
            formatData: function(data) {
                data = JSON.stringify(data);
                return { "jsonData": data };
            },
            beforeprocessing: function(data) {
                source.totalrecords = data.TotalRecords;
            },

            sort: function(data) { $('.jqxgridEx').jqxGrid('updatebounddata', 'sort'); },
            filter: function(data) { $('.jqxgridEx').jqxGrid('updatebounddata', 'filter'); }
        };

        var dataAdapterEx = new $.jqx.dataAdapter(sourceEx,
            {
                contentType: 'application/json',
                autoBind: false
            }
        );

        var pagesizeEx = 10;
        if (localStorage["apagesizeEx"] !== undefined) pagesizeEx = localStorage["apagesizeEx"];
        
           
        }

        $(".jqxgridEx").jqxGrid({
                source: dataAdapterEx,
                width: 1155,
                pageable: true,
                pagesize: pagesizeEx,
                sortable: true,
                filterable: true,
                enabletooltips: true,
                columnsresize: true,
                pagesizeoptions: ['5', '10', '20', '30'],
                autoheight: true,
                virtualmode: true,

                theme: 'energyblue',
                columns: [
                    { text: 'TL', dataField: 'UserName', width: 150 },
                    { text: 'Naam', dataField: 'DisplayName', width: 150 },
                    { text: 'Afzender', dataField: 'EmailInvite', width: 150 },
                    { text: 'Actief', dataField: 'Active', columntype: 'checkbox', width: 82 },
                    { text: 'Actief tot', dataField: 'ActiveUntil', cellsformat: 'dd-MM-yyyy HH:mm', width: 135 },
                    { text: 'Afdeling', dataField: 'Department', width: 120 },
                    { text: 'Details', dataField: 'DepartmentDetails', width: 95 },
                    { text: 'Taal', dataField: 'LanguageId', width: 82 },
                    { text: 'Krediet', dataField: 'Credit', width: 105, cellsformat: 'f2' },
                    { text: 'LastCreditDate', dataField: 'LastCreditDate', cellsformat: 'dd-MM-yyyy', width: 100 },
                    { text: 'ProductID', dataField: 'ProductId', width: 135 }
                ],

                rendergridrows: function(params) {
                    return params.data;
                }
            })
            .on("pagesizechanged",
                function(event) {
                    // event arguments.
                    var args = event.args;
                    localStorage["apagesizeEx"] = args.pagesize;
                }).on("bindingcomplete",
                function(event) {
                    console.log("jqxgridEx bound");
                    clearTimeout(refreshTimeEx);
                    refreshTimeEx = setTimeout(refreshGridEx, 15000);
                    if (!localizejqxgridEx) {
                        console.log("localize jqxgridEx");
                        $(".jqxgridEx").jqxGrid('localizestrings', localizationobj);
                        localizejqxgridEx = true;
                    }

                });

This is the JSON data I receive at the server:
"{\"filterGroups\":[],\"filterscount\":0,\"groupscount\":0,\"pagenum\":0,\"pagesize\":10,\"recordstartindex\":0,\"recordendindex\":10}"

While this is the JSON data I receive when manually applying the filter:
"{\"UserNameoperator\":\"and\",\"filtervalue0\":\"pieter\",\"filtercondition0\":\"CONTAINS\",\"filteroperator0\":0,\"filterdatafield0\":\"UserName\",\"filterGroups\":[{\"field\":\"UserName\",\"filters\":[{\"label\":\"pieter\",\"value\":\"pieter\",\"condition\":\"CONTAINS\",\"operator\":\"and\",\"field\":\"UserName\",\"type\":\"stringfilter\"}]}],\"filterscount\":1,\"groupscount\":0,\"pagenum\":0,\"pagesize\":10,\"recordstartindex\":0,\"recordendindex\":10}"

Am I doing anything wrong? Please help.

[HristoParticipant]

Hello Pietervk,

The formatData callback is not part of the source it is part of the DataAdapter.
I would like to suggest you this demo, and also, this demo that demonstrates a combination of Paging and Filtering.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[PietervkParticipant]

Hello Hristo,
The Paging en Filtering is working fine when I do it manually as in the demo thank you. To make sure, I moved the FormatData to DataAdapter. There is no difference to the result

My problem is with the API filter, that does not work:

  var filtergroup = new $.jqx.filter();
  var filterEx = filtergroup.createfilter('stringfilter', statusExaminer, 'contains');
  $('#jqxgridEx').jqxGrid('addfilter', 'UserName', filterEx);
  $("#jqxgridEx").jqxGrid('applyfilters');

The filter is not added to the jqxgridEx with the above.
Thanks

Pieter

[HristoParticipant]

Hello Pieter,

It looks like you do not have value on the “statusExaminer” variable. This could be a possible reason for that you do not have filtered values.
Also, I would like to ask you is there any error message on the console?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[PietervkParticipant]

Hi Hristo,
the statusExaminer variable is a global variable that is filled when the user selects a row in the current grid. By pressing the button, the UI goes to another tab with a second grid, that should be filtered based on that variable. I checked and it has the correct value.

There is no error message.

Thx

Pieter

[HristoParticipant]

Hello Pieter,

I tested this example and it seems to work fine.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[PietervkParticipant]

Yes, thanks Hristo.
I suspect it is a timing issue. You are using local data, I am using paged server data, which takes a bit longer to load.

Pieter

[HristoParticipant]

Hello Pieter,

That I would suggest you try to use var filtersinfo = $('#jqxGrid').jqxGrid('getfilterinformation'); method.
After you get new data JSON (without filter options) as you mentioned in the beginning and when you have all data loaded you could use this filterinfo variable to restore the filter(s). You could use the bindingcomplete event to understand when the data is bound.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[PietervkParticipant]

Hi Hristo,
Maybe I don’t understand, but I want to do server side filtering, as the amount of data can be too large to download efficiently. If I do what you suggest, the filtering is on the client side, or am I wrong?

Thanks

Pieter

[HristoParticipant]

Hello Pietervk,

When you have a large amount of data you could use virtual mode. It loads the data on demand.
Please, take a look at these demos:
https://jspexamples.jqwidgets.com/examples/grid-sorting-paging-filtering.htm?light
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/virtualdata.htm?light
Note: It is important when integrating virtualmode: true to implement and rendergridrows callback, it return specific data with records.

About the server filtering, I would like to suggest you look at this demo and this tutorial, too.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[PietervkParticipant]

Hi Hristo,
I am using virtualmode and have implemented rendergridrows. All of that is working, including the filtering.

What is not working is the dynamic filtering

     $('.jqxTabsAdmin').jqxTabs('select', 1); 
                    var filtergroup = new $.jqx.filter();
                    var filterEx = filtergroup.createfilter('stringfilter', statusExaminer, 'contains');
                    $('#jqxgridEx').jqxGrid('addfilter', 'UserName', filterEx);
                    $("#jqxgridEx").jqxGrid('applyfilters');
        

[HristoParticipant]

Hello Pietervk,

I tested this filtering option and it seems to work fine as I mentioned.
Could write me where you try to do it this?
Because if trying to add filter immediately after the initialization of the Grid it is possible to this does not happen.
In this case, try to wrap this rows of code in ready callback of the Grid.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[PietervkParticipant]

Hristo,
The grid has data on people. The user can select a row, and then click a button on the page to filter and show all data from this person. That executes the code shown two posts ago. The data is then loaded from the server.

However, the grid sends the wrong filter information to the server:

"{\"filterGroups\":[],\"filterscount\":0,\"groupscount\":0,\"pagenum\":0,\"pagesize\":10,\"recordstartindex\":0,\"recordendindex\":10}"

rather than, the following which is send if I filter by using the grid buttons and entering the filter data directly:

"\"UserNameoperator\":\"and\",\"filtervalue0\":\"pieter\",\"filtercondition0\":\"CONTAINS\",\"filteroperator0\":0,\"filterdatafield0\":\"UserName\",\"filterGroups\":[{\"field\":\"UserName\",\"filters\":[{\"label\":\"pieter\",\"value\":\"pieter\",\"condition\":\"CONTAINS\",\"operator\":\"and\",\"field\":\"UserName\",\"type\":\"stringfilter\"}]}],\"filterscount\":1,\"groupscount\":0,\"pagenum\":0,\"pagesize\":10,\"recordstartindex\":0,\"recordendindex\":10}"

[HristoParticipant]

Hello Pietervk,

I tested this example and it seems to work fine:
https://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering.htm?light
I would like to suggest you try with simple example I make reviewing of your first post and there looks you use a lot of customizations.
What exactly happens in this “refreshGridEx” function?
About the filtering option as I say and before I tested it as in the presented demos and it seems to work fine, too.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[PietervkParticipant]

Hi Hristo,
this is refreshGridEx, it refreshed the content with updates from the server.

 function refreshGridEx() {

            clearTimeout(refreshTimeEx);
            refreshTimeEx = setTimeout(refreshGridEx, 15000);
            if ($('.jqxgridEx').is(":visible") || refreshNow) {
                //    $('#jqxgridEx').jqxGrid({ source: dataAdapterEx });
                $('.jqxgridEx').source = dataAdapterEx;

                $('.jqxgridEx').jqxGrid("updatebounddata");
                console.log("Refreshed Ex");
            } else
                return;

        };

Your example demo is using server side paging, and user filtering, like mine. My application does the same thing and that works. Where my application goes wrong, is not represented in your demo. It goes wrong when i try to have a button that programmatically sets the filter.

On a side note: it would be really helpful if it was possible to subscribe to topics, and get an email when something changes.

[Author]

Posts