Change Edit Template dynamically based on Dropdown Column value

Question

Hello Syncfusion Team,

I am developing a Syncfusion Grid which should contain a dropdown edit column and based on the chosen value in this column another column should adapt its edit template.

So, basically I am trying to get a dynamically changable edit template column based on a dropdown value.

I tried to work with IEditCell and adapt some parameters, but that seems like a dead end (and I only want to adapt the template to the one cell that should be edited - not the whole column.

Is there a way to add such a feature?
I prepared a basic stackblitz with a two column grid. Column A is a dropdown column and here you can choose between "TextBox", "NumericTextBox", "DatePicker" "ColorPicker", ... Column B should adapt its template based on the dropdown value - so if ColorPicker is chosen, there should be a ColorPicker edit in Column B. So, optimally it should react to the change event of the dropdown edit. But I cannot seem to figure out a good solution here.

https://stackblitz.com/edit/syncfusion-angular-editable-grid-uh2eir?file=app.component.ts

Thanks in regard,

Jonas!

Dineshnarasimman Muthu · Answer

Hi Jonas,Greetings from Syncfusion Support.We have reviewed your requirement about dynamically
rendering components in the grid edit state based on the dropdownedit value of
another column. We can render other
components in a column in edit state using cellEditTemplate. In inline edit,
all the cells in the row undergoes to edit state. The write function in
the cellEditTemplate will be triggered when the cell undergoes edit state. By
default in inline editing, the component will be rendered when the edit begins.
To achieve this requirement we suggest to use endEdit method in the
change event of the dropdownlist and with time delay begin the edit using startEdit
method. The code snippet of the implementation and sample have been attached
for your reference.

write: (args) => {
          this.componentObject = new DropDownList({
            dataSource: this.dropData,
            value: args.rowData.Component,
            fields: { value: 'componentText', text: 'componentText' },
            change: (args) => {
              this.grid.endEdit();  // end edit
  
              this.grid.showSpinner();
              setTimeout(() => {
                this.grid.startEdit(); // in the time
  delay start edit
                this.grid.hideSpinner();
              }, 100);
            },
            placeholder: 'Select a Component',
            floatLabelType: 'Never',
          });
          this.componentObject.appendTo(this.inputElement);
        },

Sample: https://stackblitz.com/edit/angular-wff4d3-tp5aej?file=src%2Fapp.component.tsPlease let us know if you need any further assistance.Regards,Dineshnarasimman M