After editing a row in the child grid - reload page to that specific row

Question

Hello,I have been doing some research and haven't been able to find anything like this and I am not sure if this is possible. I have a data grid that has a child grid within. I have it set up to edit a child row in a different view and upon save return back to the index page with the grid. They would like it to return to that exact row that was just edited. So if the row that was edited it on the third page of the grid, it should open to that page with that child grid expanded that contains that row. Thanks,DanaAttachment: DataGridDemo_7db48af6.zip

Sujith Kumar Rajkumar · Accepted Answer

Hi Dana, 
 
We checked your query and based on that would like to let you know that the code for restoring Grid settings shown in the ‘onPageNavigate’ function needs to be executed on switching back to the Grid page from the edit page. And the ‘onPageNavigate’ function mentioned here was only for demonstrating the place where this needs to be executed. We apologize for not conveying this properly to you. 
 
So, if you have written any function that will be called on loading the Grid page, please define this code there or else you can also use the Grid’s dataBound event(Triggers once data is loaded in the Grid). If you are using the dataBound event to perform this action, then you need to execute this using a global flag variable(as this event will be triggered each time the Grid data is updated). 
 
This is demonstrated in the below code snippet, 
 




var flag = false; 
 
// Grid’s actionComplete event handler  
function onActionComplete(args) {  
    // Triggers when the edit action is successfully started  
    if (args.requestType === "beginEdit") {  
                           . 
                           . 
           // A global flag variable is enabled here to check condition in the dataBound event 
           flag = true; 
    }  
}  
  
// Grid’s dataBound event handler 
function dataBound() {  
  if (flag) { 
       // Here the code for restoring the Grid settings can be executed 
                         . 
                         . 
      // The global flag variable is disabled so that this condition is not executed when the dataBound event is triggered for other Grid actions 
      flag = false; 
  }  
}  
 
 
API link: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound  
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Shalini Maragathavel · Answer

Hi Dana, 

Thanks for contacting Syncfusion forum. 

Based on your query we found that you need to edit the child row details in a different view. We checked your code example and found that you have used commandClick event for the child grid. In commandClick event we found that you have send only the id value to the different view. So, before we proceed with your query we need the following details, 

1. Do you need to send the entire data of the commandColumn to the different view? 

2. Do you need to render the values in the form elements for modifying the data? 

3. In your screenshot we found that you have render the saveRows button in the top of the Grid? Share the purpose of rendering the saveRows button. 

4. In your code example we also found that you have used the queryBuilder? So, please share the purpose of using the ejs-querybuilder. 

Regards, 
Shalini M

Dana Kiehl · Answer

Hello,I have no issue with editing in the a different view. I have that all set up and working. My question was related to after the user clicks save on the edit view and it returns to the grid view. So say a user edited the version 10 under the rule id 11 which is on page 2 of the grid once they completed the edit and it returned to the grid (index page) it would opened exactly how it was. So open like the screenshot that I provided (page 2 of the grid and that rule expanded). The Save Rows button is for the row drag and drop feature that I have implemented, I needed to be able to save the new row order to the database for future use. And query builder is being used in conjunction with the grid(well hopefully currently can't get it to work) but isn't relevant to this question.Thanks,Dana

Sujith Kumar Rajkumar · Answer

Hi Dana, 
 
Thanks for sharing the details. 
 
Based on the query, we could understand that your requirement is that when moving to a different page(for performing Grid row edit) and returning back to the Grid, it must maintain the same state(i.e., parent Grid page and expanded child which was edited). You can achieve this by maintaining the current parent Grid page and expanded parent row element id(where the row edit is currently performed) in a global variable and then restoring it when navigating back to the same page. This can be done in the Grid’s actionComplete event handler when the requestType is ‘beginEdit’. 
 
This is demonstrated and explained in the below code snippet, 
 




var curPage 
var rowIndex; 
 
// Grid’s actionComplete event handler 
function onActionComplete(args) { 
    // Triggers when the edit action is successfully started 
    if (args.requestType === "beginEdit") { 
        // The parent Grid instance is retrieved 
        var parentGrid = this.element.parentElement.closest('.e-grid').ej2_instances[0]; 
        // The current page of the parent Grid is stored in a global variable 
        curPage = parentGrid.pageSettings.currentPage; 
        // The parent row of the expanded child is retrieved 
        var detailRow = args.row.closest('.e-detailrow'); 
        var curExpandedRow = detailRow.previousElementSibling; 
        // The parent row index is stored in a global variable  
        rowIndex = curExpandedRow.getAttribute('aria-rowindex'); 
    } 
} 
 
// Event function triggered on navigating back to the Grid after completing edit operation 
function onPageNavigate() { 
    // Parent Grid instance is retrieved using it ‘Id’ 
    var gridObj = document.getElementById('Grid').ej2_instances[0]; 
    // Parent Grid is navigated to the globally stored page index 
    gridObj.goToPage(2); 
    // The previously expanded row element is retrieved by passing the stored index to the Grid’s ‘getRowByIndex’ method 
    var previousRow = gridObj.getRowByIndex(0); 
    // The parent expand icon is retrieved from the row element 
    var previousRowExpandIcon = previousRow.querySelector('.e-detailrowcollapse'); 
    // The icon is clicked in order to expand and display the child Grid 
    previousRowExpandIcon.click(); 
} 
 
API links: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete 
                 https://ej2.syncfusion.com/javascript/documentation/api/grid/#gotopage 
                 https://ej2.syncfusion.com/javascript/documentation/api/grid/#getrowbyindex 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R

Dana Kiehl · Answer

Hello,Thanks for your response. It has helped me along a bit. I am still struggling though. Since I am not using the default way of editing, I have to set things up a little differently. The user clicks on the little notepad icon which triggers the commandClick function. This takes them to a details page. From there they can click to go to the edit page. So I have set up the actionComplete code in the command click function with a few changes just because of what data is brought in. I will work with what I have to get the current row. However, where I am having issues is the onPageNavigate function. I can't seem to get that function to be called. I have attached the updated zip folder with all the updated files in it. All the work I have done is in the index.js file.Thanks,DanaAttachment: DataGridDemo_(2)_1f1b4f4f.zip

Dana Kiehl · Answer

Hello,Thank you for all your help. I was able to get everything up and running properly. Thanks,Dana

Shalini Maragathavel · Answer

Hi Dana, 
  
Thanks for the update. 
  
We are glad to hear that the provided solution resolved your query. 
Please get back to us if you need further assistance. 
  
Regards, 
Shalini M.