We have set an initial filter for the Name column in the HTML. For the Age column, we defined the initial filter in code.
The type of the object for setting an initial filter depends on the type of the column. For example, the Age column is a Numeric column. Thus, its filter property is of type DikeNumericFilter[].
When defining an initial filter in the HTML template, the filter property is of type DikeFilter[].
Modifying filters
Let us add a condition for the Hire Date column:
You can add any number of conditions joined by logical operators (OR/AND).
Filtering execution
Debounce time
Text and Numeric columns have a debounce time when the user is typing a value to filter the DikeGrid rows. By default, the debounce time is 400 milliseconds.
As you can see, once the time has elapsed, the column sends the filter for its execution.
You can change the time you wait for filter execution by providing the Injection Tokens TEXT_FILTER_DEBOUNCE_TIME and NUMERIC_FILTER_DEBOUNCE_TIME.
Let us change the debounce time for Numeric types.
onColumnAsFilterable(): void {
// Get the Surname column:
const surnameColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'lastName');
// The column exist and is a data column:
if (!!surnameColumn && isDikeDataColumnDef(surnameColumn)) {
// Toggle the filterable value:
this.dikeGrid.columnDef.setColumnFilterability(surnameColumn, !surnameColumn.filterable);
}
}
onInitialFilter(): void {
// Get the email column:
const emailColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'email');
// The column exist and is a data column:
if (!!emailColumn && isDikeDataColumnDef(emailColumn)) {
// Toggle the filterable value and set an initial filter:
this.dikeGrid.columnDef.setColumnFilterability(emailColumn, !emailColumn.filterable, [{
condition: ConditionType.CONTAINS, logicalOperator: 'and', value: '@gmail.com'
} as DikeTextFilter]);
}
}
onChangeColumnFilter(): void {
// Get the age column:
const ageColumn = this.dikeGrid.columnDef.findColumn(column => column.fieldName === 'age');
// The column exist and is a data column:
if (!!ageColumn && isDikeDataColumnDef(ageColumn)) {
// Define the new filter:
const newFilter: DikeNumericFilter[] = [ { condition: ConditionType.EQUALS, logicalOperator: 'or', value1: 23 } ];
// Merge the existing filter with the new one:
const finalFilter: DikeNumericFilter[] = !!ageColumn.filter ? [ ...ageColumn.filter, ...newFilter ] : newFilter;
// Apply the new filter:
this.dikeGrid.columnDef.changeColumnFilter(ageColumn, finalFilter);
}
}
onGetFilterables(): void {
console.log('Filterables: ', this.dikeGrid.filter.filterables);
}
onGetFilteredRows(): void {
console.log('Filtered rows: ', this.dikeGrid.filter.getFilteredRows());
}
onClearFilter(): void {
this.dikeGrid.filter.clearFilter();
}
The previous definition generates the following output:
In the following list, we describe every button action:
Surname - filterable. Click on this button to make the Surname column filterable or not filterable. It toggles the current filterable value.
Email - Initial filter. Same as before, it toggles the current filterable value. When the column becomes filterable, the given filter is applied. Otherwise, the DikeGrid instance will ignore the given filter.
Age - Change column filter. Since the Age column is filterable, we change its filter, merging the current condition with the new one. If you click more than once, the action will append the new filter condition to the existing ones.
Filterables. Clicking on this button will print out, to the dev console, the current filterables.
Filtered rows. Clicking on this button will print out, to the dev console, all the rows that meet the filter conditions criteria.
Clear filter. Clicking on this button will remove all the filter conditions.
Filter Events
When defining a column as filterable or adding/removing a filter condition, the DikeGrid instance emits the related events.
The filter events are:
Event
Description
registerFilterableChange
It emits when you define a column as filterable. Then, the DikeGrid instance will add the column to the internal Map named filterables.
deregisterFilterableChange
It emits when you make a column not filterable when it was filterable. Then, the DikeGrid instance will remove the column to the internal Map named filterables.
filterChange
It emits when the user has defined/changed a filter condition.
clearFilterChange
It emits after the DikeGrid instance has removed all the filter conditions.
Please, open your dev console to see the output of these events.
Row Grouping and Filtering
When grouping the DikeGrid rows by a column and filtering those rows, you will see the filter icon on the right side of the group name showing how many data rows for that group have met the filter criteria.
We have allowed Row-Grouping, and we have defined the Age column as groupable.
If you group the DikeGrid rows by a column with filters, the DikeGrid will ignore those filters.
As you can see in the previous output, the DikeGrid ignores the filter when grouping the DikeGrid rows by the Age column despite defining a filter for this column. As a result, the DikeGrid shows all the values for the Age column as groups.
Summary
It is enough to define a column as filterable to give the user the ability to filter the DikeGrid rows. The user can add any number of filter conditions. By default, Text and Numeric filter types have a debounce time, but you can change this value or send filters on-demand.
You can use the column API and the filter API to perform filtering tasks. All the filter actions emit their corresponding event.
If you open the for a filterable column, you will see the filter option available.
Open the for the Name or the Age column. You will see the filter we have set at creation time.
See the hierarchy definition.
You can add or remove filter conditions for any column defined as filterable through the .
Since we take the flag value from the gridProperties object, please open the and mark the checkbox on-demand Filter under the Filtering section.
Open the for a filterable column. Next, you will see the Filter button. Click on this button when you have finished defining the filter conditions for the column.
For further details, see the definition.
For further details, see the definition.
When defining a column as filterable, the DikeGrid registers that column in an internal Map structure named filterables. The items of this Map are of type .
You can also listen to these events from the instance.
