Hi Ricardo ,
Greeting from
Syncfusion support.
Query #:- How to change dynamically Edit Type of Column
on change DropDown?
It is not feasible to change the editType of the column when
we change the value in another column after the component was rendered.
However, we can change render different custom controls without directly
changing the editType with CellEditTemplate feature of the TreeGrid.
Using this Cell EditTemplate we have placed the AutoComplete and based on
condition we have change it into dropdown dynamically. Likewise you can place
NumericTextbox or all other required components as per your convenience.
app.component.html
|
<ejs-treegrid>
<e-columns>
. . .
<e-column field='taskName' headerText='Task Name' width='200' [validationRules]='tasknamerules' [edit]='dpParams' ></e-column>
. . .
</e-columns>
</ejs-treegrid>
|
app.component.ts
|
export class AppComponent {
. . .
public dpParams: Object;
public autoCompleteObj: AutoComplete;
@ViewChild('treegrid')
public treegrid: TreeGridComponent;
ngOnInit(): void {
. . .
this.dpParams = {
create: () => {
let elem: HTMLInputElement = document.createElement('input');
elem.id = 'taskname';
return elem;
},
read: () => {
return this.autoCompleteObj.value;
},
destroy: () => {
this.autoCompleteObj.destroy();
},
write: (args: { rowData: Object, column: Column, element: HTMLElement }) => {
this.autoCompleteObj = new AutoComplete({
dataSource: <{key: string, value: any}[]>this.treegrid.grid.dataSource,
fields: { value: 'taskName' },
value: args.rowData[args.column.field]
});
this.autoCompleteObj.appendTo(args.element);
}
};
}
}
|
Please refer to the demo :- https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/edittemplate
Kindly get back to us for further assistance.
Regards,
Shek Mohammed Asiq
