Edit types in Angular Treegrid component

27 Sep 202324 minutes to read

Cell edit type and its params

The columns.editType is used to customize the edit type of the particular column.
You can set the columns.editType based on data type of the column.

numericedit - NumericTextBox component for integers, double, and decimal data types.
defaultedit - TextBox component for string data type.
dropdownedit - DropDownList component for list data type.
booleanedit - CheckBox component for boolean data type.
datepickeredit - DatePicker component for date data type.
datetimepickeredit - DateTimePicker component for date time data type.

Also, you can customize model of the columns.editType component through the columns.edit.params.

The following table describes cell edit type component and their corresponding edit params of the column.

Component	Example
`NumericTextBox`	params: { decimals: 2, value: 5 }
`TextBox`	-
`DropDownList`	params: { value: ‘Germany’ }
`Checkbox`	params: { checked: true}
`DatePicker`	params: { format:’dd.MM.yyyy’ }
`DateTimePicker`	params: { value: new Date() }

app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data'  [toolbar]='toolbarOptions' [treeColumnIndex]='1' height='270' [editSettings]='editSettings' childMapping='subtasks' >
        <e-columns>
                    <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                    <e-column field='taskName' headerText='Task Name' editType='stringedit' textAlign='Left' width=180></e-column>
                    <e-column field='approved' headerText='Approved' editType='booleanedit' type='boolean' textAlign='Right' [displayAsCheckBox]='true' width=110></e-column>
                    <e-column field='priority' headerText='Priority' editType='dropdownedit' textAlign='Right' width=110></e-column>
                    <e-column field='startDate' headerText='Start Date' textAlign='Right' [format]='formatOptions' editType='datetimepickeredit' [edit]='editOptions' width=180></e-column>
                    <e-column field='progress' headerText='Progress' textAlign='Right' editType='numericedit' width=120 [edit]='editing'></e-column>
        </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public editSettings?: EditSettingsModel;
    public toolbarOptions?: ToolbarItems[];
    public editing?: Object;
    public formatOptions?: Object;
    public editOptions?: Object;
    ngOnInit(): void {
        this.data = sampleData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.editing = { params: { format: 'n' } };
        this.formatOptions = { format: 'M/d/y hh:mm a', type: 'dateTime' };
        this.editOptions = { params: { format: 'M/d/y hh:mm a' } };
    }
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService,EditService,ToolbarService } 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,
                EditService,
                ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

If the edit type is not defined in the column, then it will be considered as the stringedit type (Textbox component).

Restrict to type decimal points in a NumericTextBox while editing the numeric column

By default, the number of decimal places will be restricted to two in the NumericTextBox while editing the numeric column. Restrict to type the decimal points in a NumericTextBox by using the validateDecimalOnType and decimals properties of NumericTextBox.

In the following demo, while editing the row, the decimal point values have been restricted to type in the NumericTextBox of the progress column.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';
import { IEditCell } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' [toolbar]='toolbarOptions' [treeColumnIndex]='1' height='270' [editSettings]='editSettings' childMapping='subtasks'>
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                        <e-column field='priority' headerText='Priority' textAlign='Right' width=110></e-column>
                        <e-column field='progress' editType= 'numericedit' [edit]='numericParams' headerText='Progress' textAlign='Right' width=120></e-column>
                    </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbarOptions?: ToolbarItems[];
    public numericParams?: IEditCell;
    ngOnInit(): void {
        this.data = sampleData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.numericParams = { params: {
            validateDecimalOnType: true,
            decimals: 0,
            format: 'N' }
        };
    }
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService,EditService,ToolbarService } 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,
                EditService,
                ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Provide custom data source and enabling filtering to DropDownList

Provide the data source to the DropDownList by using the columns.edit.params property.

While setting a new data source using the edit params, you must specify a new query property too for the DropDownList as follows:

{
    this.priorityParams = {
            params: {
                allowFiltering: true,
                dataSource: new DataManager(this.prior),
                fields: { text: 'priorityType', value: 'priorityType' },
                query: new Query(),
                actionComplete: () => false
            }
        };
}

Enable filtering for the DropDownList by passing the allowFiltering as true to the edit params.

In the following demo, the DropDownList is rendered with the custom Datasource for the priority column and filtering is enabled to search the DropDownList items:

app.component.ts
app.module.ts
main.ts
import { Component, OnInit } from '@angular/core';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Query, DataManager } from '@syncfusion/ej2-data';
import { sampleData } from './datasource';
import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';
import { IEditCell } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' [toolbar]='toolbar' [treeColumnIndex]='1' height='270' [editSettings]='editSettings' childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=180></e-column>
                        <e-column field='priority' headerText='Priority' editType= 'dropdownedit'
                        [edit]='priorityParams' textAlign='Right' width=140></e-column>
                        <e-column field='progress' editType= 'numericedit' headerText='Progress' textAlign='Right' width=120></e-column>
                    </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public priorityParams?: IEditCell;

    public prior: object[] = [
        { priorityType: 'Normal', Id: '1' },
        { priorityType: 'Critical', Id: '2' },
        { priorityType: 'High', Id: '3' },
        { priorityType: 'Low', Id: '4' }
    ];

    ngOnInit(): void {
        this.data = sampleData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.priorityParams = {
            params: {
                allowFiltering: true,
                dataSource: new DataManager(this.prior),
                fields: { text: 'priorityType', value: 'priorityType' },
                query: new Query(),
                actionComplete: () => false
            }
        };
    }

}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService, EditService } 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,
                EditService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Cell edit template

The cell edit template is used to add a custom component for a particular column by invoking the following functions:

create - It is used to create the element at the time of initialization.
write - It is used to create the custom component or assign default value at the time of editing.
read - It is used to read the value from the component at the time of save.
destroy - It is used to destroy the component.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { Column, EditSettingsModel, ToolbarItems, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' [toolbar]='toolbarOptions' [treeColumnIndex]='1' height='250' [editSettings]='editSettings' childMapping='subtasks' >
        <e-columns>
                    <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                    <e-column field='taskName' headerText='Task Name' editType='stringedit' [edit]='editOptions' textAlign='Left' width=180></e-column>
                    <e-column field='startDate' headerText='Start Date' textAlign='Right'type='date'format='yMd'editType='datepickeredit' width=180></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
        </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public editSettings?: EditSettingsModel;
    public editOptions?: Object;
    public elem?: HTMLElement;
    public autoCompleteObj?: AutoComplete;
    @ViewChild('treegrid')
    public treeGridObj?: TreeGridComponent;
    public toolbarOptions?: ToolbarItems[];

    ngOnInit(): void {
        this.data = sampleData;
        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Below', mode: 'Cell' };
        this.editOptions = {
                create: () => {
                    this.elem = document.createElement('input');
                    return this.elem;
                },
                read: () => {
                    return (this.autoCompleteObj as AutoComplete).value;
                },
                destroy: () => {
                    (this.autoCompleteObj as AutoComplete).destroy();
                },
                write: (args: { rowData: Object, column: Column } | any) => {
                    this.autoCompleteObj = new AutoComplete({
                        dataSource: <{key: string, value: any}[]>(this.treeGridObj as TreeGridComponent).grid.dataSource,
                        fields: { value: 'taskName' },
                        value: args.rowData[args.column.field]
                    });
                    this.autoCompleteObj.appendTo(this.elem);
                }
            };
    }
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService,EditService,ToolbarService } 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,
                EditService,
                ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Render TimePicker component while editing

Use the cell edit template feature of the tree grid to render the TimePicker component in the tree grid edit form. In the following sample, the TimePicker component is rendered in the startDate column.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { Column, EditSettingsModel, ToolbarItems, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { TimePicker } from '@syncfusion/ej2-calendars';

@Component({
  selector: 'app-container',
  template: `<ejs-treegrid #treegrid [dataSource]='data' [toolbar]='toolbarOptions' [treeColumnIndex]='1' height='250' [editSettings]='editSettings' childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right' type='date' format="hh:mm" [edit]="editOptions" width=180></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {
  public data?: Object[];
  public editSettings?: EditSettingsModel;
  public editOptions?: Object;
  public elem?: HTMLElement;
  public timeObject?: TimePicker;
  @ViewChild('treegrid')
  public treeGridObj?: TreeGridComponent;
  public toolbarOptions?: ToolbarItems[];

  ngOnInit(): void {
    this.data = sampleData;
    this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    this.editSettings = {
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
      newRowPosition: 'Below',
      mode: 'Cell',
    };
    this.editOptions = {
      create: () => {
        this.elem = document.createElement('input');
        return this.elem;
      },
      read: () => {
        return (this.timeObject as TimePicker).value;
      },
      destroy: () => {
        (this.timeObject as TimePicker).destroy();
      },
      write: (args: { rowData: Object; column: Column } | any) => {
        this.timeObject = new TimePicker({
          value: args.rowData[args.column.field],
          step: 60,
        });
        this.timeObject.appendTo(this.elem);
      },
    };
  }
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService,EditService,ToolbarService } 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,
                EditService,
                ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Use the cell edit template feature of the tree grid to render the MultiSelect DropDown component in the tree grid edit form.

In the following sample, the MultiSelect DropDown component is rendered in the priority column:

app.component.ts
app.module.ts
main.ts
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { MultiSelect } from '@syncfusion/ej2-dropdowns';
import { TreeGridComponent, Column, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';
import { IEditCell } from '@syncfusion/ej2-grids';

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' [toolbar]='toolbarOptions' [treeColumnIndex]='1' height='250' [editSettings]='editSettings' childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                        <e-column field='priority' headerText='Priority' [edit]="editOptions" textAlign='Right' width=130></e-column>
                    </e-columns>
                </ejs-treegrid>`
})

export class AppComponent implements OnInit {
    public data?: Object[];
    public editSettings?: EditSettingsModel;
    public editOptions?: IEditCell;
    public elem?: HTMLElement;
    public toolbarOptions?: ToolbarItems[];
    public multiSelectObj?: MultiSelect;
    public multiselectDatasource = [
        { priority: 'Low', Id: '1' },
        { priority: 'High', Id: '2' },
        { priority: 'Critical', Id: '3' },
        { priority: 'Normal', Id: '4' }
    ];
    @ViewChild('treegrid')
    public treeGridObj?: TreeGridComponent;

    ngOnInit(): void {
        this.data = sampleData;
        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.editSettings = {
            allowEditing: true,
            allowAdding: true,
            allowDeleting: true,
            newRowPosition: 'Below',
            mode: 'Cell',
        };
        this.editOptions = {
            create: () => {
                this.elem = document.createElement('input');
                return this.elem;
            },
            read: () => {
                return (this.multiSelectObj as MultiSelect).value.join(',');
            },
            destroy: () => {
                (this.multiSelectObj as MultiSelect).destroy();
            },
            write: (args: { rowData: Object; column: Column } | any) => {
                let multiSelectVal = args.rowData[args.column.field]
                ? args.rowData[args.column.field].split(',')
                : [];
                this.multiSelectObj = new MultiSelect({
                value: multiSelectVal,
                dataSource: this.multiselectDatasource,
                fields: { value: 'priority', text: 'priority' },
                floatLabelType: 'Never',
                mode: 'Box'
                });
                this.multiSelectObj.appendTo(this.elem);
            }
        }
    }
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService,EditService,ToolbarService } 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,
                EditService,
                ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Render RichTextEditor component while editing

Use the cell edit template feature of the tree grid to render the RichTextEditor component in the tree grid edit form. In the following sample, the RichTextEditor component is rendered in the taskName column, so the allowTextWrap property is used as true.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { TextBox } from '@syncfusion/ej2-inputs';
import { sampleData } from './datasource';
import { TreeGridComponent, Column, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' [toolbar]='toolbarOptions' [treeColumnIndex]='1' height='250' [editSettings]='editSettings' childMapping='subtasks' (created)="created($event)">
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                        <e-column field='taskName'  [valueAccessor]= 'valueAccessor' [edit]="editOptions" headerText='Task Name' textAlign='Left' width=180></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right'type='date'format='yMd'editType='datepickeredit' width=180></e-column>
                        <e-column field='priority' headerText='Priority' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-treegrid>`
})

export class AppComponent implements OnInit {
    public data?: Object[];
    public editSettings?: EditSettingsModel;
    public editOptions?: Object;
    public toolbarOptions?: ToolbarItems[];
    public elem?: HTMLElement;
    public textEditor?: TextBox;
    @ViewChild('treegrid')
    public treeGridObj?: TreeGridComponent;
    treegrid: any;

    ngOnInit(): void {
        this.data = sampleData;
        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.editSettings = {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
        newRowPosition: 'Below',
        mode: 'Cell',
        };
        this.editOptions = {
        create: () => {
            this.elem = document.createElement('textarea');
            return this.elem;
        },
        read: () => {
            return (this.textEditor as TextBox).value;
        },
        destroy: () => {
            (this.textEditor as TextBox).destroy();
        },
        write: (args: { rowData: Object; column: Column } | any) => {
            this.textEditor = new TextBox({
            multiline: true,
            value: args.rowData[args.column.field],
            floatLabelType: 'Auto'
            });
            this.textEditor.appendTo(this.elem);
            }
        }
    }
    created (args: any) {
        this.treegrid.keyConfigs.enter = '';
    };
    public valueAccessor (field: string | any, sdata: object | any, column: object): string {
        var value = sdata[field]; 
        if (value != undefined) {
            return value.split('\n').join('<br>');
        }
        else {
            return '';
        }
    };
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService,EditService,ToolbarService } 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,
                EditService,
                ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);