Filter the Nodes

Even though the TreeView does not provide a built-in filtering functionality, the component delivers a generic approach for filtering hierarchical data recursively.

The following example demonstrates a sample search function that iterates over an array of hierarchical data and produces a new one based on a filter value and a predefined predicate.

public search(items: any[], term: string): any[] {
    return items.reduce((acc, item) => {
        if (this.contains(item.text, term)) {
            acc.push(item);
        } else if (item.items && item.items.length > 0) {
            let newItems = this.search(item.items, term);

            if (newItems.length > 0) {
            acc.push({ text: item.text, items: newItems });
            }
        }

        return acc;
    }, []);
}

public contains(text: string, term: string): boolean {
    return text.toLowerCase().indexOf(term.toLowerCase()) >= 0;
}
import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
    selector: 'my-app',
    template: `
     <input [(ngModel)]="searchTerm" #category (keyup)='onkeyup(category.value)' placeholder="Search categories" />
     <kendo-treeview
         textField="text"
         [animate]="false"
         [nodes]="parsedData"
         [children]="children"
         [hasChildren]="hasChildren"
     >
     </kendo-treeview>
 `
})
export class AppComponent {
    public data: any[] = [
        {
            text: 'Furniture', items: [
                { text: 'Tables & Chairs', items: [
                      { text: 'Coffee tables' },
                      { text: 'Poufs' }
                  ]
                },
                { text: 'Sofas' },
                { text: 'Occasional Furniture' }
            ]
        },
        {
            text: 'Decor', items: [
                { text: 'Bed Linen' },
                { text: 'Curtains & Blinds' },
                { text: 'Carpets' }
            ]
        }
    ];

    public parsedData: any[] = this.data;
    public searchTerm = '';

    public onkeyup(value: string): void {
      this.parsedData = this.search(this.data, value);
    }

    public search(items: any[], term: string): any[] {
      return items.reduce((acc, item) => {
            if (this.contains(item.text, term)) {
              acc.push(item);
            } else if (item.items && item.items.length > 0) {
              const newItems = this.search(item.items, term);

              if (newItems.length > 0) {
                    acc.push({ text: item.text, items: newItems });
              }
          }

            return acc;
        },                []);
    }

    public contains(text: string, term: string): boolean {
      return text.toLowerCase().indexOf(term.toLowerCase()) >= 0;
    }

    /**
     * A function that returns an observable instance which contains the
     * [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
     * for a given parent node.
     */
    public children = (dataitem: any): any[] => of(dataitem.items);

    /**
     * A function that determines whether a given node
     * [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
     */
    public hasChildren = (dataitem: any): boolean => !!dataitem.items;
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeViewModule } from '@progress/kendo-angular-treeview';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, TreeViewModule, FormsModule ]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article