Error when adding new row to ejs-grid | Angular

[Ervin van der Merwe]

My grid makes use of numericedit, dropdownedit, and datetimepickeredit controls. When I click the 'Add' button for a new row, I get the following error:

"col.edit.create is not a function at EditRender.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/edit-renderer.js.EditRender.getEditElements"

The error only occurs seldom on development mode, but shows permanently on a live server.

Could you please advise?

Syncfusion version: ^17.4.49

[Magesh Sabapathi]

Hi Ervin, 

Greetings from syncfusion support 

Query : Script error thrown in development mode. 

 

Based on your update we checked in our sample with numericedit, dropdownedit, and datetimepickeredit controls but we did not face any issue in our sample.  

For your convenience we have attached the sample and please download the sample from the following link 

Sample:  

To find out root cause of the issue, we need the following details 

1. Share the complete Grid code example. 

2. Share the Angular version. (Angular 8 or Angular 9). 

3. Have you used editTemplate feature in EJ2 Grid? If yes, please share the code example. 

4. Have you used editParams in any of numericedit, dropdownedit, and datetimepickeredit controls? 

Please get back to us with the following details it will help us to find out root cause of the issue. 

Regards 

Magesh

[Ervin van der Merwe]

Hi and thanks for the reply.

1. Please see attached 
2. Angular 8.2.9
3. I have not used editTemplate
4. I have used edit Params

Thanks

Attachment: Synfusion_Error_4b7bb34d.rar

[Ervin van der Merwe]

I am unable to view your download link.

[Magesh Sabapathi]

Hi Ervin, 

We checked the attached files and found that you are using edit params in your sample. We checked the reported query in our sample by adding edit params for some columns, but we could not reproduce the issue at our end.  

For your convenience we have attached the sample. Kindly refer that.  

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular_8-1923387289 

Note : If possible, try to reproduce the issue in our sample and revert us back. 

Please get back to us if you need further assistance 

Regards 

Magesh

[Jonas Hjalland]

Hello! I have this exact issue, but in my React application. Did you find any solutions to this?

Best regards,

Jonas

[Rajapandi Ravi]

Hi Jonas, 

Based on your query we have prepared a sample with your shared Json data and tried to reproduce your reported problem. But its working fine from our end. Please refer the below code example and sample for more information. 

App.tsx 

export default class App extends React.Component<{}, {}>{ 

     

    public pageSettings: PageSettingsModel = { pageSize: 4 }; 

    public editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true }; 

    public settings: any = { persistSelection: true }; 

    public toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

    public numericParams: IEditCell = { params: { decimals: 2 } }; 

    public ddParams: IEditCell = { params: { value: 'Germany' } }; 

    public elem : HTMLElement; 

  public datePickerObj: DatePicker; 

  public datepickerTemp : IEditCell = { 

    create:()=>{ 

        this.elem = document.createElement('input'); 

        return this.elem; 

    }, 

    destroy:()=>{ 

        this.datePickerObj.destroy(); 

    }, 

    read:()=>{ 

        return this.datePickerObj.value; 

    }, 

    write:(args:{rowData: any, column: any})=>{ 

        this.datePickerObj = new DatePicker({ 

          floatLabelType: 'Never', 

          value: new Date(args.rowData[args.column.field]) 

        }); 

      this.datePickerObj.appendTo(this.elem); 

    } 

  }; 

    constructor(props) { 

        super(props); 

        // Bind functions 

        // this.editTemplate = this.editTemplate.bind(this); 

    } 

    public render() { 

        return(<div> 

            <GridComponent id="Gridone" dataSource={data} allowSelection={true} allowPaging={true} 

            allowSorting={true} toolbar={this.toolbarOptions} allowFiltering={true} filterSettings={{ type: "Excel" }} editSettings={this.editOptions}> 

                <ColumnsDirective> 

                <ColumnDirective field='OrderID' isPrimaryKey={true} width='100'/> 

                <ColumnDirective field='CustomerID' width='100'/> 

                <ColumnDirective field='Freight' editType= 'numericedit' edit={this.numericParams} width='100'/> 

                <ColumnDirective field='ShipCity' width='100'/> 

                <ColumnDirective field='ShipCountry' editType= 'dropdownedit' edit={this.ddParams} width='100'/> 

                <ColumnDirective field='OrderDate' headerText='Order Date' type= 'date' format= 'yMd' edit={this.datepickerTemp}  width='150'/> 

                <ColumnDirective field='ShipRegion' width='100'/> 

                </ColumnsDirective> 

                <Inject services={[Edit, Toolbar, Selection, Filter, Sort]} /> 

            </GridComponent> 

            </div>) 

    } 

}; 

Sample: https://www.syncfusion.com/downloads/support/forum/152638/ze/152638-2071955266.zip 

If you still face the issue, Please share the below details that would be helpful for us to provide a better solution. 

1)     Please share the complete Grid rendering code. 

2)     Please share the issue scenario in video demonstration format. 

3)     Please confirm your syncfusion package version. 

3)     Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards, 

Rajapandi R 

[Brandon M]

Hi Ervin, 

Greetings from syncfusion support 

Query : Script error thrown in development mode. 

 

Based on your update we checked in our sample with numericedit, dropdownedit, and datetimepickeredit controls but we did not face any issue in our sample.  

For your convenience we have attached the sample and please download the sample from the following link 

Sample:  

To find out root cause of the issue, we need the following details 

1. Share the complete Grid code example. 

2. Share the Angular version. (Angular 8 or Angular 9). 

3. Have you used editTemplate feature in EJ2 Grid? If yes, please share the code example. 

4. Have you used editParams in any of numericedit, dropdownedit, and datetimepickeredit controls? 

Please get back to us with the following details it will help us to find out root cause of the issue. 

Regards 

Magesh

I am running into this same issue. 

1) https://gist.githubusercontent.com/Bitz/59fc138fe3a2d69ca63b65db8d9b5b7a/raw/ef477e87749ca8cc8abffaa2804481f2033be2cb/gistfile1.txt

2) Angular 11

3) No I am not

4) Dropdownedit

[Rajapandi Ravi]

Hi Brandon, 

Thanks for the update 

Based on your provided information, we have prepared a sample with Angular 11 and try to reproduce your reported problem. But it’s working fine from our end. Please refer the below code example and sample for more information.  

 

ngOnInit(): void { 

        this.data = data.slice(0,5); 

        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 

        this.dpParams = { params: { query: new Query(), actionComplete: () => false, 

            allowFiltering: true, fields: { text: 'ShipCountry', value: 'Id' }, dataSource: this.dropdownData} }; 

        this.initialPage = { pageSizes: true, pageCount: 4 }; 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/forum/152638/ze/152638-1562794853.zip 

If you still face the issue, please share the below details that would be helpful for us to provide a better solution.  

1)     Please confirm your syncfusion package version.  

2)     Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards, 

Rajapandi R

[Peng Xie]

I have warning as above. I am using React.

my package.json

        "@syncfusion/ej2": "19.1.69",

        "@syncfusion/ej2-base": "^19.1.64",

        "@syncfusion/ej2-data": "19.1.63",

        "@syncfusion/ej2-layouts": "19.1.63",

        "@syncfusion/ej2-react-base": "19.1.69",

        "@syncfusion/ej2-react-buttons": "19.1.63",

        "@syncfusion/ej2-react-calendars": "19.1.66",

        "@syncfusion/ej2-react-charts": "^19.1.69",

        "@syncfusion/ej2-react-circulargauge": "19.1.63",

        "@syncfusion/ej2-react-dropdowns": "19.1.69",

        "@syncfusion/ej2-react-grids": "19.1.69",

        "@syncfusion/ej2-react-inputs": "19.1.67",

        "@syncfusion/ej2-react-layouts": "19.1.63",

        "@syncfusion/ej2-react-lists": "19.1.65",

        "@syncfusion/ej2-react-navigations": "19.1.69",

        "@syncfusion/ej2-react-notifications": "19.1.63",

        "@syncfusion/ej2-react-pdfviewer": "^19.1.69",

        "@syncfusion/ej2-react-popups": "19.1.67",

        "@syncfusion/ej2-react-querybuilder": "^19.1.63",

        "@syncfusion/ej2-react-schedule": "^19.1.69",

        "@syncfusion/ej2-react-splitbuttons": "19.1.63",

        "@syncfusion/ej2-react-treegrid": "^19.1.67",

        "react": "^16.13.1",

        "react-dom": "^16.13.1",

MyComponent:

[Rajapandi Ravi]

Hi Peng, 

Thanks for the update 

Based on your query we have prepared a sample and checked your reported problem at our end and try to reproduce the issue, but it was unsuccessful. Please refer the below sample for more information. 

Sample: https://stackblitz.com/edit/react-vbulkw?file=index.js 

If you still face the issue, please share the below details that would be helpful for us to provide a better solution.  

1)    Please share on what case you are facing the issue. 

2)    Please share a issue replication procedure step by step. 

3)    Please replicate the issue with our above attached sample or share any issue reproducible sample. 

Regards, 

Rajapandi R