Add parameter for filtering in Angular TreeGrid component

25 Aug 20253 minutes to read

You can customize the default settings of components used in the Menu filter by configuring the params property within the column definition’s filter settings.

In the following example, the TaskID and Duration columns are numeric columns. When opening the filter dialog, a NumericTextBox with spin buttons is displayed to adjust the filter value. By utilizing the params option, the spin button in the NumericTextBox for the TaskID column is hidden.

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit, ViewChild } from '@angular/core';
import { projectData } from './datasource';
import { TreeGridComponent, FilterService, FilterSettingsModel  } from '@syncfusion/ej2-angular-treegrid';
import { IFilter } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    providers: [ FilterService ],
    template: `<ejs-treegrid #treegridObj [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [height]='273' [allowFiltering]='true' [filterSettings]='filterOption'>
        <e-columns>
            <e-column field='TaskID' headerText='Task ID' width='70' textAlign='Right' [filter]='filterParams'></e-column>
            <e-column field='TaskName' headerText='Task Name' width='100' ></e-column>
            <e-column field='StartDate' headerText='Start Date' textAlign='Right' [format]='formatOptions'  width='100' ></e-column>
            <e-column field='EndDate' headerText='End Date' textAlign='Right' [format]='formatOptions' width='100'></e-column>
            <e-column field='Duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column field='Priority' headerText='Priority' width='90'></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public formatOptions?: Object;
    public filterParams?: IFilter;
    public filterOption?: FilterSettingsModel;

    ngOnInit(): void {
        this.data = projectData;
        this.formatOptions = { format: 'y/M/d', type: 'date' };
        this.filterOption = { type: 'Menu'};
        this.filterParams = { params: { showSpinButton: false } };
    }


}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Refer to the Angular TreeGrid feature tour page for more information about available features. You can also view the Angular TreeGrid example to learn how to present and manipulate data.