React DataBinding convert to ES6

[Noel]

Hi Syncfusion Team,

Please help me to convert   Grid DataBinding from typescript to ES6 or how to  use Edit Template  when clicked Save button will call  ajax/axios method

Thanks.

Regards,

Noel

[Kuralarasan Muthusamy]

Hi Novel, 

 

Thanks for contacting Syncfusion support. 

 

Query #1: Please help me to convert   Grid DataBinding from typescript to ES6 

 

Before we proceeding with this query could you please explain more about your requirement. This will help us to provide the solution for this issue as early as possible. 

 

Query #2: how to  use Edit Template 

 

From this query we found that you want to use cell edit template feature in the Grid. We have already discussed about this topic in our help documentation. So please refer the below documentation link for more details, 

 

https://ej2.syncfusion.com/react/documentation/grid/edit/#cell-edit-template 

 

Query #3: when clicked Save button will call  ajax/axios method 

 

If you have used “Normal” editing or dialog editing in Grid, then you can use Grid actionBegin event to send the ajax call while saving the records. If you have used “Batch” editing in Grid then we suggest to use beforeBatchSave event of the Grid to send the ajax call while saving the edited records. 

 

Documentation for actionBegin event: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 

 

Documentation for beforeBatchSave event: https://ej2.syncfusion.com/vue/documentation/api/grid/#beforebatchsave 

 

Regards,  

Kuralarasan M 

[Noel]

Hi Novel, 

 

Thanks for contacting Syncfusion support. 

 

Query #1: Please help me to convert   Grid DataBinding from typescript to ES6 

 

Before we proceeding with this query could you please explain more about your requirement. This will help us to provide the solution for this issue as early as possible. 

 

Query #2: how to  use Edit Template 

 

From this query we found that you want to use cell edit template feature in the Grid. We have already discussed about this topic in our help documentation. So please refer the below documentation link for more details, 

 

https://ej2.syncfusion.com/react/documentation/grid/edit/#cell-edit-template 

 

Query #3: when clicked Save button will call  ajax/axios method 

 

If you have used “Normal” editing or dialog editing in Grid, then you can use Grid actionBegin event to send the ajax call while saving the records. If you have used “Batch” editing in Grid then we suggest to use beforeBatchSave event of the Grid to send the ajax call while saving the edited records. 

 

Documentation for actionBegin event: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 

 

Documentation for beforeBatchSave event: https://ej2.syncfusion.com/vue/documentation/api/grid/#beforebatchsave 

 

Regards,  

Kuralarasan M 

Hi 

See my reply below.

 

Query #1: Please help me to convert   Grid DataBinding from typescript to ES6 

 

Before we proceeding with this query could you please explain more about your requirement. This will help us to provide the solution for this issue as early as possible. 

>> I'm refering to Remote data/Custom Data Binding or using Web API that will handle CRUD operations and will call ajax/axios method. The documentation are using TypeScript syntax but im not familliar with that. I'm using ES6/JSX syntax.

 

Query #2: how to  use Edit Template 

 

From this query we found that you want to use cell edit template feature in the Grid. We have already discussed about this topic in our help documentation. So please refer the below documentation link for more details, 

 

https://ej2.syncfusion.com/react/documentation/grid/edit/#cell-edit-template 

>> Ok will note on this. I decided to used the Dialog template for editing mode.

 

Query #3: when clicked Save button will call  ajax/axios method 

 

If you have used “Normal” editing or dialog editing in Grid, then you can use Grid actionBegin event to send the ajax call while saving the records. If you have used “Batch” editing in Grid then we suggest to use beforeBatchSave event of the Grid to send the ajax call while saving the edited records. 

>> I'm using Dialog Editing and called the actionBegin event. However, i want to happen in my Grid. I will select first the rows that i'm going to update then i will call the Edit button then dialog template will pop-up and saved and call the ajax method. But the issue is the last row only that i select reflected the updated data.    this is likely as batch updating using the dialog template.

In your example batch editing , is modifying the data in Grid cell itself.

 

[Hariharan J V]

Hi Noel, 

Thanks for the update. 

Query #1: I'm refering to Remote data/Custom Data Binding or using Web API that will handle CRUD operations and will call ajax/axios method. The documentation are using TypeScript syntax but im not familliar with that. I'm using ES6/JSX syntax. 

 

From this query, we suspect that you want to provide your ajax success result to Grid. We suggest to use dataSource property in the ajax success method to provide the data source to Grid. Please refer the below code snippet, 

 

var grid = document.getElementById("Grid").ej2_instances[0]; 

    var ajax = new ej.base.Ajax("https://ej2services.syncfusion.com/production/web-services/api/Orders", "GET"); 

    ajax.send(); 

    ajax.onSuccess = function (data) { 

        grid.dataSource = JSON.parse(data); 

   }; 

 

Sample: https://stackblitz.com/edit/kpodmu?file=index.js 

Query #2: I'm using Dialog Editing and called the actionBegin event. However, i want to happen in my Grid. I will select first the rows that i'm going to update then i will call the Edit button then dialog template will pop-up and saved and call the ajax method. But the issue is the last row only that i select reflected the updated data.    this is likely as batch updating using the dialog template. 

 

First we would like to inform that Grid do not support batch editing with dialog template at same time. From your query we suspect that you have tried to edit the multiple records by using dialog template editing. We cannot use the dialog template for edit the multiple selected records. So please share more details about your requirement with your full Grid code snippet. This will help us to provide the better solution for your requirement as early as possible. 

Regards, 

Hariharan