Templates

Updated on May 19, 2026

Each expression row in the Filter component contains a field selector, an operator selector, and a value editor. Use templates to replace any of these controls with custom components.

Fields Template

Replace the field selector DropDownList across all expression rows with a searchable ComboBox or any other control.

Operator Template

Replace the operator selector DropDownList for a specific field to add custom operators or a different control type.

Value Editor Template

Replace the value input for a specific field with a dropdown, date picker, or any other editor component.

Fields Template

Use the kendoFilterFieldsTemplate directive to replace the built-in field selector DropDownList with any control or behavior that fits your scenario.

Common use cases include keeping the default DropDownList style while adding search filtering for long field lists, grouping fields by category, implementing templates for the list items, or replacing it entirely with a searchable ComboBox.

The following demo shows a ComboBox with incremental search in place of the default field selector. Type in the field selector to filter the available fields by name:

Change Theme

Theme

Loading ...

To configure the fields template, follow these steps:

1. Place an <ng-template> with the kendoFilterFieldsTemplate directive inside <kendo-filter> and bind to the two context variables the directive exposes:

   html

   <kendo-filter [value]="value" (valueChange)="onValueChange($event)">
     <ng-template kendoFilterFieldsTemplate let-currentItem let-filters="filters">
       <kendo-combobox
         [data]="filters"
         textField="title"
         valueField="field"
         [valuePrimitive]="true"
         [value]="currentItem.field"
         (valueChange)="onFieldChange($event, currentItem)"
       >
       </kendo-combobox>
     </ng-template>
   </kendo-filter>

   typescript

   public onValueChange(value: CompositeFilterDescriptor): void {
     this.value = value;
   }
   
   public onFieldChange(field: string, currentItem: FilterDescriptor): void {
     currentItem.field = field;
   }

   The template context exposes two variables:

   • let-currentItem—the FilterDescriptor for the current row. Set currentItem.field to change the active field. The Filter component detects the mutation and automatically resets the row value, updates the operator list, and switches the editor type.
   • let-filters="filters"—the full list of available FilterExpression items. Use this array to populate the custom component's data source.

Operator Template

Use the kendoFilterOperatorTemplate directive to customize or replace the default operator selector DropDownList per filter field. The template receives the current FilterDescriptor as context. Read the operator of the FilterDescriptor to reflect the current selection and update it it when the user picks a new value.

This template is particularly useful when you need operators that the built-in set does not include, such as a Between option for numeric fields. Fields without the directive continue to render the built-in operator selector.

You can configure the operator template declaratively for a filter field, or assign it programmatically to a specific filter expression:

For a Filter FieldFor a Specific Filter Expression

Apply the kendoFilterOperatorTemplate directive to an <ng-template> inside a <kendo-filter-field> element to declaratively implement a custom operator selector to that field.

Change Theme

Theme

Loading ...

To configure the operator template with the directive, follow these steps:

1. Add the template inside a <kendo-filter-field> element and bind to the context variable:

   html

   <kendo-filter-field field="budget" title="Budget" editor="number">
     <ng-template kendoFilterOperatorTemplate let-filter>
       <kendo-combobox
         [data]="budgetOperators"
         textField="text"
         valueField="value"
         [valuePrimitive]="true"
         [value]="filter.operator"
         (valueChange)="onOperatorChange($event, filter)"
       >
       </kendo-combobox>
     </ng-template>
   </kendo-filter-field>

   The implicit context variable let-filter holds the current FilterDescriptor with field, operator, and value properties. When the user selects a null-type operator such as isnull or isnotnull, the value editor hides automatically.

2. Handle operator changes by using the component's change event to update the operator when the user makes a selection. In this case, use the ComboBox valueChange event:

   typescript

   public budgetOperators = [
     { text: 'Greater than', value: 'gt' },
     { text: 'Less than', value: 'lt' },
     { text: 'Between', value: 'between' }
   ];
   
   public onOperatorChange(operator: string, filter: FilterDescriptor): void {
     filter.operator = operator;
   }

To assign an operator template from the component class, define an <ng-template> with a reference variable, retrieve it with @ViewChild, and set it on the operatorTemplate property of the target FilterExpression.

Change Theme

Theme

Loading ...

To apply the operator template programmatically, follow these steps:

1. Define the template outside <kendo-filter> and add a reference variable:

   html

   <ng-template #operatorTemplate let-filter>
     <kendo-combobox
       [data]="numericOperators"
       textField="text"
       valueField="value"
       [valuePrimitive]="true"
       [value]="filter.operator"
       (valueChange)="onOperatorChange($event, filter)"
     >
     </kendo-combobox>
   </ng-template>

2. Handle operator changes by using the component's change event to update the operator when the user makes a selection. In this case, use the ComboBox valueChange event:

   typescript

   public onOperatorChange(operator: string, filter: FilterDescriptor): void {
     filter.operator = operator;
   }

3. Get a reference to the template in the component class and assign it to the target filter expression in ngOnInit:

   typescript

   @ViewChild('operatorTemplate', { static: true })
   public operatorTemplate: TemplateRef<FilterDescriptor>;
   
   public ngOnInit(): void {
     this.filters[0].operatorTemplate = this.operatorTemplate;
   }

Value Editor Template

Use the kendoFilterValueEditorTemplate directive to replace the value input for a specific filter field. Configure it declaratively inside a <kendo-filter-field>, or assign it from the component class.

You can apply the value editor template declaratively for a filter field, or assign it programmatically to a specific filter expression:

For a Filter FieldFor a Specific Filter Expression

The following demo shows a custom DropDownList editor applied to every filter field with the directive:

Change Theme

Theme

Loading ...

To configure the value editor template with the directive, follow these steps:

1. Add the template inside a <kendo-filter-field> element and bind to the context variable:

   html

   <kendo-filter-field field="country" title="Country" [operators]="operators">
     <ng-template kendoFilterValueEditorTemplate let-currentItem>
       <kendo-dropdownlist
         [data]="regions"
         [value]="currentItem.value"
         (valueChange)="onEditorValueChange($event, currentItem)"
       >
       </kendo-dropdownlist>
     </ng-template>
   </kendo-filter-field>

   The implicit context variable let-currentItem holds the current filter descriptor with field, operator, and value properties.

2. Handle value changes by using the component's change event to update the filter value when the user makes a selection. In this case, use the DropDownList valueChange event:

   typescript

   public regions: string[] = ['Europe', 'Canada'];
   
   public onEditorValueChange(value: string, currentItem: FilterDescriptor): void {
     currentItem.value = value;
   }

To assign a value editor template from the component class, define an <ng-template> with a reference variable, retrieve it with @ViewChild, and set it on the editorTemplate property of the target FilterExpression.

Change Theme

Theme

Loading ...

To apply the value editor template programmatically, follow these steps:

1. Define the template with a reference variable and bind to the context variable:

   html

   <ng-template #editorTemplate let-currentItem>
     <kendo-dropdownlist
       [data]="regions"
       [value]="currentItem.value"
       (valueChange)="onEditorValueChange($event, currentItem)"
     >
     </kendo-dropdownlist>
   </ng-template>

   The context variable let-currentItem holds the current filter descriptor with field, operator, and value properties.

2. Handle value changes by using the component's change event to update the filter value when the user makes a selection. In this case, use the DropDownList valueChange event:

   typescript

   public regions: string[] = ['Europe', 'Canada'];
   
   public onEditorValueChange(value: string, currentItem: FilterDescriptor): void {
     currentItem.value = value;
   }

3. Get a reference to the template in the component class and assign it to the target filter expression in ngOnInit:

   typescript

   @ViewChild('editorTemplate', { static: true })
   public editorTemplate: TemplateRef<any>;
   
   public ngOnInit(): void {
     this.filters[0].editorTemplate = this.editorTemplate;
   }

The following demo shows a custom DropDownList editor applied to a filter expression from the component class:

Suggested Links

• API Reference of the Filter