# Filter types
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.
{% hint style="info" %}
See the column types in the [Columns Definitions](https://docs.dikesoft.com/columns/column-definitions#column-types) section.
{% endhint %}
## Live example
{% hint style="success" %}
[Filter types](https://demos.dikesoft.com/dk-grid/filtering/filter-types) live example.
{% endhint %}
## Filter conditions
The following table shows the existing filter types and the conditions that apply for each of them:
| Filter type | Conditions |
| -------------------- | ----------------------------------------------------------------------------------------------------------- |
| `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. |
## Customizing filter conditions
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.
{% hint style="info" %}
All **custom** instances do not have any defined condition. You must add or implement every filter condition.
{% endhint %}
{% hint style="success" %}
When defining a custom condition, you must implement an object of type [`Condition`](https://docs.dikesoft.com/reference/interfaces/filtering#condition-less-than-t-r-v-greater-than).
{% endhint %}
### Text Filter
You must provide an instance of type [`CustomTextCaseFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#customtextcasefiltercondition-less-than-t-greater-than) when defining a column.
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
@Component({
selector: 'filter-types',
templateUrl: './filter-types.component.html',
styleUrls: ['./filter-types.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FilterTypesComponent implements OnInit, OnDestroy {
nameConditions: CustomTextCaseFilterCondition;
ngOnInit(): void {
// We only add Contains and Not Contains filter conditions to the Name column:
this.nameConditions = new CustomTextCaseFilterCondition()
.addExistingCondition(ConditionType.CONTAINS)
.addExistingCondition(ConditionType.NOT_CONTAINS)
// And we provide our Starts With implementation:
.addCondition({
text: 'My Starts With',
value: ConditionType.STARTS_WITH,
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef, values?: DikeTextCaseFilter) =>
entry.firstName.toLocaleLowerCase().startsWith(values.value.toLowerCase())
});
}
}
```
{% endtab %}
{% endtabs %}
We added only two conditions to the **Name** column: **Contains** and **Not Contains**. We also added our custom implementation of the **StartsWith** condition.
{% hint style="warning" %}
The `customFilterConditions` property of the [`DikeGridColumnComponent`](https://docs.dikesoft.com/reference/components/dkgridcolumncomponent#properties) is of type [`CustomFilterConditionInstance`](https://docs.dikesoft.com/reference/type-aliases/filtering#customfilterconditioninstance-less-than-t-greater-than). Therefore, be aware of assigning the correct custom instance.
{% endhint %}
### Numeric Filter
You must provide a [`CustomNumericFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#customnumericfiltercondition-less-than-t-greater-than) instance for numeric types when defining a column.
For the **Age** column, let us define a filter that gives us all the numbers outside a close interval.
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Age column:
const ageColumn = new DikeNumericColumnDef('age', 'Age');
ageColumn.order = 3;
ageColumn.width = 100;
ageColumn.filterable = true;
ageColumn.sortable = true;
ageColumn.customFilterConditions = new CustomNumericFilterCondition()
.addCondition({
text: 'Not In Close Interval [value1, value2]',
value: 'not-in-range-interval',
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef, values?: DikeNumericFilter) =>
!(entry.age >= values.value1 && entry.age <= values.value2)
});
//...
}
```
{% endtab %}
{% endtabs %}
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.
### Date Filter
You must provide a [`CustomDateFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#customdatefiltercondition-less-than-t-greater-than) instance for `Date` types when defining a column.
{% hint style="info" %}
A Date Filter has the same conditions as a Numeric Filter.
{% endhint %}
Let us define some custom conditions for the **Hire Date** column:
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Hire Date column:
const hireDateColumn = new DikeDateColumnDef('hireDate', 'Hire Date');
hireDateColumn.order = 5;
hireDateColumn.width = 120;
hireDateColumn.sortable = true;
hireDateColumn.filterable = true;
hireDateColumn.customFilterConditions = new CustomDateFilterCondition()
.addExistingCondition(ConditionType.GREATER_THAN)
.addExistingCondition(ConditionType.LESS_THAN)
.addCondition({
text: 'Close Interval',
value: 'close-range-interval',
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef, values?: DikeDateFilter) =>
entry.hireDate >= values.value1 && entry.hireDate <= values.value2
});
//...
}
```
{% endtab %}
{% endtabs %}
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.
{% hint style="warning" %}
As you can see, the DikeGrid uses the native `Date` type. So do not forget to import the `MatNativeDateModule` or a custom implementation instead.
{% endhint %}
### Binary Filter
With the Binary Filter, the user must select between two options only. Furthermore, those options are mutually exclusive by definition.
{% hint style="info" %}
For filtering, the DikeGrid casts Binary Filters values to string values.
{% endhint %}
If you only define a `Binary` column as **filterable**, you will see the filters options as shown in the following screenshot:
Let us define options according to our values in our data set for the **Gender** column. For `Binary` columns, we have to provide a [`CustomBinaryFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#custombinaryfiltercondition-less-than-t-greater-than) instance to add or overwrite conditions.
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Gender column:
const genderColumn = new DikeBinaryColumnDef('gender', 'Gender');
genderColumn.order = 4;
genderColumn.width = 110;
genderColumn.sortable = true;
genderColumn.filterable = true;
genderColumn.customFilterConditions = new CustomBinaryFilterCondition()
.addExistingCondition(ConditionType.EQUALS)
.addExistingCondition(ConditionType.NOT_EQUALS);
// Then, add the visible options:
genderColumn.customFilterConditions.options = [ { label: 'Female', value: 'female' }, { label: 'Male', value: 'male', selected: true } ];
}
```
{% endtab %}
{% endtabs %}
We have defined the following features with the previous code snippet:
1. We added **Equals** and **Not Equals** conditions. If you try adding a **non-valid** condition, the DikeGrid will only **add** **valid** filter conditions.
2. We have defined our **labels** and **values** according to the **Gender** column values.
3. 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:
{% hint style="info" %}
Options for Binary custom filters are of type [`DikeBinarySelectionModel`](https://docs.dikesoft.com/reference/interfaces/filtering#dikebinaryselectionmodel), and you can only provide **two** options. If you offer more than two options, DikeGrid will ignore them.
{% endhint %}
{% hint style="danger" %}
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.
{% endhint %}
### Multiple Selection
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:
| Condition | Evaluation |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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. |
#### Multiple Text Filter
For Multiple Text Filter conditions, you must provide a [`CustomMultipleTextFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#custommultipletextfiltercondition-less-than-t-greater-than) instance to a `Text` column type.
Let us define a Multiple Text Filter for the **Surname** column:
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
@Component({
selector: 'filter-types',
templateUrl: './filter-types.component.html',
styleUrls: ['./filter-types.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FilterTypesComponent implements OnInit, OnDestroy {
surnameConditions: CustomMultipleTextFilterCondition;
ngOnInit(): void {
// We add all the valid conditions for Multiple Selection filters:
this.surnameConditions = new CustomMultipleTextFilterCondition()
.addExistingCondition(ConditionType.EMPTY)
.addExistingCondition(ConditionType.EQUALS)
.addExistingCondition(ConditionType.NOT_EQUALS);
// And we have added several options:
this.surnameConditions.options = [
{ label: 'Abbott', value: 'Abbott' },
{ label: 'Adams', value: 'Adams' },
{ label: 'Bahringer', value: 'Bahringer' },
{ label: 'Balistreri', value: 'Balistreri' },
{ label: 'Beier', value: 'Beier' },
{ label: 'Bernier', value: 'Bernier' },
{ label: 'Dare', value: 'Dare' },
{ label: 'Gutkowski', value: 'Gutkowski' },
{ label: 'Herman', value: 'Herman' },
{ label: 'Lockman', value: 'Lockman' },
{ label: 'Marvin', value: 'Marvin' },
{ label: 'Parker', value: 'Parker' },
{ label: 'Reynolds', value: 'Reynolds' },
{ label: 'Ritchie', value: 'Ritchie' },
{ label: 'Schmidt', value: 'Schmidt' },
{ label: 'Thompson', value: 'Thompson' },
{ label: 'Walker', value: 'Walker' },
{ label: 'Williamson', value: 'Williamson' },
{ label: 'Zulauf', value: 'Zulauf' }
];
}
}
```
{% endtab %}
{% endtabs %}
With the previous code snippet:
1. We have added the **Empty**, **Equals**, and **Not Equals** filter conditions.
2. We have defined several options from which the user can select.
3. We could have provided an initial filter **selecting** more than one option.
{% hint style="info" %}
You can provide any number of options for **Multiple Text Filter**. The array you provide is of type [`DikeTextSelectionModel`](https://docs.dikesoft.com/reference/interfaces/filtering#diketextselectionmodel).
{% endhint %}
#### Multiple Numeric Filter
For Multiple Numeric Filter conditions, you must provide a [`CustomMultipleNumericFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#custommultiplenumericfiltercondition-less-than-t-greater-than) instance to a `Numeric` column type.
Let us define a Multiple Text Filter for the **Performance** column:
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Performance column:
const performanceColumn = new DikeNumericColumnDef('performance', 'Performance');
performanceColumn.order = 7;
performanceColumn.width = 120;
performanceColumn.sortable = true;
performanceColumn.filterable = true;
performanceColumn.getValue = (entry: Employee): number => Math.round(entry.performance);
// Define the filter as Multiple Selection filter:
performanceColumn.customFilterConditions = new CustomMultipleNumericFilterCondition()
.addExistingCondition(ConditionType.EQUALS)
.addExistingCondition(ConditionType.NOT_EQUALS);
// Add a fixed number of options:
performanceColumn.customFilterConditions.options = [
{ label: 'Five', value: 5 },
{ label: 'Four', value: 4 },
{ label: 'Three', value: 3 },
{ label: 'Two', value: 2 },
{ label: 'One', value: 1 },
];
//...
}
```
{% endtab %}
{% endtabs %}
With the previous code snippet:
1. We have added **Equals** and **Not Equals** conditions.
2. We added five options to the custom filter.
3. **Important**. Notice how we define the getter function rounding the performance value to close the options to an integer value.
{% hint style="info" %}
You can provide any number of options for **Multiple Numeric Filter**. The array you provide is of type [`DikeNumericSelectionModel`](https://docs.dikesoft.com/reference/interfaces/filtering#dikenumericselectionmodel).
{% endhint %}
## Customizing conditions using the API
You can change the column filter conditions at **runtime**.
| Method | Description |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setColumnFilterability()` | You can provide an instance of type [`CustomFilterConditionInstance`](https://docs.dikesoft.com/reference/type-aliases/filtering#customfilterconditioninstance-less-than-t-greater-than). 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`. |
## Customization at the grid level
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`.
{% hint style="info" %}
The `gridCustomFilterConditions` property is of type [`DikeGridCustomFilterConditions`](https://docs.dikesoft.com/reference/type-aliases/filtering#dikegridcustomfilterconditions-less-than-t-greater-than). You **can not change** this property at **runtime**.
{% endhint %}
Let us provide a custom condition for `Text` types.
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup
```
{% endtab %}
{% tab title="filter-types.component.ts" %}
```typescript
ngOnInit(): void {
//...
// Defining filter conditions at DikeGrid instance level:
this.gridCustomConditions = {
customTextFilterConditions: new CustomTextCaseFilterCondition()
.addExistingCondition(ConditionType.CONTAINS)
.addCondition({
text: 'Grid Custom Upper Case',
value: 'grid-customUpperCaseText',
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef, values?: DikeTextFilter): boolean =>
dataColumnDef.getValue(entry).toUpperCase().includes(values.value)
})
};
}
```
{% endtab %}
{% endtabs %}
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.
{% hint style="info" %}
It is essential to notice that when you define a new custom condition at the grid level, the DikeGrid will **add** this condition to the existing ones.
{% endhint %}
## Customization by providing an Injection Token
The lowest precedence to define a new condition is by providing an Injection Token.
| Injection Token | Custom instance |
| ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `CUSTOM_TEXT_FILTER_CONDITIONS` | [`CustomTextCaseFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#customtextcasefiltercondition-less-than-t-greater-than) |
| `CUSTOM_NUMERIC_FILTER_CONDITIONS` | [`CustomNumericFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#customnumericfiltercondition-less-than-t-greater-than) |
| `CUSTOM_DATE_FILTER_CONDITIONS` | [`CustomDateFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#customdatefiltercondition-less-than-t-greater-than) |
| `CUSTOM_BINARY_FILTER_CONDITIONS` | [`CustomBinaryFilterCondition`](https://docs.dikesoft.com/reference/classes/filtering#custombinaryfiltercondition-less-than-t-greater-than) |
Let us define a custom condition for `Text` types.
{% code title="filtering.module.ts" %}
```typescript
@NgModule({
providers: [
{
provide: CUSTOM_TEXT_FILTER_CONDITIONS,
useFactory: (): CustomTextCaseFilterCondition =>
new CustomRowTextCaseFilterCondition()
.addCondition({
text: 'Global Custom Lower Case',
value: 'global-customLowerCaseText',
eval: (entry: Employee, dataColumnDef: DikeDataColumnDef, values?: DikeTextFilter): boolean =>
dataColumnDef.getValue(entry).toLowerCase().includes(values.value)
})
}
]
})
export class FilteringModule { }
```
{% endcode %}
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.
{% hint style="info" %}
It is essential to notice that when you define a new custom condition by providing an Injection Token, the DikeGrid will **add** this condition to the existing ones.
{% endhint %}
## Empty Values
When the DikeGrid instance filters the rows, it considers the following values as empties:
| Filter type | Value |
| ------------------- | --------------------------------------------------------------------------- |
| `Text` and `Binary` | `null`, `undefined`, and empty `strings`. |
| `Numeric` | `null`, `undefined`, and `NaN` values. |
| `Date` | `null`, `undefined`, and `Invalid Dates`. |
{% hint style="info" %}
We recommend you define the **getter function** for the columns you define. For further details, see the [Column Definitions](https://docs.dikesoft.com/columns/column-definitions#retrieving-and-updating-a-field-value) section.
{% endhint %}
## Summary
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.
### Complete code for this section
{% tabs %}
{% tab title="filter-types.component.html" %}
```markup