Syncfusion Data Grid - col.edit.create is not a function

[dnohashi]

I am attempting to follow https://ej2.syncfusion.com/react/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/ to customize the data source for an edit cell's dropdown options.

However, when I provide an edit object with just a params property, exactly in the way defined in that documentation, I experience the following error: "col.edit.create is not a function"

Thoughts on how to resolve this? Is the documentation accurate?

[praveenkumargspr]

Hi Dean Ohashi, Greetings from Syncfusion support.

Query: “However, when I provide an edit object with just a params property, exactly in the way defined in that documentation, I experience the following error: "col.edit.create is not a function"”

We checked your query, based on that we have prepared a Grid sample to provide custom data source and enabling filtering to editor DropDownList component and check your reported issue, but we are not able to reproduce your reported problem at our end. Please check the below sample and screenshot for your reference.

Sample: https://stackblitz.com/edit/react-kk2ag7?file=index.js Based on your query, we suspect that you want to customize the complete editor DropDownList component, for this we suggested you use cellEditTemplate feature of Grid to achieve your requirement. The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, destroy functions. • create function is used to create the element at time of initialization. • write function is used to create custom component or assign default value at time of editing. • read function is used to read the value from component at time of save. • destroy function is used to destroy the component

By using this feature, we can render the DropDownList component to edit the field. The create, write, read and destroy functions will be triggered for each time When you editing a row.

Please refer the below documentation for more information on cellEditTemplate feature of Grid. Documentation: https://ej2.syncfusion.com/react/documentation/grid/edit/#cell-edit-template

We have a sample based on this for your reference, please check the below sample and code example for more information. Sample: https://stackblitz.com/edit/react-kk2ag7-64i12t?file=index.js

Code Example:

export class NormalEdit extends SampleBase { constructor() { super(...arguments); this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; .... this.template = this.dropdownTemp; //cellEditTemplate } dropdownTemp = { create: () => { //create function is used to create the element at time of initialization this.elem = document.createElement('input'); return this.elem; }, destroy: () => { //destroy function is used to destroy the component. this.dropdownObjr.destroy(); }, read: () => { //read function is used to read the value from component at time of save. return this.dropdownObjr.value; }, write: args => { // write function is used to create custom component or assign default value at time of editing. this.dropdownObjr = new DropDownList({ //Custom DropDownList component dataSource: new DataUtil.distinct(orderDataSource, 'ShipCountry', true), fields: { value: 'ShipCountry' }, value: args.rowData[args.column.field], actionComplete: () => false, allowFiltering: true, popupHeight: '300px' }); this.dropdownObjr.appendTo(this.elem); } }; render() { return (

(this.gridInstance = grid)} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings} > …..

);

} }

Please get back to us if you need further assistance.

Regards, Praveenkumar G

[winniexueyao]

I have the same problem and the previous answer didn't help