Check documentation for the latest version of dhtmlxSuite Filtering DHTMLX Docs

Filtering

There are 2 ways to implement server-side filtering:

Note, the server-side filtering of dhtmlxTreeGrid doesn't maintain open states.

In-header filter types

APPLICABLE TO: Grid, TreeGrid, Combo

To enable server-side filtering you can use one of the following in-header filter types while configuring dhtmlxGrid/dhtmlxTreeGrid on the client side:

  • #connector_text_filter - a text filter. Retrieves values which contain a mask defined through a text field
  • #connector_select_filter - a select filter. Retrieves values which contain a mask defined through a dropdown list of possible values
mygrid.setHeader("Column A, Column B");
mygrid.attachHeader("#connector_text_filter,#connector_select_filter")

Text filter

The use of the text filter doesn't require any additional configuration code. Grid/TreeGrid will automatically send data about a newly entered text and filter server-side data using the %mask% pattern.

If you need to change the filtering pattern or implement a more advanced logic - the beforeFilter event should be used.

  • default filtering logic
class FilterBehavior extends ConnectorBehavior{
        @Overrride
    public void beforeFilter(ArrayList<FilteringRule> filters){
        //WHERE some_field LIKE 'value'
        filters.add( new FilteringRule("some_field","value","LIKE"));
    }
}
conn.attach.event(new FilterBehavior());
  • redefined filtering logic
class FilterBehavior extends ConnectorBehavior{
        @Overrride
    public void beforeFilter(ArrayList<FilteringRule> filters){
        //change WHERE some_field LIKE '%value%' to the WHERE some_field > 'value'
        Integer index = filters.index("some_field");
        if (index!=-1)
            filters.get(index).operation=">";
    }
}
conn.attach.event(new FilterBehavior());

Select filter

By default, grid/treegrid will use DISTINCT select against the related field, and fetch all possible options.

If you need to define a custom list of options you can use one of 2 ways:

  • a hardcoded list
ArrayList<String> c1 = new ArrayList<String>();
c1.add("1");
c1.add("two");
c1.add("3");
 
grid.set_options("item_nm",c1);
grid.render_table("grid50","item_id","item_nm,item_cd");
  • a list created on the base of a different table
filter1 = new OptionsConnector(conn);
filter1.render_table("countries","country_id","country_name(value)");
 
grid.set_options("item_nm",filter1);
grid.render_table("grid50","item_id","item_nm,item_cd");

You can use both the render_table and render_sql methods for OptionsConnector object, the same as for any normal connector.

Pay attention that the name of the field used in the select filter needs having the (value) alias.

Custom filters (using the beforeRender event)

APPLICABLE TO: Grid, Combo

By using the beforeRender event it's possible to define filtering rules as PHP code (doesn't work for dyn. modes).

class FilterBehavior extends ConnectorBehavior{
        @Overrride
    public void beforeRender(DataItem data){
        if (data.get_value("some") < 0 )
            data.skip();
    }
}
conn.attach.event(new FilterBehavior());
Back to top