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:

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-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:

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

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

    <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:

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

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.

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

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

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

    <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

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.

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

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

        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.

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

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

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

        public titleChange(values: any[], 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.