Cascading drop down list with treegrid editing in Angular Treegrid component

21 Sep 202210 minutes to read

You can achieve the Cascading DropDownList with Tree Grid Editing by using the Cell Edit Template feature.

In the below demo, Cascading DropDownList rendered for Priority and Duration column.

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { projectData } from './datasource';
import { TreeGridComponent, EditSettingsModel, ToolbarItems,  EditService, ToolbarService  } from '@syncfusion/ej2-angular-treegrid';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { IEditCell } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-container',
    providers: [EditService, ToolbarService],
    template: `<ejs-treegrid #treegridObj [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [editSettings]='editSettings' [toolbar]='toolbar' [height]='273'>
        <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="yMd" textAlign='Right' editType='datepickeredit'></e-column>
            <e-column field='EndDate' headerText='End Date' width='90' format="yMd" textAlign='Right'  editType='datepickeredit'></e-column>
            <e-column field='Priority' headerText='Priority' width='90' editType= 'dropdownedit' [edit]='priorityParams'></e-column>
            <e-column field='Duration' headerText='Duration' width='90' textAlign='Right' editType='dropdownedit' [edit]='durationParams'></e-column>
            <e-column field='Progress' headerText='Progress' width='90' textAlign='Right'></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public editSettings: EditSettingsModel;
    public toolbar: ToolbarItems[];
    public priorityParams : IEditCell;
    public durationParams : IEditCell;
    public priorityElem : HTMLElement;
    public priorityObj : DropDownList;

    public durationElem : HTMLElement;
    public durationObj : DropDownList;

    @ViewChild('treegridObj')
    public treegridObj: TreeGridComponent;

    public priorityData: { [key: string]: Object }[] = [
      { priorityName: 'Normal', priorityId: '1' },
      { priorityName: 'High', priorityId: '2' }
    ];
    public durationData : { [key: string]: Object }[] = [
            { durationValue: 2, priorityId: '1', durationId: 2 },
            { durationValue: 3, priorityId: '1', durationId: 3 },
            { durationValue: 4, priorityId: '1', durationId: 4 },
            { durationValue: 11, priorityId: '2', durationId: 11 },
            { durationValue: 15, priorityId: '2', durationId: 15 },
            { durationValue: 20, priorityId: '2', durationId: 20 }
    ];

    ngOnInit(): void {
        this.data = projectData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.priorityParams = {
            create:()=>{
            this.priorityElem = document.createElement('input');
                return this.priorityElem;
            },
            read:()=>{
                return this.priorityObj.text;
            },
            destroy:()=>{
                this.priorityObj.destroy();
            },
            write:()=>{
                this.priorityObj = new DropDownList({
                dataSource: new DataManager(this.priorityData),
                fields: { value: 'priorityId', text: 'priorityName' },
                change: () => {
                this.durationObj.enabled = true;
                let tempQuery: Query = new Query().where('priorityId', 'equal', this.priorityObj.value);
                this.durationObj.query = tempQuery;
                this.durationObj.text = null;
                this.durationObj.dataBind();
            },
            placeholder: 'Select a priority',
            floatLabelType: 'Never'
            });
            this.priorityObj.appendTo(this.priorityElem);
        }};
        this.durationParams = {
            create:()=>{
                this.durationElem = document.createElement('input');
                return this.durationElem;
            },
            read:()=>{
                return this.durationObj.text;
            },
            destroy:()=>{
                this.durationObj.destroy();
            },
            write:()=>{
                this.durationObj = new DropDownList({
                dataSource: new DataManager(this.durationData),
                fields: { value: 'durationId', text: 'durationValue' },
                enabled: false,
                placeholder: 'Select a duration',
                floatLabelType: 'Never'
            });
            this.durationObj.appendTo(this.durationElem);
        }}
    }

app.module.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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

You can refer to our Angular Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our Angular Tree Grid example to knows how to present and manipulate data.