jqgrid multiselect filter issue with grid refresh

Question

I was checking the demo to implement Multiselect filtering in my project.

It is a nice demo indeed but has some issues with it. Select a filter and hit the refresh button then filters are not resetting. And after that it will starts malfunctioning.

Select a filter:

After hitting refresh:

Filters are not resetting

Now unchecked the filter:

Got empty grid.

How can I fix these issues? Any Idea.

Helmholtz

Any update/suggestions? – Helmholtz

Answer 1

Thank you for the bug report! There are a bug in clearToolbar in the lines of the code. I will report the bug later to trirand.

To fix the problem one have to use beforeClear callback of filterToolbar:

beforeClear: function () {
    $(this.grid.hDiv)
        .find(".ui-search-toolbar .ui-search-input>select[multiple] option")
        .each(function () {
            // unselect all options in <select>
            this.selected = false; 
        }
    );

    $(this.grid.hDiv)
        .find(".ui-search-toolbar button.ui-multiselect")
        .each(function () {
            // synchronize jQuery UI Multiselect with <select>
            $(this).prev("select[multiple]").multiselect("refresh");
        }
    ).css({
        width: "98%",
        marginTop: "1px",
        marginBottom: "1px",
        paddingTop: "3px"
    });
}

The demo demonstrates the workaround. If the bug in jqGrid will be solved then one could remove the first tree lines from the beforeClear callback like in the demo.

Halbert

This code is working for jqGrid v4.6.0 but not going to work jqGrid v4.4.1. I got a observation(v4.6.0): if I click 'x' to clear the filter I am not getting proper filtered results. So, How can I remove 'x' from filtertoolbar. – Helmholtz

@Avijit: To remove clear button "X" one needs to use clearSearch: false search option. Searching toolbar structure of old jqGrid (4.4.1 for example) is changed. One should change selector ".ui-search-toolbar .ui-search-input>select[multiple] option" to ".ui-search-toolbar th>div>select[multiple] option". See here. – Halbert