Keeping scroll position and child grids expanded when refreshing

Question

Hi,Our application involves switching between 'tabs' in the web site but when a user goes to another tab and then back to the tab with the grid on it I would like to be able to reopen the child grids they had open originally and also take them back to the same scroll position. It doesn't look like this is handled by persistence but is it possible in another way? Possibly still using localstorage?thanksadam toone

Vignesh Sivagnanam · Accepted Answer

Hi Adam 

Based on your query you need to store the expanded and collapsed row Indexes in the Local storage. To get the row Indexes and the row element in grid while both Expanding and Collapsing the child row we suggest you to use detailDataBound event and the internal event. 

Code Example : 




let initialFlag = true; 
let grid: Grid = new Grid({ 
  dataSource: employeeData, 
  allowSorting: true, 
  allowPaging: true, 
  detailDataBound: detailDataBound, 
  dataBound: dataBound, 
  columns: [ 
    { 
      field: "EmployeeID", 
      headerText: "Employee ID", 
      textAlign: "Right", 
      width: 125 
    }, 
    { field: "FirstName", headerText: "Name", width: 125 }, 
    { field: "Title", headerText: "Title", width: 180 }, 
    { field: "City", headerText: "City", width: 110 }, 
    { field: "Country", headerText: "Country", width: 110 } 
  ], 
  pageSettings: { pageSize: 5 }, 
  childGrid: { 
    dataSource: dataManger, 
    queryString: "EmployeeID", 
    allowPaging: true, 
    columns: [ 
      { 
        field: "OrderID", 
        headerText: "Order ID", 
        textAlign: "Right", 
        width: 120 
      }, 
      { field: "ShipCity", headerText: "Ship City", width: 120 }, 
      { field: "Freight", headerText: "Freight", width: 120 }, 
      { field: "ShipName", headerText: "Ship Name", width: 150 } 
    ] 
  } 
}); 
grid.appendTo("#Grid"); 

function detailDataBound(e) { 
  var Index = e.detailElement.parentElement.previousElementSibling.ariaRowIndex; 
} 
function dataBound() { 
  if (initialFlag) { 
    this.on("detail-state-change", detailChange, this); 
    initialFlag = false; 
  } 
} 
function detailChange(args: any) { 
  var collapseIndex = args.detailElement.closest("tr").ariaRowIndex; 
  alert(collapseIndex); 
} 

Using above code example you can use the mentioned two event to acquire the indexes and Stored in the local storage. After refreshing the page you can use the dataBound event and expandCollapse method to expand the rows in the grid on Initial rendering of the grid. 

Please refer the below Documentation for your reference, 

API Doc : https://ej2.syncfusion.com/documentation/api/grid/#databound 
https://ej2.syncfusion.com/documentation/api/grid/#detaildatabound 

Regards 
Vignesh Sivagnanam

Vignesh Sivagnanam · Answer

Hi Adam, 

Greetings from Syncfusion support 

Before proceeding with your query, we would like to share the behaviour of persistence in EJ2 Grid. 
 
In EJ2 Grid we can persist only the Columns, FilterSettings, SearchSettings, SortSettings, SelectedRowIndex, GroupSettings, PageSettings. It does not persist the Grid Scroll position after the page is refreshed. This is the default behaviour of EJ2 Grid. 

Based on your query, we would like to let you know that is not possible to maintain the Grid Scroll position and the child grid Expanding in the grid. In EJ2 Grid, if we refresh the page the grid is moved to the initial state while rendering in the page. 

Please get back to us if you need further assistance. 

Regards 
Vignesh Sivagnanam

Adam Toone · Answer

Hi,Presumably though there is some way of knowing the row id when a child grid is expanded/collapsed - although I can't see an event for this action myself. We could keep a register of the id's of expanded rows in local storage and whe we come back to the page there is presumably some way of automatically exanding the relevant child grid based on the row id's we stored.It does look like we can automatically expand the grid using  this.expandCollapse but as i mentioned i cannot find an event to know when it is expanded or collapsed.Could you advise if this is possiblethanksadam