Provide custom data source and enable filtering for DropDownList in Angular TreeGrid component

27 Aug 20256 minutes to read

A custom data source can be provided to the DropDownList by using the params property within columns.edit settings.

When specifying a new data source in the edit params, a new query property must be defined for the DropDownList as shown below:

  public priorityParams : IEditCell = {
    params:   {
      actionComplete: () => false,
      allowFiltering: true,
      dataSource: new DataManager(this.priorityData),
      fields: { text: "countryName", value: "countryName"},
      query: new Query()
    }
  };

Filtering can be enabled for the DropDownList by setting the allowFiltering property to true in the edit params.

The following demo demonstrates rendering the DropDownList with a custom dataSource for the Priority column, with filtering enabled to allow searching DropDownList items.

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, EditService, ToolbarService, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Query, DataManager } from '@syncfusion/ej2-data';
import { IEditCell } from '@syncfusion/ej2-angular-grids';

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

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    providers: [EditService, ToolbarService],
    template: `<ejs-treegrid #treegrid [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [height]='265' [editSettings]='editSettings' (queryCellInfo)='tooltip($event)' >
        <e-columns>
            <e-column field='TaskID' headerText='Task ID' isPrimaryKey='true'  width='70' textAlign='Right'></e-column>
            <e-column field='TaskName' headerText='Task Name' width='100' ></e-column>
            <e-column field='StartDate' headerText='Start Date' width='100' [format]='formatOptions' editType= 'datepickeredit' textAlign='Right'></e-column>
            <e-column field='EndDate'  headerText='End Date' width='100' [format]='formatOptions' editType= 'datepickeredit' textAlign='Right'></e-column>
            <e-column field='Duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column field='Priority' headerText='Priority' width='90' editType= 'dropdownedit'
                     [edit]='priorityParams'></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {
tooltip($event: any) {
throw new Error('Method not implemented.');
}

    public data: Object[] = [];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public editOptions?: Object;
    public formatOptions?: Object;
    public priorityParams?: IEditCell;

    public priorityData : object[] = [
        { priorityName: 'Normal', priorityId: '1' },
        { priorityName: 'High', priorityId: '2' },
        { priorityName: 'Low', priorityId: '3' },
        { priorityName: 'Critical', priorityId: '4' },
        { priorityName: 'Breaker', priorityId: '5' }
    ];

    ngOnInit(): void {
        this.data = projectData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
        this.toolbar = ['Add', 'Edit', 'Delete'];
        this.editOptions = { params: { format: 'y/M/d' } };
        this.formatOptions = { format: 'y/M/d', type: 'date' };
        this.priorityParams = {
            params: {
                actionComplete: () => false,
                allowFiltering: true,
                dataSource: new DataManager(this.priorityData),
                fields: { text: 'priorityName', value: 'priorityName' },
                query: new Query()
            }
        };
    }
}

main.ts

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

For more guidance on feature capabilities, visit the Angular TreeGrid feature tour page. Additional examples for organizing and editing data can be found in the Angular TreeGrid example.