The Grid component supports filtering data by a column value programmatically or using the value an end user types in the corresponding Filter Row editor. The filtering state management, Filter Row rendering, and filtering logic are implemented in the related plugins.
The following plugins implement filtering features:
Note that plugin order is important.
Import the plugins listed above to set up a Grid with basic filtering.
Specify the filtering conditions in the DxFilteringState plugin’s filters property and subscribe to the update:filters event. Use the .sync modifier for two-way binding.
Specify a filtering predicate using the DxIntegratedFiltering plugin’s columnExtenstions property to implement custom filtering logic for specific columns.
You can prevent filtering by a specific column using the DxFilteringState plugin’s columnExtensions property.
Specify the DxTableFilterRow plugin’s showFilterSelector property to allow filter operation selection for an end user. Define which filter operations are available for particular columns using the DxDataTypeProvider availableFilterOperations property. You can also define a custom operation by passing a filtering predicate to the DxIntegratedFiltering plugin’s columnExtensions property.
Pass a function that returns a custom component to the DxTableFilterRow plugin’s cellComponent property to substitute the built-in filter row editors. In this case, delegate the component’s state management to the DxTableFilterRow plugin by assigning the function’s filter and onFilter arguments to the appropriate component’s properties.
It is possible to perform filtering remotely by handling filtering state changes, generating a request, and sending it to the server.
Filtering options are updated once an end user modifies the text in a Filter Row editor or other filtering control. Handle filtering option changes using the DxFilteringState plugin’s update:filters event and request data from the server using the applied filtering options. Once the filtered data is received from the server, pass it to the DxGrid component’s rows property.
Note that you do not need to use the DxIntegratedFiltering plugin for remote filtering.
The order in which the plugins appear in the Grid’s container is important when you use filtering features with paging or grouping. You need to choose whether to paginate filtered rows or filter the current page. In the first case, put the DxIntegratedFiltering plugin before the DxIntegratedPaging one. Otherwise, inverse the plugins’ order.