Hi Quang,
Thanks for contacting syncfusion forum.
Query: Now i need to enable virtualization but if i
enable it my treegrid has an error of dropdownlist.
We are able to
replicate the issue at our end in shared sample. To avoid this issue, we
suggest you follow the edit template feature of the treegrid.
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 time of initialization.
- write - It is used to create custom
component or assign default value at time of editing.
- read - It is used to read the
value from component at time of save.
- destroy - It is used to destroy the
component.
Refer the below code example,
|
clicked(): void {
let elem: HTMLElement;
let autoCompleteObj: DropDownList;
let columnName = {
field: 'newCol',
width: 100,
editType: 'dropdownedit',
defaultValue: 'Default',
edit: {
create: () => {
elem = document.createElement('input');
return elem;
},
read: () => {
return autoCompleteObj.value;
},
destroy: () => {
autoCompleteObj.destroy();
},
write: (args: { rowData: Object; column }) => {
autoCompleteObj = new DropDownList({
dataSource: [
{ text: 'Test' },
{ text: 'Start' },
{ text: 'End' },
{ text: 'Default' },
],
fields: { text: 'text', value: 'text' },
value: args.rowData[args.column.field],
});
autoCompleteObj.appendTo(elem);
},
},
};
|
Refer the below modified sample:
https://stackblitz.com/edit/angular-mqa5hw-tycbwq?file=app.component.ts
Refer
the below API link:
https://ej2.syncfusion.com/documentation/api/treegrid/column/#edit
Please
refer to the below documentation link,
https://ej2.syncfusion.com/angular/documentation/treegrid/edit/#cell-edit-template
Please
refer to the below demo link for edit template,
https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/edittemplate
Please get back to us if you need more assistance.
Regards,
Pon selva
If this post is helpful, please consider
Accepting it as the solution so that other members can locate it more quickly.
