We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to change dynamically Edit Type of Column on change DropDown


It's possible change the edit type of the input "Valor" dynamically when fire the event change of the Dropdown "Tipo"?

For example on change to "Numero" the input "Valor" becomes Numeric

I'm using a Dialog setting to Add,Edit and Delete Data from TreeGrid


Best Regards


1 Reply

SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team March 20, 2023 02:55 PM UTC

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.




                   . . .

                   <e-column field='taskName' headerText='Task Name' width='200' [validationRules]='tasknamerules' [edit]='dpParams' ></e-column>

                   . . .





export class AppComponent {

    . . .

    public dpParamsObject;

    public autoCompleteObjAutoComplete;


     public treegridTreeGridComponent;

    ngOnInit(): void {

        . . .

        this.dpParams = {

            create: () => {

                let elemHTMLInputElement = document.createElement('input');

                elem.id = 'taskname';

                return elem;


            read: () => {

                return this.autoCompleteObj.value;


            destroy: () => {



            write: (args: { rowDataObjectcolumnColumnelementHTMLElement }) => {

                this.autoCompleteObj = new AutoComplete({

                    dataSource: <{keystringvalueany}[]>this.treegrid.grid.dataSource,

                    fields: { value: 'taskName' },

                    value: args.rowData[args.column.field]








Please refer to the demo :- https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/edittemplate

Kindly get back to us for further assistance.


Shek Mohammed Asiq

Live Chat Icon For mobile
Up arrow icon