jQuery UI Widgets Forums Grid "stacking" filters for a grid

This topic contains 4 replies, has 2 voices, and was last updated by  nja 9 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • "stacking" filters for a grid #69027

    nja
    Participant

    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’);
    });`

    "stacking" filters for a grid #69047

    Dimitar
    Participant

    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/

    "stacking" filters for a grid #69098

    nja
    Participant

    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');
                });
    
                   
    "stacking" filters for a grid #69112

    Dimitar
    Participant

    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/

    "stacking" filters for a grid #70501

    nja
    Participant

    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 );
    
                }
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.