Edit types in Angular Treegrid component
17 Nov 202224 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() } |
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';
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.
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { EditSettingsModel, ToolbarItems, IEditCell } 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' 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';
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:
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, IEditCell } from '@syncfusion/ej2-angular-treegrid';
@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';
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.
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { 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='315' [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.value;
},
destroy: () => {
this.autoCompleteObj.destroy();
},
write: (args: { rowData: Object, column: Column }) => {
this.autoCompleteObj = new AutoComplete({
dataSource: <{key: string, value: any}[]>this.treeGridObj.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';
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.
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { 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='315' [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.value;
},
destroy: () => {
this.timeObject.destroy();
},
write: (args: { rowData: Object; column: Column }) => {
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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Render MultiSelect DropDown component while editing
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:
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';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' [toolbar]='toolbarOptions' [treeColumnIndex]='1' height='315' [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.value.join(',');
},
destroy: () => {
this.multiSelectObj.destroy();
},
write: (args: { rowData: Object; column: Column }) => {
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';
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.
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='315' [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;
@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('textarea');
return this.elem;
},
read: () => {
return this.textEditor.value;
},
destroy: () => {
this.textEditor.destroy();
},
write: (args: { rowData: Object; column: Column }) => {
this.textEditor = new TextBox({
multiline: true,
value: args.rowData[args.column.field],
floatLabelType: 'Auto'
});
this.textEditor.appendTo(this.elem);
};
}
public valueAccessor = (field: string, sdata: object, column: object) => {
var value = sdata[field];
if (value != undefined) {
return value.split('\n').join('<br>');
}
else {
return '';
}
};
created = (args) => {
this.treegrid.keyConfigs.enter = '';
};
}
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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);