SMART datagrid v.1 > Examples

Back  Forward

Column Filtering  Example

When you need to display only the rows which meet the condition (Expression specified through ColumnFilter.expression returns true) rather than all rows of the data set connected to the grid, you can use ColumnFilter. You can set one or more filters in each column, and even if one of the column filters of which ColumnFilter.active is true meets the condition, the corresponding rows will be displayed in the grid. 

If active column filters are contained in multiple rows of the grid, only the rows which meet the conditions of all columns with the filters will be displayed in the grid. In other words, the filters will be applied as or in the individual column and and in each row. 

In order for the user to directly handle the filters set in the column, filteringEnabled of GridBase.operateOptions should be specified as true first. If click the filter handle of the column header, the filter list will be displayed and you will be able to change active setting of each filter. Column filter settings through JavaScript api are regardless of filteringEnabled settings. 

In the example below, the filters will be set in "Unit Price" column when the column is created. 

Code -1
    {
        "name": "UnitPrice",
        "filters": [{
            "name": "High Price",
            "expression": "value > 800"
        }, {
            "name": "Mid Price",
            "expression": "(value > 500) && (value <= 800)"
        }, {
            "name": "Low Price",
            "expression": "value <= 500"
        }]
    }
Grid - 1
rows

You can reset the column filter list and add or delete an individual filter through the script. And, you can also change the activated state of an individual filter or the entire ones. The buttons below are used to change the filter settings of Country column. 



Set filters in 'Country' column.
Remove all filters in 'Country' column.
Add a filter which 'only displays 2014' in 'Order Date' column.
Remove the filter from 'Order Date' column.

View Source JSP 

See Also
ColumnFilter
Expression Overview
GridBase.operateOptions
OperateOptions.filteringEnabled
OperateOptions.filterSelector
DataColumn.filters
DataColumn.clearFilters
DataColumn.addFilters
DataColumn.removeFilters
DataColumn.activateFilters
DataColumn.activateAllFilters
Examples
Tree Filtering
Row Filtering