Filter with multiple selection


I’m using filter in the normal header line like

myGrid.attachHeader("#select_filter, ...

which is working well.

Now I would like to allow the user to have multiple selects, means that he can select more that one items from the filter list. Is that possible? If yes, how?

Unfortunately the filters on grid have OR logic. So it’s not available to use several filters.
You will have to create your own custom filter. Here you can find a tutorial: … of_filters

Hi Sematik,

maybe there is a little misunderstanding…

Assume we have in the rows of the grid

  • apple
  • banana
  • apple
  • orange
  • orange
  • apple

Then in the filter list we will have

  • apple
  • banana
  • orange

I want the user to select in the filter list apple and banana to get in the grid

  • apple
  • banana
  • apple
  • apple

So it is just the selection of more than one item in the filter list.

If there is no predefined method, how can I realize that? I don’t know how to do it using the way you described in the tutorial.

Unfortunately the filtering by AND logic (show “apple” AND “banana”) is not available with default filters. All in-built filters of dhtmlxGrid use OR logic.
The only way is to create your own custom select filter.

I modified the original code to handle this seemingly basic requirement. I am not sure if I broke anything since I just recently began using the grid. My goal was to have a set of filter buttons that would filter by one, none, or any combination of order statuses instead of only one at a time ever. When you set the FilterBy, simply pass in your values concatenated with ||.

Note: The statuses I am filtering on are strings. I have not yet figured out of this will break any other types. I will update the code if or when I encounter those situations.

if (value=="") return;
var d=true;
if (typeof(value)==“function”) d=false;
else value=(value||"").toString().toLowerCase();
if (!this.rowsBuffer.length) return;

// ERIC - hack apart the filter value to accept multiple values
var values = value.split(’||’);

for (var i=this.rowsBuffer.length-1; i>=0; i--){
    var llFound = false;
    for (var x=0; x<= values.length-1; x++){
        if (d?(this._get_cell_value(this.rowsBuffer[i],column).toString().toLowerCase().indexOf(values[x])!=-1):(!values[x].call(this, this._get_cell_value(this.rowsBuffer[i],column),this.rowsBuffer[i].idd)))
            // Found one of them
            llFound = true
    if (!llFound)
        this.rowsBuffer.splice(i,1);//filter row