"stacking" filters for a grid

[njaParticipant]

Hi,
I have created a list box with a set of categories, represented by colors, that I would like to filter the grid by using checkboxes for selection.

Selecting the first category works great, grid is filtered. Checking the second category cause the existing filter to be replaced with the new category. This is the code I am using to build the filter.

Do I need to iterate through the items in list box and build the filter all at once? Sorry, having a little trouble visualizing how this would work. If I add this filter to the grid, I don’t loose the filter that have been applied already…

filter_or_operator = 1; is the OR operator, right?

What I am trying to build is a set of filters that says give me all the rows that are in *any* of the selected categories.

Thanks in advance,
nja

` $(“#jqxCategoryWidget”).on(‘checkChange’, function (event) {
$(“#jqxgrid”).jqxGrid(‘beginupdate’);
if (event.args.checked) {
//$(“#jqxgrid”).jqxGrid(‘showcolumn’, event.args.value);
var itemLabel = event.args.value;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = itemLabel;
var filtercondition = ‘contains’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// add the filters.
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘HexColor’, filter);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);

}
else {
// $(“#jqxgrid”).jqxGrid(‘hidecolumn’, event.args.value);
$(‘#jqxgrid’).jqxGrid(‘removefilter’, ‘HexColor’, true);

}
$(“#jqxgrid”).jqxGrid(‘endupdate’);
});`

[DimitarParticipant]

Hello nja,

Please check out the demo Custom Filtering. In it, if you remove the first line of the applyFilter function:

$("#jqxgrid").jqxGrid('clearfilters');

the demo will function as specified in your requirement.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[njaParticipant]

Hi,
Thank you that has got it.

Interesting behavior note, changing the filter works very fast. Removing the filter seems to take a very long time.

It’s not really a problem technically, more a UI problem. If I could set up some sort of notification that would “fix” it, otherwise I find that I have clicked on the list box item multiple times and have turned the filter back on.

Just an fyi, this grid is about 2400 rows.

thanks again,
nja

           $("#jqxCategoryWidget").on('checkChange', function (event) {
                $("#jqxgrid").jqxGrid('beginupdate');
                    var itemLabel = event.args.value;
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtertype = 'stringfilter';
                    var filtervalue = itemLabel;
                    var filtercondition = 'contains';
       
                    
                    var checkedItems = $("#jqxCategoryWidget").jqxListBox('getCheckedItems');
                    if (checkedItems.length == 0) {
                        // need some sort of ui notification that this may take a moment....
                        $('#jqxgrid').jqxGrid('removefilter', 'HexColor', true);
                       
                    }
                    else {
                        for (var i = 0; i < checkedItems.length; i++) {
                            var filter_or_operator = 1;
                            var filtervalue = checkedItems[i].label;
                            var filtercondition = 'equal';
                            var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
                            filtergroup.addfilter(filter_or_operator, filter);
                        }
                    }

                    // add the filters.
                    $("#jqxgrid").jqxGrid('addfilter', 'HexColor', filtergroup);
                    // apply the filters.
                    $("#jqxgrid").jqxGrid('applyfilters');

                   $("#jqxgrid").jqxGrid('endupdate');
            });

               

[DimitarParticipant]

Hi nja,

We do not experience such a slowdown with the following example (also with 2400 rows): http://jsfiddle.net/Dimitar_jQWidgets/0hLvsc95/. Make sure you are using the latest version of jQWidgets (3.7.1).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[njaParticipant]

After working with Dimitar, I did a little code clean up, then to address the UI issue I am using the $(‘#jqxgrid’).jqxGrid(‘showloadelement’); and then hiding it after the process has completed, lastly I added a pause to the code using setTimeout() to allow the gif to show.

It’s not intuitive, but adding a few more seconds to the whole process creates a better user experience.

The code now looks like this…
=========================================================

            $("#jqxCategoryWidget").on('checkChange', function (event) {
                //$("#filterByColorToolTip").jqxTooltip("open");
                addfilter(event);

            });

            var addfilter = function (event) {
                // build the filter
                var itemLabel = event.args.value;
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtertype = 'stringfilter';
                var filtervalue = itemLabel;
                var filtercondition = 'contains';

                var checkedItems = $("#jqxCategoryWidget").jqxListBox('getCheckedItems');
                if (checkedItems.length == 0) {
                    $("#filterByColorToolTip").jqxTooltip("open");
                    $('#jqxgrid').jqxGrid('showloadelement');

                    setTimeout( function() {
                        // code that must be executed after pause
                        $('#jqxgrid').jqxGrid('removefilter', 'HexColor');
                        $('#jqxCategoryExpander').jqxExpander('collapse');
                        $('#jqxgrid').jqxGrid('hideloadelement');

                    }, 2000 );

                }
                else {
                    for (var i = 0; i < checkedItems.length; i++) {
                        var filter_or_operator = 1;
                        var filtervalue = checkedItems[i].label;
                        var filtercondition = 'equal';
                        var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
                        filtergroup.addfilter(filter_or_operator, filter);
                    }

                    // add the filters.
                    $("#jqxgrid").jqxGrid('addfilter', 'HexColor', filtergroup);
                    // apply the filters.
                    $("#jqxgrid").jqxGrid('applyfilters');

                }

            }

            var removefilter = function () {
                $('#jqxgrid').jqxGrid('showloadelement');
                setTimeout( function() {
                    // code that must be executed after pause
                    $("#jqxCategoryWidget").jqxListBox('uncheckAll');
                    $('#jqxgrid').jqxGrid('clearfilters');
                    $('#jqxgrid').jqxGrid('hideloadelement');

                }, 2000 );

            }

[Author]

Posts