Grid.selectionSettings.persistSelection only persists last selected record on page refresh when multiple selection is enabled

Question

I've found that only the last selected record persists when refreshing the page (the whole document, not the grid page) despite the settings specifying multiple selection.

Example

Try selecting multiple records in the grid, then refreshing the StackBlitz page or the output panel. Only the last record that was selected is still selected once the page loads. I would expect that since selection type is set to 'Multiple', that all of the selected records would still be selected after a page refresh.

What needs to be done so that all of the selected records persist on a page refresh?

Thanks.

Rajapandi Ravi · Accepted Answer

Hi Josh, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to maintain the selection after page refresh. By default, in our EJ2 Grid, the selection will be persisted as long as the Grid is not destroyed(like page refresh, page switch). So, we have achieved this requirement using workaround way. Please refer to the below code and sample link. 

In this below sample we have moved all selected records primary key’s in indexes array and stored local Storage when clicking the button and then stored primary key’s rows are selected using selectRow method in dataBound event when refreshing the page. 





button.element.onclick = function () { 
  var gridObj = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
  for (var i = 0; i < gridObj.getSelectedRecords().length; i++) { 
    indexes.push(gridObj.getSelectedRecords()[i][gridObj.getPrimaryKeyFieldNames()[0]]); 
  } 
  window.localStorage.setItem('Selection', indexes) 
}; 

dataBound: function (args) { 
    if (window.localStorage.Selection != undefined) { 
      var Reselct = window.localStorage.Selection.split(","); 
      for (var i = 0; i < Reselct.length; i++) { 
        for (var j = 0; j < grid.currentViewData.length; j++) { 
          if (grid.currentViewData[j][grid.getPrimaryKeyFieldNames()[0]] == Number(Reselct[i])) { 
            grid.selectRow(j); 
          } 
        } 
      } 
    } 
  }, 

Sample: https://stackblitz.com/edit/sf-grid-remotedata-persistselection-rq8qas?file=index.js 

API: https://ej2.syncfusion.com/documentation/api/grid/#databound 

Screenshot:  

Before clicking the button 

  
After clicking the button 

  

After refreshing the page 

  

Likewise, you can achieve your requirement as per your needs. 


Regards,Rajapandi R

Josh Borgerding · Answer

Ok, thank you for your help Rajapandi.

Rajapandi Ravi · Answer

Hi Josh, 
 
You are welcome:) and please get back to us if need any other assistance. As always, we are happy to assist you 
 
Regards,Rajapandi R