Hi Pradeep,
Greetings from Syncfusion
support.
Based on your requirement, you need to render dropdown
control to edit a column in the Grid and want to change the dataSource
dynamically based on the rowData. You can achieve your requirement by using cellEditTemplate
feature.
The cell edit template is used to add a custom component
for a particular column by invoking the create, write, read, destroy functions.
Refer to the below documentation for more information.
cellEditTemplate:
this.editparams = {
create: () => {
this.elem = document.createElement('input');
return this.elem;
},
read: () => {
return this.dropDown.value;
},
destroy: () => {
this.dropDown.destroy();
},
write: (args: { rowData; column }) => {
this.dropDown = new DropDownList({
value: args.rowData[args.column.field],
dataSource:
args.rowData['OrderID'] % 2 == 0
? this.dropdownData1
: this.dropdownData2,
});
this.dropDown.appendTo(this.elem);
},
};
|
In the write function, you can get the current row-data
and column details from its event argument. Based on the rowData you can bind
different dataSource to the dropdown control. Refer to the below code example
for more information.
Sample: https://stackblitz.com/edit/angular-wcmnso-ybeu11?file=app.component.ts
Note: The dropdown displays the current
cell value only when the value is available in its dataSource.
Dropdown doc:
https://ej2.syncfusion.com/angular/documentation/drop-down-list/
https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/
Please get back to us if you need further assistance.
Regards,
Rajapandiyan S