Check documentation for the latest version of dhtmlxSuite Filtering DHTMLX Docs

Filtering

There are 3 ways to implement server-side filtering:

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

URL manipulation

APPLICABLE TO:Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Form

You can control which data is loaded into component by specifying additional parameters in URL.

  • filtering by one field
grid.load("some.ashx?connector=true&dhx_filter[1]=mask");

With such a url, data will be taken with an additional rule.

WHERE field_for_column_1 LIKE %mask%
  • filtering by multiple fields
grid.load("some.ashx?connector=true&dhx_filter[1]=mask&dhx_filter[3]=another");

For all components, except for Grid, you should provide exact field name instead of the column index.

Beware that such filtering is non-secure, and if you need to hide some data, make sure to define such a limitation on the server side, not as a part of URL.

In-header filter types

APPLICABLE TO: Grid, TreeGrid

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 dropdown the list of possible values
mygrid.setHeader("Column A, Column B");
mygrid.attachHeader("#connector_text_filter,#connector_select_filter")

Text filter

The use of 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 by using the %mask% pattern.

If you need to change the filtering pattern or implement a more advanced logic, use the beforeSelect event (see details below).

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
connector.ExplicitOptions.Add(
    connector.Request.RequestedFields[0],
    "Alpha",
    "Beta",
    "Gamma"
);

or

connector.ExplicitOptions.Add((TableField)"FieldName", "Alpha", "Beta", "Gamma");

Examples above add 3 options (“Alpha”, “Beta”, “Gamma”) to the filter associated with the specified column.

  • a list created on the base of a different table
var filterConnector = new dhtmlxOptionsConnector(
    "Country", 
    connector.Request.Adapter, 
    "ISO"
);
gridConnector.OptionsConnectors.Add(
    connector.Request.RequestedFields[0], 
    filterConnector
);

The example above attaches the filter connector to the first column of grid connector. We create dhtmlxOptionsConnector to fetch items, specify the table and the field name to take the options titles from, and then provide the database adapter (Request.Adapter) already created for gridConnector. Finally, we add the 'options connector' to the first field of gridConnector.

Custom filters (using the beforeSelect event)

APPLICABLE TO: Grid, TreeGrid, Combo

By using the beforeSelect event, you can modify the filtering rules (doesn't work for dyn. modes).

For example, by default ComboConnector filters by the first letter(s). To make it filter by 'anywhere' occurrence (i.e. to use the '%mask%' pattern instead of the "mask%" pattern) you can modify the filtering rule something like this:

public override IdhtmlxConnector CreateConnector(HttpContext context)
{
    var connector = new dhtmlxComboConnector(...);
    connector.BeforeSelect += new EventHandler(connector_BeforeSelect);
    ...
    return connector;
}
 
void connector_BeforeSelect(object sender, EventArgs e)
{
    var request = (sender as dhtmlxComboConnector).Request;
    var rule = request.Rules.SingleOrDefault(
        //seeking for the needed rule by the field name as FieldRule;
        r=> (r is FieldRule) && ((r as FieldRule).Field == (TableField)"PrintableName"))
 
    if (rule != null)
        //sets the '%mask%' pattern instead of 'mask%'
        rule.Value = "%" + (string)rule.Value; 
}

In the example above, we changed the rule value. Also you can modify the rule operator and the rule field.

public enum Operator
{
    Equals,
    NotEquals,
    Greater, 
    GreaterOrEqual,
    Lower,
    LowerOrEqual,
    Like, /// the default value
    DoesntLike
}

What is more, you can add your custom filtering rules by using the Request.Rules collection accessed by the connector:

  • based on the field filter:
//filters items that were created this year
connector.BeforeSelect += new EventHandler(connector_BeforeSelect);
void connector_BeforeSelect(object sender, EventArgs e)
{
   this.Connector.Request.Rules.Add(
      new FieldRule("CreatedDate", Operator.GreaterOrEqual, "2009-01-01")
   );
}
  • based on the expression filter:
//returns items that were registered on weekends
connector.BeforeSelect += new EventHandler(connector_BeforeSelect);
void connector_BeforeSelect(object sender, EventArgs e)
{
 this.Connector.Request.Rules.Add(new ExpressionRule(
 "datepart(dw,CreatedDate) in (6,7)"
 ));
}

Manual filter

Each dhtmlxDataItem object has the Skip property, setting true value to which will prevent the object from rendering. You can handle the ItemPrerender event and manage an item's visibility. The example below shows how to prevent the items that have the "is_hidden" property from being rendered.

void connector_ItemPrerender(object sender,ItemPrerenderEventArgs<dhtmlxTreeDataItem> e)
{
   if (e.DataItem.DataFields["is_hidden"] == "1")
      e.DataItem.Skip = true;
}
Back to top