How to programmatically deselect items in grid.

Question

I am using a <GridComponent> to render a list of items and I have enabled multiple selection mode, and persistSelection=true. I have two events configured in its settings: rowSelected​ and rowDeselected​. When the user selects or deselects a row, I am using a ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​grid ref to get the grid's selected records and copy them into a local state variable using this code:setSelectedItems((gridRef.current?.getSelectedRecords().slice() || []))The reason I do this is so that I can show the list of all selected items in another section of the page. In that other component, I allow the user to click a "REMOVE" button which removes the item from the selectedItems​ local state variable. However, the item removed by the user remains selected in the grid.How can I programmatically use the ​​grid's ref to deselect a single item from its selected records? I need to be able to remove selected items from the grid's internal list even if those items are not on the current page of data.It would also be helpful to understand how I can tell the grid on its initial load to automatically select a list of items (even if they aren't on the initial page).

Sang Le · Answer

I ended up working around this by disabling selection in the grid and using recordClick. In recordClick, I parse out the rowData and add it to my state's list and I manually add a className to the grid row so that it looks selected.

Additionally, in rowDataBound, I am adding an extra attribute to the grid row named "data-key" which is set to the key value of my bound data object type. Also, if the row's bound object exists in the local state, I apply my custom selected className to it, otherwise I remove that classNAme.

Then, when the state changes, I iterate through the grid's current rows using ref.current?.getAllDataRows(), I compare its "data-key" attribute against the list of items in the state. If it is not in the state, I remove my custom className from the grid row. If it is in the state, I ensure it has the className applied.

Pavithra Subramaniyam · Answer

Hi Sang Le,It is great to hear that you have found a solution to achieve your requirement!Please get back to us if you need further assistance on
this.Regards,Pavithra S

Sang Le · Answer

Hi Pavithra,It would be nice if there was something I could use that was built-in to the grid.Is there a way to programmatically tell the Grid component to select or deselect items?Thanks!

Pavithra Subramaniyam · Answer

Hi Sang Le,You can use the selectRows method to select the group of
rows by passing the required row indexes (ex: selectRows([1,5,7,4])). If you want
to remove some of the rows from the selection you can pass the updated row indexes (ex:
selectRows([1,4])), so it will maintain only the passed rows and remove others
from the selection. Please refer to the below API for more information.https://ej2.syncfusion.com/react/documentation/api/grid/#selectrowsIf the above does not meet your requirement, please share the below
details that will be helpful or us to provide a better solution as early as
possible.
 Share
     the Grid code example.
 Do
     you want to update the selection during the routing?
 Share
     the screenshot of the locally stored selected row details
Regards,Pavithra S

Sang Le · Answer

I have paging and filtering turned on for my grid. I am also persisting the selection so that when the user changes pages it doesn't lose their selections from a prior page.

The user has the ability to use a different control to add items to their selections. They are able to select items that are not within the current grid page. I can't use selectRows because the newly selected item might not be on the grid page and thus does not have a valid row index.

The ideal scenario would be to be able to call a grid method that would allow me to selectRowsByObjectKey or selectObject(boundObject). Is there anything like that?

Pavithra Subramaniyam · Answer

Hi Sang Le,Currently, we are validating the scenario “Modifying the
persist selection programmatically” on our side and we will update the
feasibility of this scenario on April 22, 2022. Until then we appreciate your
patience.Regards,Pavithra S

Nithya Sivaprakasam · Answer

Hi Sang Le,Sorry for the inconvenience caused.Currently, we are checking your query and we will update further details on May 18th, 2022. Until then, we appreciate your patience.Regards,Nithya S

Pavithra Subramaniyam · Answer

Hi Sang Le,We are sorry for the delay in contacting you.You can change the selected state of the persisted rows by setting
the “selectedRowState” of the saved primary as true/false. So, you can
select/deselect the records which are not on the current page. Please refer to
the below code example and sample link for more information.

select() {
    var key = parseInt(document.getElementById('pKey').value); //  primaryKey value
    this.gridInstance.selectionModule.selectedRowState[key] = true;
    this.gridInstance.selectionModule.refreshPersistSelection();
  }
  deselect() {
    var key = parseInt(document.getElementById('pKey').value); //  primaryKey value
    this.gridInstance.selectionModule.selectedRowState[key] = false;
    this.gridInstance.selectionModule.refreshPersistSelection();
  }

Sample: https://stackblitz.com/edit/react-xkr1ib?file=index.jsPlease get back to us if you need further assistance on this.Regards,Pavithra S

Evelina · Answer

HelloI faced the same problem and now your code doesn't work bc

selectedRowState and

refreshPersistSelection are private. Version is @syncfusion/ej2-grids@20.4.54", "@syncfusion/ej2-grids@~20.4.54":Have you changed anything?

Pavithra Subramaniyam · Answer

Hi Evelina,We suggest setting the type as “any” to overcome the
type error. Please refer to the below code example for more information.

select() {
   
    var key = parseInt(document.getElementById('pKey').value); //  primaryKey value
   
    (this.gridInstance.selectionModule as any).selectedRowState[key] = true;
   
    (this.gridInstance.selectionModule as any).refreshPersistSelection();
   
  }
   
  deselect() {
   
    var key = parseInt(document.getElementById('pKey').value); //  primaryKey value
   
    (this.gridInstance.selectionModule as any).selectedRowState[key] = false;
   
    (this.gridInstance.selectionModule as any).refreshPersistSelection();
   
  }

Regards,Pavithra S

Rajaraman Subramanian · Answer

Hi Pavithra,
I also faced the same problem (my version is "@syncfusion/ej2-react-grids": "^25.2.3") where I wanted to deselect a grid row in another page (pagination and persistence enabled) but the closest API I could see from the documentation is getRowIndexByPrimaryKey but this works only for the current page as row index is returned as -1 i.e invalid for a primary key in a different page.
Thanks for revealing these undocumented methods / private methods in your post, I am now able to deselect a grid row in another page.

In my opinion these set of private methods from grid components selection module should be exposed as a public API to select / deselect a particular row by its primary key in any page (when persistence is enabled) in your next version.Hopefully the concerned team will take up this suggestion.Thanks

Johnson Soundararajan S · Answer

Hi Rajaraman Subramanian,We are pleased to hear that you have resolved your query.You can access the selectedRowState property when
you enable persistSelection as true in the selectionSettings.Please get back to us, if you need further assistance.Regards,Johnson Soundararajan S

Rajaraman Subramanian · Answer

Hi Johnson,As I mentioned the undocumented / private methods shared by Pavithra (quoted below) work fine when persistSelection is enabled in the selectionSettings.(this.gridInstance.selectionModule as any).selectedRowState[key] = true; (this.gridInstance.selectionModule as any).refreshPersistSelection();Looks like you are reiterating the same thing but my question was why are not these undocumented / private methods exposed as public API yet? Can you please answer that?Thanks

Aishwarya Rameshbabu · Answer

Hi Rajaraman Subramanian,We have taken note of the task for improving
the User Guide documentation ("Need to update a public API
selectedRowState") internally, and it will be included in one of our
upcoming releases. Thank you for taking the time to bring this to our
attention.RegardsAishwarya
R

Rajaraman Subramanian · Answer

Hi Aishwarya,Welcome. Very much appreciated.Thanks,Rajaraman

Sang Le · Answer

Could someone please close this thread as I no longer want to be part of it.  Thanks.

Aishwarya Rameshbabu · Answer

Hi,Please
get back to us if you need any further assistance.RegardsAishwarya
R