DHTMLX Docs & Samples Explorer

Filtering

While all connector can filter data by url manipulation, only Grid and TreeGrid1) has native GUI for sorting, so below info mostly actual for those two components.

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

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

When using text filter, no any additional configuration necessary. Grid will automatically send data about new entered text and filter server side using %mask% pattern. If you need change filtering pattern or implement more advanced logic - beforeFilter server side event can be used

Redefining filtering through beforeFilter

Event receives FilterInterface Object as parameter

Define default filtering

   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());

Redefine default 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());

Custom Java level filters

By using beforeRender events it possible to define filtering rules as PHP code ( will not 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());

Filling options for select filter

If you are using select filter you may need to define list of options in select box, it can be defined in one of 3 ways

  • automatic - if no custom instruction provided , grid will use DISTINCT select against related field, and fetch all possible options
  • 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");
  • list created on base of 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 render_table and render_sql for OptionsConnector object, same as for any normal connector.

Beware that name of fields, used in select filter need to have alias (value)

1) server side filtering with dhtmlxTreeGrid doesn't maintain open states