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 TreeList.

Configuring Built-In Filters

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

• Use available configuration components in the filter templates
• Hide the row filter operators
• Set the default filter operator
• Set the order of filter operators

Configuration Components for Filter Templates

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

• kendo-treelist-boolean-filter-cell
• kendo-treelist-date-filter-cell
• kendo-treelist-numeric-filter-cell
• kendo-treelist-string-filter-cell

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

Copy Code    <kendo-treelist-column field="name">
        <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
          <kendo-treelist-string-filter-cell [column]="column" [filter]="filter">
          </kendo-treelist-string-filter-cell>
        </ng-template>
    </kendo-treelist-column>

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

• kendo-treelist-boolean-filter-menu
• kendo-treelist-date-filter-menu
• kendo-treelist-numeric-filter-menu
• kendo-treelist-string-filter-menu

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

Copy Code    <kendo-treelist-column field="name">
        <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
          <kendo-treelist-string-filter-menu [column]="column" [filter]="filter" [filterService]="filterService">
          </kendo-treelist-string-filter-menu>
        </ng-template>
    </kendo-treelist-column>

Hiding Row Filter Operators

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

Copy Code    <kendo-treelist-column field="name">
        <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
          <kendo-treelist-string-filter-cell
            [showOperators]="false"
            [column]="column"
            [filter]="filter">
          </kendo-treelist-string-filter-cell>
        </ng-template>
    </kendo-treelist-column>

Setting the Default Filter Operator

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

If "operator" is set to "", the TreeList 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.

Copy Code    <kendo-treelist-column field="name">
        <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
          <kendo-treelist-string-filter-cell [column]="column" [filter]="filter" operator="startswith">
              <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>
              <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>
          </kendo-treelist-string-filter-cell>
        </ng-template>
    </kendo-treelist-column>

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

Copy Code    <kendo-treelist-column field="name">
        <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
          <kendo-treelist-string-filter-menu
            [column]="column"
            [filter]="filter"
            [filterService]="filterService"
            operator="startswith">
              <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>
              <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>
          </kendo-treelist-string-filter-menu>
        </ng-template>
    </kendo-treelist-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.

Copy Code    <kendo-treelist-column field="name">
        <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
          <kendo-treelist-string-filter-cell [column]="column" [filter]="filter">
              <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>
              <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>
          </kendo-treelist-string-filter-cell>
        </ng-template>
    </kendo-treelist-column>

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

Copy Code    <kendo-treelist-column field="name">
        <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
          <kendo-treelist-string-filter-menu
            [column]="column"
            [filter]="filter"
            [filterService]="filterService">
              <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>
              <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>
          </kendo-treelist-string-filter-menu>
        </ng-template>
    </kendo-treelist-column>

Implementing Custom Filters

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

• Customizing filter rows
• Customizing filter menus

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 kendoTreeListFilterCellTemplate directive for the Boolean column.

   Copy Code  <kendo-treelist-column field="phone" title="Phone" [width]="180">
        <ng-template kendoTreeListFilterCellTemplate>
        </ng-template>
     </kendo-treelist-column>

2. Inside the template tag, place the MultSelect component.

   Copy Code  <kendo-treelist-column field="phone" title="Phone" [width]="180">
         <ng-template kendoTreeListFilterCellTemplate>
             <kendo-maskedtextbox mask="(999) 000-0000"
                 [promptPlaceholder]="prompt" [includeLiterals]="true"
                 (valueChange)="phoneChange($event)"
             >
             </kendo-maskedtextbox>
         </ng-template>
     </kendo-treelist-column>

3. Handle the valueChange event and set the filter. Use a new object instance to trigger a change detection cycle.

   Copy Code    public phoneChange(value: string): void {
           const root = { logic: 'and', filters: [], ...this.filter };
   
           if (!value || value.indexOf(this.prompt) >= 0) {
               removeFiltersForField(root)
           } else {
               const [ filter ] = flatten(root).filter(x => x.field === 'phone');
   
               if (!filter) {
                   root.filters.push({
                       field: 'phone',
                       operator: 'eq',
                       value: value
                   });
               } else {
                   filter.value = value;
               }
           }
   
           this.filter = root;
       }

The following example demonstrates the full implementation of the approach.

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 kendoTreeListFilterMenuTemplate directive for the title column.

   Copy Code<kendo-treelist-column field="title" title="Title" [width]="180">
       <ng-template kendoTreeListFilterMenuTemplate
           let-column="column"
           let-filter="filter"
           let-filterService="filterService"
           >
       </ng-template>
   </kendo-treelist-column>

2. Inside the template tag, place the MultiSelect component.

   Copy Code<kendo-treelist-column field="title" title="Title" [width]="180">
       <ng-template kendoTreeListFilterMenuTemplate
           let-column="column"
           let-filter="filter"
           let-filterService="filterService"
           >
           <kendo-multiselect
               style="width:220px"
               [data]="titles"
               [valuePrimitive]="true"
               [value]="titleFilters(filter)"
               (valueChange)="titleChange($event, filterService)"
               >
           </kendo-multiselect>
       </ng-template>
   </kendo-treelist-column>

3. Handle the valueChange event and set the filter through the filterService instance.

   Copy Code    public titleChange(values: unknown[], filterService: FilterService): void {
           filterService.filter({
               filters: values.map(value => ({
                   field: 'title',
                   operator: 'eq',
                   value
               })),
               logic: 'or'
           });
       }

The following example demonstrates the full implementation of the approach.

Suggested Links

• API Reference of the TreeListComponent
• API Reference of the MultiSelect
• API Reference of the MaskedTextBox
• Overview of Filtering
• Reusable Custom Filter Components