We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

React DataBinding convert to ES6

Thread ID:

Created:

Updated:

Platform:

Replies:

144990 May 31,2019 09:12 AM UTC Jun 11,2019 11:40 AM UTC React - EJ 2 3
loading
Tags: Grid
Noel
Asked On May 31, 2019 09:12 AM UTC

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 [Syncfusion]
Replied On June 5, 2019 02:42 PM UTC

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, 
 
 
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. 
 
 
 
Regards,  
Kuralarasan M 


Noel
Replied On June 5, 2019 03:15 PM UTC

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, 
 
 
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. 
 
 
 
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, 
 

>> 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 [Syncfusion]
Replied On June 11, 2019 11:40 AM UTC

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); 
   }; 
 

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon