DataSource not synchronized after edit and batch update

[Marc Eilens]

Hello,

we use the data grid to edit data in batch mode. Now, when the update button of the toolbar is pressed, I get the events beforeBatchSave and actionComplete each having the current data of the grid.

Now my question: is it correct that the underlying dataSource I passed to the grid component is NOT automatically updated by the grid??? Do I have to synchronize the edited grid data and my datasource manually?

Or am I missing sth. or am I doing sth. wrong?

Thanks in advance,

Marc

P.S: after searching the forum, I found a demo using Angular where the synchronization between the grid and the original datasource works, BUT I ported it to Vue and there, the data is not written back to the original datasource.

Please see here:

- Angular version with synchronization: https://stackblitz.com/edit/angular-umeuhb-mgqfpc?file=normal-edit.component.ts

- Vue version where sync does not work: https://codesandbox.io/s/272413-getselectedrowsfrom-cell-uy43x?file=/src/App.vue

[Balaji Sekar]

Hi Marc, 

 

Before proceeding further, we need to clarify your requirement as you have provided workable sample(In Angular framework) was enabled the editing in Normal mode. But, you have to mentioned the batch edit mode.  

 

Normal edit: create a edit form in entire cell of edit row while editing a grid row and it is save the change when click on outside of edit form or save button click action from toolbar.  

Batch edit: create a edit mode in specific cell alone and it is save action trigger while click on save button in toolbar alone. 

 

Since please share your exact requirement to us that will help to validate further. 

 

Regards, 

Balaji Sekar  

[Marc Eilens]

Hello Balaji Sekar,

oh, I'm sorry. Yes, your're right.

What we want is to edit the grid in batch mode and we use the Vue version, although I think for my problem here it makes no difference... The Angular example works the same for batchsave mode, i.e. the datasource gets updated.

I changed the Vue version to use batch mode. Please see here: https://codesandbox.io/s/272413-getselectedrowsfrom-cell-uy43x?file=/src/App.vue

The updated version for Angular is here: https://stackblitz.com/edit/angular-umeuhb-mgqfpc?file=normal-edit.component.ts

Kind regards,

Marc

[Balaji Sekar]

Hi Marc, 

 

Thanks for the information. 

 

From your query we could see that you require two way binding for the Grid’s data source. You can achieve this by assigning the data source to the Grid in its created event handler instead of providing it on initialization as demonstrated in the below code snippet, 

 

// Grid’s created event handler 

onCreated() { 

          // Data is assigned to Grid 

          this.$refs.grid.ej2Instances.dataSource = orderDetails; 

} 

 

Modified sample for your reference, 

 

Sample: https://codesandbox.io/s/272413-getselectedrowsfrom-cell-knziv?file=/src/App.vue 

 

Please get back to us if we misunderstood your query or if you require any further assistance. 

 

Regards, 

Balaji Sekar