1. Feedback
  2. React
  3. 58586

Welcome to the React feedback portal. We’re happy you’re here! If you have feedback on how to improve the React, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

The api call selectRow behaves oddly if multiple rows are selected

Hi,

I have a grid where I'm using a checkbox column to allow multiple selection and I want to be able to deselect a row that's already selected. I found odd behaviour making the selectRow api call with toggle for a row that's selected and the oddness varies depending on whether persistSelection is enabled or not.

If persistSelection is enabled and you have multiple rows selected then selectRow with toggle is only able to deselect the last of the selected rows. If you toggle an earlier selected row then nothing appears to happen.

I think that is down to this convoluted bit of code in the selection module (in particular the bolded bit):

        isToggle = !isToggle ? isToggle :
            !this.selectedRowIndexes.length ? false :
                (this.selectedRowIndexes.length ? (this.isKeyAction && this.parent.isCheckBoxSelection ?
                    false : index === this.selectedRowIndexes[this.selectedRowIndexes.length - 1]) : false);

If persistSelection isn't enabled and you have multiple rows selected then selectRow toggling the last of the selected rows will deselect all the selected rows, whereas toggling a row before the last selected row will deselect all except that row. 

I also noticed that if you call selectRow to toggle a deselected row while other rows are selected it will lead to only the toggled row being selected - my expectation with "isToggle" passed as true then only the row specified would be selected (otherwise the only way the api provides of adding/removing a single row to a current multiple selection is to calculate the change and call selectRows with the full updated set). You may well say that selectRow is intended as a call to say "this and only this row is to be selected", but I'm not sure this is intuitive with multiple selection enabled, and certainly (like I said) if "isToggle" is set to true then I would expect it to just act on the row specified.

I modified one of your documentation examples to help illustrate the unexpected behaviour:

https://stackblitz.com/edit/react-rv7ujl?file=App.js

So this starts with persistSelection enabled.

  • Click the "123" button and that will set the first 3 rows to be selected
  • Click the "1" button and nothing will appear to happen 
  • Click the "2" button and nothing will appear to happen
  • Click the "3" button and the 3rd row will be deselected
  • Click the "2" button and the 2nd row will be deselected
  • Click the "1" button and the 1 row will be deselected
Next click "Persist (toggle)" and it will change to "Not Persist" so persistSelection is now off.

  • Cl
    ick the "123" button and that will set the first 3 rows to be selected
  • Click the "1" button and that will leave the first row is being the only one selected
  • Click the "123" button and that will set the first 3 rows to be selected
  • Click the "3" button and no rows will now be selected
  • Click the "1" button and that will toggle the first row to be selected
  • Click the "2" button and that will toggle the second row to be selected but will deselect the first row