Filter types
This section describes the types of filters and how you can add or overwrite conditions for each of them.
Last updated
This section describes the types of filters and how you can add or overwrite conditions for each of them.
Last updated
In general, filters depend on the column type where the filter will apply. Therefore, the filter types are Text
, Numeric
, Date
, and Binary
.
There is another type of filter named Multiple Selection
filter. But this type of filter can apply to Text
and Numeric
filters.
live example.
The following table shows the existing filter types and the conditions that apply for each of them:
Text
Empty, Equals, Not Equals, Contains, Not Contains, Starts With, and Ends With.
Numeric
Empty, Equals, Not Equals, Less Than, Less Than or Equals, Greater Than, Greater Than Or Equals, and Range.
Date
Empty, Equals, Not Equals, Less Than, Less Than or Equals, Greater Than, Greater Than Or Equals, and Range.
Binary
Empty, Equals, and Not Equals.
Multiple Selection
Empty, Equals, and Not Equals.
Since filter execution comes down to evaluating every filter condition against the data set, you will see how to implement your filter conditions per column or at the grid scope.
We added only two conditions to the Name column: Contains and Not Contains. We also added our custom implementation of the StartsWith condition.
For the Age column, let us define a filter that gives us all the numbers outside a close interval.
Notice how we have added the word range in the condition value (not-in-range-interval). If you omit the range word, the UI will not show the second textbox for typing a numeric value.
Let us define some custom conditions for the Hire Date column:
We have added two existing conditions in the previous example: Greater Than and Less Than. We also defined a custom condition: Close Interval. Same as before, we added the word range to the value of the custom condition.
As you can see, the DikeGrid uses the native Date
type. So do not forget to import the MatNativeDateModule
or a custom implementation instead.
With the Binary Filter, the user must select between two options only. Furthermore, those options are mutually exclusive by definition.
If you only define a Binary
column as filterable, you will see the filters options as shown in the following screenshot:
We have defined the following features with the previous code snippet:
We added Equals and Not Equals conditions. If you try adding a non-valid condition, the DikeGrid will only add valid filter conditions.
We have defined our labels and values according to the Gender column values.
Notice how we have added an initial filter for the Gender column. We tell our DikeGrid that filters the data set with a male value setting the selected
property to true.
The previous filter definition generates the following output:
If you try to add a condition different from Equals, Not Equal, or Empty, the DikeGrid will throw an error. You can only overwrite the mentioned conditions.
In some cases, you want the user to select several options but a fixed number of options.
Consider the following definitions in the evaluation of the conditions:
Equals
The DikeGrid evaluates the selected options with the OR logical operator.
Not Equals
The DikeGrid evaluates the selected options with the AND logical operator. Then, it takes the complement of the result set.
Empty
If you add the Empty condition, it will appear as a checkbox indicating if the filtering operation includes or excludes the empty values. The latter depends on the Equals or Not Equals selection, respectively.
Let us define a Multiple Text Filter for the Surname column:
With the previous code snippet:
We have added the Empty, Equals, and Not Equals filter conditions.
We have defined several options from which the user can select.
We could have provided an initial filter selecting more than one option.
Let us define a Multiple Text Filter for the Performance column:
With the previous code snippet:
We have added Equals and Not Equals conditions.
We added five options to the custom filter.
Important. Notice how we define the getter function rounding the performance value to close the options to an integer value.
You can change the column filter conditions at runtime.
setColumnFilterability()
The previous customizations apply at the column level. In addition, you can change the definition at the grid level.
To change conditions at grid scope, you must provide the corresponding custom instance through an input property named gridCustomFilterConditions
.
Let us provide a custom condition for Text
types.
We have defined a new custom condition for Text
types named grid-customUpperCaseText. This condition will apply to the Email column only because we have not specified any custom condition for that column. See the following screenshot.
The lowest precedence to define a new condition is by providing an Injection Token.
CUSTOM_TEXT_FILTER_CONDITIONS
CUSTOM_NUMERIC_FILTER_CONDITIONS
CUSTOM_DATE_FILTER_CONDITIONS
CUSTOM_BINARY_FILTER_CONDITIONS
Let us define a custom condition for Text
types.
We have defined a new custom condition for Text
types named global-customLowerCaseText. This condition will apply to the Email column only because we have not specified any custom condition for that column. See the following screenshot.
When the DikeGrid instance filters the rows, it considers the following values as empties:
Text
and Binary
null
, undefined
, and empty strings
.
Numeric
null
, undefined
, and NaN
values.
Date
null
, undefined
, and Invalid Dates
.
Filters depend on the column type where the filter will apply. Apart from the column type a filter applies, there is one more type: Multiple Selection Filter, an extension of Text and Numeric filter types.
Since filter execution comes down to evaluating every filter condition, you can add or overwrite conditions.
When defining a custom condition, you must implement an object of type .
You must provide an instance of type when defining a column.
The customFilterConditions
property of the is of type . Therefore, be aware of assigning the correct custom instance.
You must provide a instance for numeric types when defining a column.
You must provide a instance for Date
types when defining a column.
Let us define options according to our values in our data set for the Gender column. For Binary
columns, we have to provide a instance to add or overwrite conditions.
Options for Binary custom filters are of type , and you can only provide two options. If you offer more than two options, DikeGrid will ignore them.
For Multiple Text Filter conditions, you must provide a instance to a Text
column type.
You can provide any number of options for Multiple Text Filter. The array you provide is of type .
For Multiple Numeric Filter conditions, you must provide a instance to a Numeric
column type.
You can provide any number of options for Multiple Numeric Filter. The array you provide is of type .
You can provide an instance of type . Be aware of passing the correct instance depending on the column type. The DikeGrid will take the provided instance if the filterable flag is true
.
The gridCustomFilterConditions
property is of type . You can not change this property at runtime.
We recommend you define the getter function for the columns you define. For further details, see the section.