The library provides a special extension for filtering dhtmlxGrid data on the client side (for server-side filtering, use the dhtmlxConnector library).
You can define a built-in auto filter in the header or in the footer of a column. The following types of filters are available:
Built-in filters are set by the method attachHeader(). Note, when specifying a filter you should write '#' before its name.
General specifying auto filters for columns
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setHeader("Book Title,Author,Price");
mygrid.attachHeader("#text_filter, #select_filter,#numeric_filter");
...
In order not to specify a filter for some of columns use the null value:
Specifying an auto filter for a particular column of the header
mygrid.setHeader("Book Title,Author,Price");
mygrid.attachHeader("#text_filter, , ,");
Note, each time you start typing text in such a filter, dhtmlxGrid invokes the filterByAll() method. Each time the method is called, all data is re-filtered (previous results aren't preserved).
When you specify filters in several columns, dhtmlxGrid applies the AND logic to them by default, i.e. the grid will display just the records that meet all criteria at once.
In case you want to apply OR logic (display records that meet at least one of the criteria) you should redefine the filterByAll() method. For example, it can look like this:
Implementing OR logic for filters
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setHeader("Book Title,Released");
mygrid.attachHeader("#text_filter, #select_filter");
mygrid.setColumnIds("title,year");
...
mygrid.init();
mygrid.filterByAll=function(){
//gets filter values
var title = this.getFilterElement(0).value;
var year = this.getFilterElement(1).value;
//unfilters if values were not selected
if (!title && !year) return this.filter();
//filters using OR logic
this.filter(function(data){
if (data == year) return true;
if (data!=-1) return true;
return false;
});
};
In order to programmatically simulate entering specific data in a header filter you can use the following technique:
var inp = mygrid.getFilterElement(3); // '3'-index of the column (zero-based numbering)
inp.value = 12.99; // inputted value
mygrid.filterByAll();// invokes re-filtering
An HTML input can act as an auto filter for a specific column of the grid. It's achieved with the help of the makeFilter() method.
In addition to 'input', you can use 'select' and 'div' HTML elements.
'input' and 'select' serve as text and select filters.
When you specify the id of the 'div' element, the grid creates a combo filter based on that 'div' and populated with unique values from the specified column.
Note, to use 'div' as a filter you should include on the page the dhtmlxcombo.js file.
In case of the auto filter, filtering will be invoked automatically as soon as you start typing something in the input.
<input type="text" id="textFilter"></input>
<select type="text" id="selectFilter"></select>
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setHeader("Book Title,Author,Price");
...
mygrid.init();
mygrid.makeFilter("textFilter",0);//params:input's id, column's index(0-based numbering)
//items for options list added automatically according to column the control assigned to
mygrid.makeFilter("selectFilter",1);
</script>
If you want to invoke filtering programmatically, you may use 2 methods:
The method filterBy(column, value) allows you to filter the specific column of the grid by the specified value:
The second parameter can be both a string and a function.
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setHeader("Sales, Book Title,Author");
...
mygrid.filterBy(1, "John Grisham"); // filters the 2nd column by value "John Grisham"
mygrid.filterBy(0,function(a){ return (a<500);}) // true/false - shows/hides a row
Note, every next call of the filterBy() method will reset the grid to its initial state and filter it from the start. To specify several rules (of AND logic) for one and the same column you should specify an additional parameter in the method.
Programmatic filtering of the column by several criteria
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setHeader("Sales, Book Title,Author");
...
mygrid.filterBy(3,"John Grisham");// filters the 2nd column by value "John Grisham"
mygrid.filterBy(3,"Stephen King",true);//each next method's call has 3rd param - true
The method allows you to programmatically invoke filtering by auto filters.
You can use this method to redefine the default logic of the built-in filters. For example, to define OR logic or simulate entering some data in the filter.
Any filter you assign to the grid (both by adding it to the header and by creating through the makeFilter() function) can use a custom logic instead of the default one.
To change the filtering logic of a filter assigned to the grid you should redefine its _filter function as in:
grid.getFilterElement(col_index)._filter = function(){
// your custom logic
}
For example, you can use the following definition to create a filter (based on text_filter) that makes a search in all columns of the grid:
mygrid.getFilterElement(0)._filter = function(){
var input = this.value; // gets the text of the filter input
return function(value, id){
for(var i=0;i<mygrid.getColumnsNum();i++){ // iterating through the columns
var val=mygrid.cells(id,i).getValue() // gets the value of the current cell
// checks if the value of a cell has the text from the filter
if (val.toLowerCase().indexOf(input.toLowerCase())!==-1){
return true;
}
}
return false;
}
}
The library provides the following filtering-related events:
The grid doesn't preserve row changes (adding, deleting), which are made when the grid is filtered. After resetting back to the not-filtered state, the grid restores deleted rows and removes the newly created ones. To work around the issue you can use the following order of actions:
Adding rows in the filtered grid
mygrid.filterBy(0,""); //unfilters the grid
mygrid._f_rowsBuffer = null; //clears the cache
grid.addRow(...);// adds some row
grid.filterByAll();// filters the grid back