Built-In Filter Templates

The built-in filter templates enable you to both utilize the available configuration options and customize the filter settings of the Grid.

Configuring Built-In Filters

The Kendo UI Grid for Angular ships with built-in filters for common data types which enable you to:

Configuration Components for Filter Templates

The following ready-for-use components are available for the filter-cell template:

All built-in filter-cell components require you to bind the "column" and "filter" attributes to the template context.

    <kendo-grid-column field="ProductName" title="Product Name">
        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
          <kendo-grid-string-filter-cell [column]="column" [filter]="filter">
          </kendo-grid-string-filter-cell>
        </ng-template>
    </kendo-grid-column>

The following ready-for-use components are available for the filter-menu template:

All built-in filter-menu components require you to bind the "column", "filter", and "filterService" attributes to the template context.

    <kendo-grid-column field="ProductName" title="Product Name">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
          <kendo-grid-string-filter-menu [column]="column" [filter]="filter" [filterService]="filterService">
          </kendo-grid-string-filter-menu>
        </ng-template>
    </kendo-grid-column>

Hiding Row Filter Operators

To hide the list of row filter operators, set the showOperators option to false.

    <kendo-grid-column field="ProductName" title="Product Name">
        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
          <kendo-grid-string-filter-cell
            [showOperators]="false"
            [column]="column"
            [filter]="filter">
          </kendo-grid-string-filter-cell>
        </ng-template>
    </kendo-grid-column>

Setting the Default Filter Operator

The default operators for the built-in filter components are:

ComponentDefault Operator
kendo-grid-boolean-filter-cell"eq"
kendo-grid-date-filter-cell"gte"
kendo-grid-numeric-filter-cell"eq"
kendo-grid-string-filter-cell"contains"
kendo-grid-boolean-filter-menu"eq"
kendo-grid-date-filter-menu"gte"
kendo-grid-numeric-filter-menu"eq"
kendo-grid-string-filter-menu"contains"

If "operator" is set to "", the Grid will use the first operator from the defined list of operators as its default operator.

You can override the default filter operators by setting the "operator" property. The following example demonstrates how to configure a string filter and select the "startswith" operator.

    <kendo-grid-column field="ProductName" title="Product Name">
        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
          <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="startswith">
              <kendo-filter-startswith-operator></kendo-filter-startswith-operator>
              <kendo-filter-eq-operator></kendo-filter-eq-operator>
          </kendo-grid-string-filter-cell>
        </ng-template>
    </kendo-grid-column>

The following example demonstrates how to set the default filter operator by using the filter menu.

    <kendo-grid-column field="ProductName" title="Product Name">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
          <kendo-grid-string-filter-menu
            [column]="column"
            [filter]="filter"
            [filterService]="filterService"
            operator="startswith">
              <kendo-filter-startswith-operator></kendo-filter-startswith-operator>
              <kendo-filter-eq-operator></kendo-filter-eq-operator>
          </kendo-grid-string-filter-menu>
        </ng-template>
    </kendo-grid-column>

Setting the Order of the Filter Operators

You can manually fine-tune the order and number of available operators by adding operator components.

The following example demonstrates how to set the order of operators by using the filter row.

    <kendo-grid-column field="ProductName" title="Product Name">
        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
          <kendo-grid-string-filter-cell [column]="column" [filter]="filter">
              <kendo-filter-contains-operator></kendo-filter-contains-operator>
              <kendo-filter-eq-operator></kendo-filter-eq-operator>
          </kendo-grid-string-filter-cell>
        </ng-template>
    </kendo-grid-column>

The following example demonstrates how to set the order of operators by using the filter menu.

    <kendo-grid-column field="ProductName" title="Product Name">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
          <kendo-grid-string-filter-menu
            [column]="column"
            [filter]="filter"
            [filterService]="filterService">
              <kendo-filter-contains-operator></kendo-filter-contains-operator>
              <kendo-filter-eq-operator></kendo-filter-eq-operator>
          </kendo-grid-string-filter-menu>
        </ng-template>
    </kendo-grid-column>

Implementing Custom Filters

Depending on the filtering logic your project applies, you can add custom-filter interfaces by:

Customizing Filter Rows

You can customize the filter row through the filter-row template. The following steps demonstrate how to implement a custom checkbox filter.

  1. Add a template tag with the kendoGridFilterCellTemplate directive for the Boolean column.

      <kendo-grid-column field="Discontinued" width="120">
         <ng-template kendoGridFilterCellTemplate let-filter>
         </ng-template>
      </kendo-grid-column>
  2. Inside the template tag, place the Switch component.

      <kendo-grid-column field="Discontinued" width="120">
         <ng-template kendoGridFilterCellTemplate let-filter>
            <kendo-switch
                (valueChange)="switchChange($event)"
                offLabel="No"
                [checked]="checked"
                onLabel="Yes">
            </kendo-switch>
         </ng-template>
      </kendo-grid-column>
  3. Handle the valueChange event and set the filter. Use a new object instance to trigger a change detection cycle.

        public switchChange(checked: boolean): void {
            const root = { logic: 'and', filters: [], ...this.filter };
    
            const [filter] = flatten(root).filter(x => x.field === "Discontinued");
    
            if (!filter) {
                root.filters.push({
                    field: "Discontinued",
                    operator: "eq",
                    value: checked
                });
            } else {
                filter.value = checked;
            }
            this.checked = checked;
            this.filterChange(root);
        }

The following example demonstrates the full implementation of the approach.

Example
View Source
Edit In Stackblitz  
Change Theme:

Customizing Filter Menus

You can customize the filter menu through the filter-menu template. The following steps demonstrate how to implement a custom multi-select filter.

  1. Add a template tag with the kendoGridFilterMenuTemplate directive for the CategoryID column.

     <kendo-grid-column field="CategoryID" title="Category" width="180">
        <ng-template kendoGridFilterMenuTemplate
            let-column="column"
            let-filter="filter"
            let-filterService="filterService"
            >
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
            {{dataItem.Category?.CategoryName}}
        </ng-template>
    </kendo-grid-column>
  2. Inside the template tag, place the MultiSelect component.

     <kendo-grid-column field="CategoryID" title="Category" width="180">
        <ng-template kendoGridFilterMenuTemplate
            let-column="column"
            let-filter="filter"
            let-filterService="filterService"
            >
            <kendo-multiselect
                style="width:220px"
                [data]="categories"
                textField="CategoryName"
                valueField="CategoryID"
                [valuePrimitive]="true"
                [value]="categoryFilters(filter)"
                (valueChange)="categoryChange($event, filterService)"
                >
            </kendo-multiselect>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
            {{dataItem.Category?.CategoryName}}
        </ng-template>
     </kendo-grid-column>
  3. Handle the valueChange event and set the filter through the filterService instance.

        public categoryChange(values: any[], filterService: FilterService): void {
            filterService.filter({
                filters: values.map(value => ({
                    field: "CategoryID",
                    operator: "eq",
                    value
                })),
                logic: "or"
            });
        }

The following example demonstrates the full implementation of the approach.

Example
View Source
Edit In Stackblitz  
Change Theme: