Implement edit grid row data in a separate component

[Sabina Muminovic]

To Whom It May Concern,

We use a data grid to display data in few columns. In order to edit data row content, we want to navigate from a grid to a separate page where edit form will take place.

So far, we have implemented what is explained here: https://www.syncfusion.com/forums/139161/router-link-in-grid-column, but there is a missing part on how to pass data from a data grid to an edit component (with routing implemented)?

Pseudo-structure/flow of what we are trying to achieve is:
- component with a grid and its data
- click on either grid data row (or separate context button?)
- go to a separate page where edit form is present, populate form with a data from a grid row that's previously clicked
- make changes here, save changes here
- go back to a grid - expect updated data to be present here

Thanks in advance for your effort (and answer) :)

[Sujith Kumar Rajkumar]

Hi Sabina, 

Greetings from Syncfusion support. 

You can get the Grid row data on click by binding the rowSelected event to it. In this event you will get the current selected row data as displayed in the below image, 

 

You can then pass this data to your other component page using vuex or props to edit. This is a common requirement for which you can check the solutions in the below stack overflow links, 

Links: https://stackoverflow.com/a/55313966  

           https://stackoverflow.com/a/46153279  

           https://stackoverflow.com/a/46018665 

Once edit is completed you can update the new data to the Grid by using the Grid’s setRowData or updateRow method. Please check the below API links for details on these methods 

API links: https://ej2.syncfusion.com/vue/documentation/api/grid/#setrowdata 

                  https://ej2.syncfusion.com/vue/documentation/api/grid/#updaterow  

Let us know if you have any concerns. 

Regards, 

Sujith R