Example of Default Filtering in Angular Grid Component

This sample demonstrates the Grid's default filtering feature. Type a value in the filterbar and press enter to filter a particular column.

1 of 7 pages (69 items)
Description

The filtering feature enables the user to view a reduced amount of records based on filter criteria. It can be enabled by setting the allowFiltering property to true. A filter bar row will be rendered next to header which allows users to filter data by entering text within its cells.

The Filterbar uses two modes which specifies how to start filtering. They are,

  • onenter - Enabled by default, filter will be initiated when the Enter key is pressed.
  • immediate - Filter will start after user finishes typing. There will be a time delay of 1500ms to initiate filter after the user stops typing. It can be overridden using the filterSettings->immediateModeDelay property.

In this demo, you can either select the Category Name from the SELECT element or type the text in the filter bar cells to filter.

Additionally, the records can also be filtered based on the selected filterbar operator. It can be enabled by setting
filterSettings->showFilterBarOperator property to true.

In this demo,

  • To enable or disable filterbar operator feature, check or uncheck the checkbox in the properties panel.
  • Select the required filtering operator in the dropdown list on the filter bar cell and type the text to start filtering.
  • Now, the addition of new filter operators such as "Does Not Contain", "Does Not End With", "Does Not Start With", "Empty", "Not Empty", "Null", "Not Null", "Like", and "Wildcard search" greatly enhance the filtering feature of the Grid.

For example, when the Like search operator is used:

  • %a% - Filters words containing the character 'a'
  • a% - Filters words ending with 'a'
  • %a - Filters words starting with 'a'

For example when the Wildcard search operator is used:

  • a*b - Filters words that start with 'a' and end with 'b'

Injecting Module:

Grid features are segregated into individual feature-wise modules. To use filtering feature, inject the FilterService using the @NgModule.providers section.

More information on the filter configuration can be found in this documentation section.

Properties