Preserve custom filter


I’ve custom filter defined in the attachHeader method:

grid_professionals_tots.attachHeader("#text_filter,#select_filter,#select_filter,#select_filter,<select onchange='(arguments[0]||window.event).cancelBubble=true; grid_filtra_borsa(this.value)'><option/><option value='1'>Si</option><option value='2'>No</option></select>");

When I use the other/default filters it don’t preserve the custom filter value. Video demo: … eserve.mp4

How can I fix that?


If your filter logic is built on the base of the filterBy() method, you may pay attention at the third attribute of the method, which preserves the previous filters:

About the custom filter creation, please refer to the following tutorial: … ilterlogic
also you may change the option of you classic select filter using the onCollectValues event: … lectvalues

I need to explain better my implementation:

  • I’ve 5 header filters, all defined with the grid.attachHeader() method: the first four using the default #text_filter or#select_filter, the last one using html.
grid_professionals_tots.attachHeader("#text_filter,#select_filter,#select_filter,#select_filter,<select onclick='(arguments[0]||window.event).cancelBubble=true;' onchange='grid_filtra_borsa(this.value)'><option/><option value='1'>Si</option><option value='2'>No</option></select>");
  • The logic of the first four filters is the default, I haven’t overwritten it.
  • The logic of the last filter is defined by the custom grid_filtra_borsa() method, using filterBy and preserving the other filter.
function grid_filtra_borsa(value) {
            // var esNumero = !isNaN(data.toString());
            var esNumero = !(data.toString() == "-");
            if (value == "1") { return esNumero; }
            else if (value == "2") return !esNumero;
            else return true;
        }, false);

        grid_professionals_tots.filterBy(0, grid_professionals_tots.getFilterElement(0).value, true);
        grid_professionals_tots.filterBy(1, grid_professionals_tots.getFilterElement(1).value, true);
        grid_professionals_tots.filterBy(2, grid_professionals_tots.getFilterElement(2).value, true);
        grid_professionals_tots.filterBy(3, grid_professionals_tots.getFilterElement(3).value, true);

With this implementation I’ve this result:

  • The custom filter (the last one) is working ok, since when I select an option it filters and preserve the other filters
  • The problem is that when I use the other filters (default filters) it preserve the other default filters but it doesn’t preserve the custom filter (see previous video: … eserve.mp4).

It is like the default filters don’t know about the existence of the custom filter. I tried to use the ‘onCollectValues’ event and it doesn’t detect the custom filter (it only detects 3 select filters).

What could be the problem?