inovua / reactdatagrid

Empower Your Data with the best React Data Grid there is
https://reactdatagrid.io
Other
3.45k stars 57 forks source link

Checkbox "Select all" is selecting disabled rows also #422

Open teja-centime opened 1 week ago

teja-centime commented 1 week ago

Version : @inovua/reactdatagrid-enterprise@5.10.2

What you did:

Enabled Checkbox column for selecting the rows and also my table has a scroll where it hides some rows inside the scroll at down below. There are some rows that have disable checkboxes and some of these rows are hidden in the scroll. As we know, due to the virtualization, the datagrid will not render those rows that are not in the viewport ( hidden inside scroll). Now, I click on "Select All".

What happened: The disabled rows are also getting selected. Usually, I set my state containing the list of disabled rows by adding each disabled row into it whenever the renderCheckbox runs for that row. But, as virtualization is in the picture, this function is not getting called for the rows hidden inside the scroll. I dont want to remove the virtualization since my table can have large number of rows.

Reproduction repository:

https://codesandbox.io/p/sandbox/datagrid-selectall-disabled-rows-kk8qh3?file=%2Fsrc%2FApp.js%3A325%2C31

Problem Description: If you check the above repository, the disabled rows are having full grey checkboxes. If you directly click the "Select All" button without scrolling down, the last rows like "Tim Cheap" etc are also getting selected. But, before you click on "Select All", if you scroll to bottom and then click, it won't happen. Basically, renderCheckbox method which is storing the disabled rows is not getting triggered due to virtualization.

Suggested solution:

How do we solve this ? Any hints are appreciated. Ideally in other libraries, we have a function for `unselected` which takes care of checking whether that row is disabled or not (regardless of rendering that row). But in this, it is plain object or boolean. 
avishshah11 commented 4 days ago
image

I tried to reproduce the bug using the give sandbox link but seems it works fine when I clicked on select all checkbox it doesn't selects the disabled checkboxes. Above I have attached image for the same.

@teja-centime

teja-centime commented 4 days ago

@avishshah11 No, please check the disabled rows hidden in the scroll by going to the last row. Again reiterating the steps to reproduce :-

  1. Close the link if you already opened it and open the same codesandbox link afresh
  2. Click on "cross" button of the banner message that says "Unlicensed copy -... " to close it
  3. Click on "Select All" checkbox in the header right away without scrolling anything in the table

Now you can see the disabled rows that are directly visible in the viewport are not selected but if you scroll down to the bottom, you will see the disabled rows got selected. image

avishshah11 commented 4 days ago

@teja-centime

Yes, disabled once are getting selected for initial time that too specifically last 3 rows but then when I uncheck the checkbox and check it again then the disabled ones (all of them) doesn't get selected.

teja-centime commented 4 days ago

@avishshah11 Yes, as I proposed, this is because of the virtualization. At first the rows below haven't rendered yet because of virtualization, that is why we are not able to glean the disabled state of those rows. But, after the library has rendered them because you scrolled into them, the state of "which rows are disabled" got updated and then it will start working normally. I wanted to ask if there is any way the library can calculate the state of the row (whether it is disabled or not) at the point of "Select All" without rendering them ? If you guys provide a function for the "unselected" prop which calculates the state dynamically instead of passing a standard value, then this will be solved.