Expression Value Template

The Kendo UI for Angular Filter component allows you to customize the value editor for each filter expression using templates. This enables you to provide tailored editing experiences, such as dropdowns or custom inputs, for specific filter fields.

Setting a Template for Specific Editor Types

To use a custom editor template for a filter expression, follow these steps:

1. Define the template with context variables by creating an <ng-template> and using the available context variable to access the current filter item:

   html

   <ng-template #template let-currentItem="item">
     <kendo-dropdownlist
       [data]="['Europe', 'Canada']"
       [value]="currentItem.value"
       (valueChange)="editorValueChange($event, currentItem, filter.value)"
     >
     </kendo-dropdownlist>
   </ng-template>

The template context variable let-currentItem="item" provides access to the current filter descriptor which includes the field, operator, and value properties.

1. Get a reference to the template by using @ViewChild in the component class:

   ts

   @ViewChild("template", { static: true })
   public template: TemplateRef<any>;

2. Set the editorTemplate property of the filter expression to the template:

   ts

   public ngOnInit(): void {
     // Assign the custom template to the first filter (e.g., country field).
     this.filters[0].editorTemplate = this.template;
   }

3. 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 editorValueChange(value: any, currentItem: FilterDescriptor, filterValue: CompositeFilterDescriptor): void {
     // Update the filter value based on the user's selection.
    currentItem.value = value;
   }

The following example demonstrates how to set up a custom dropdown editor for a filter field:

Setting Value Editor Template for all Editor Types

To set a value editor template for every editor type, nest an <ng-template> with the kendoFilterValueEditorTemplate directive inside each <kendo-filter-field> component:

<kendo-filter-field field="country" title="Country" [operators]="operators">
  <ng-template kendoFilterValueEditorTemplate let-currentItem="item">
    <kendo-dropdownlist
      [data]="['Europe', 'Canada']"
      [value]="currentItem.value"
      (valueChange)="editorValueChange($event, currentItem, filter.value)"
    >
    </kendo-dropdownlist>
  </ng-template>
</kendo-filter-field>
<kendo-filter-field field="product" title="Product" [operators]="operators">
  <ng-template kendoFilterValueEditorTemplate let-currentItem="item">
    <kendo-dropdownlist
      [data]="['apple', 'banana']"
      [value]="currentItem.value"
      (valueChange)="editorValueChange($event, currentItem, filter.value)"
    >
    </kendo-dropdownlist>
  </ng-template>

The following example shows how to apply a value editor template for every filter field:

Suggested Links

• API Reference of the Filter