Filtering

28 Mar 201811 minutes to read

Filtering helps to view specific or related records from data source which meets a given filtering criteria. To enable filtering in TreeGrid, set allowFiltering as true
TreeGrid provides support for the following filtering modes,

• Filter bar
• Menu

Also, the following filtering types are available in TreeGrid

• String
• Boolean
• Date
• Numeric
• Dropdown

The below code explains how to enable filtering in TreeGrid.

JAVASCRIPT

<ej-treegrid id="TreeGridControl" [allowFiltering]="true"
    //...>
</ej-treegrid>

The output of the TreeGrid with filtering enabled is as follows.

Filtering Modes

Filter Bar

This is the default filtering mode in TreeGrid. It can also be enabled by setting filterSettings.filterType as ej.TreeGrid.FilterType.FilterBar. When this filtering mode is enabled, a filter row will be displayed below the column header, in which we can provide the filter query.

There are two types of actions available to initiate the filtering process in the filter bar mode,

immediate- Filtering action will be initiated immediately on key press, for each character being typed in the filter bar.
onEnter – Filtering action will be initiated only on enter key press in the filter bar.

The below code snippet explains the above behavior,

JAVASCRIPT

<ej-treegrid id="TreeGridControl" [filterSettings]="filterSettings" [allowFiltering]="true"
    //...>
</ej-treegrid>

JAVASCRIPT

import {Component} from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    public filterSettings: any;

    constructor() {
        //...
        this.filterSettings = {
            filterType: ej.TreeGrid.FilterType.FilterBar
            filterBarMode: "onEnter"
        }
    }
}

The output of the filtering with filter bar enabled is as follows.

Menu filtering

Menu filtering can be enabled by setting filterSettings.filterType property as ej.TreeGrid.FilterType.Menu. The below code snippet explains how to enable menu filtering in TreeGrid

JAVASCRIPT

<ej-treegrid id="TreeGridControl" [filterSettings]="filterSettings" [allowFiltering]="true"
    //...>
</ej-treegrid>

JAVASCRIPT

import {Component} from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    public filterSettings: any;

    constructor() {
        //...
        this.filterSettings = {
            filterType: ej.TreeGrid.FilterType.Menu
        }
    }
}

The output of the filtering with filter menu enabled is as follows.

Filtering types

By default, the filtering type for a column is inherited from the columns.editType property. You can also define a specific filtering type for a column using columns.filterEditType property.
The below code snippet explains on how to set a filtering type for a column.

JAVASCRIPT

<ej-treegrid id="TreeGridControl" [columns]="columns" [allowFiltering]="true"
    //...>
</ej-treegrid>

JAVASCRIPT

import {Component} from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    public columns: any;

    constructor() {
        //...
        this.columns = [{
                field: "taskID",
                allowFiltering: false,
            },
            {
                field: "taskName",
                editType: "stringedit",
                filterEditType: "stringedit"
            },
            {
                field: "startDate",
                editType: "datepicker",
                filterEditType: "datepicker",
                format: dateFormat
            },
            {
                field: "priority",
                editType: ej.TreeGrid.EditingType.Dropdown,
                filterEditType: ej.TreeGrid.EditingType.Dropdown,
                dropdownData: stageData,
                editParams: {
                    fields: {
                        text: "text",
                        value: "value"
                    },
                    showCheckbox: false
                }
            },
            {
                field: "progress",
                editType: ej.TreeGrid.EditingType.Numeric,
                filterEditType: ej.TreeGrid.EditingType.Numeric
            }
        ],
    }
}

Filter columns at initial load

It is also possible to filter one or more columns at load time by providing the field and filter query values to the filterSettings.filteredColumns property. The following code example explains how to filter a column on initial load.

JAVASCRIPT

<ej-treegrid id="TreeGridControl" [filterSettings]="filterSettings" [allowFiltering]="true"
    //...>
</ej-treegrid>

JAVASCRIPT

import {Component} from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    public filterSettings: any;

    constructor() {
        //...
        this.filterSettings = {
            filteredColumns: [{
                value: "plan",
                field: "taskName",
                predicate: "and",
                operator: "startswith"
            }]
        }
    }
}

Disabling filtering for a specific column

It is possible to disable filtering for a specific column by setting columns.allowFiltering as false in the column definition.
The below code snippet explains the above behavior

JAVASCRIPT

<ej-treegrid id="TreeGridControl" [columns]="columns" [allowFiltering]="true"
    //...>
</ej-treegrid>

JAVASCRIPT

import {Component} from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    public columns: any;

    constructor() {
        //...
        this.columns = [{
            field: "taskID",
            allowFiltering: false,
        }, ]
    }
}

The output of the filtering enabled for only one column is as follows.

Click here to find the demo sample for filtering in TreeGrid

Filtering multiple columns dynamically

It is possible to filtering multiple columns dynamically by using the filterContent method.
The below code snippet explains how to filter multiple columns dynamically in TreeGrid.

HTML

<button id="filterContent" (click)="filterContent($event)">filterContent</button>
<ej-treegrid id="TreeGridControl">
 [filterSettings]= "filterSettings"
//...
</ej-treegrid>

TS

export class AppComponent {
    public filterSettings: any;
    constructor() {
        //...
        this.filterSettings = {
            filterType: ej.TreeGrid.FilterType.Menu,
        }
    }
    public filterContent(event) {
        var treeObj = $("#TreeGridControl").ejTreeGrid("instance");
        var predicate = ej.Predicate("taskName", ej.FilterOperators.startsWith, "Plan", true)
                        .or("taskName", ej.FilterOperators.equal, "Software Specification", true)
                        .and("progress", ej.FilterOperators.notEqual, 0, true);
        treeObj.filterContent(predicate);
    }
}

The below screenshot shows the output of above code example.