Devextreme-reactive: Select all checkbox doesn't take collapsed group rows into account

[SunnyMagadan]

• [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [x] React Grid
• [ ] React Chart
• [ ] React Scheduler

Current Behaviour

When a grid has IntegratedGrouping, IntegratedSelection plugins enabled, and TableSelection with showSelectAll then select all checkbox shows the wrong state if it was initially checked and then all groups were collapsed. In this case, checkbox becomes unchecked regardless that all rows underneath are actually checked.

Expected Behaviour

Select all checkbox should show the actual state regardless if group rows collapsed or expanded.

Steps to Reproduce

• Expand all group rows
• Check select all checkbox
• All data rows should become checked
• Collapse all group rows
• Select all checkbox should become unchecked

Link to the example that reproduces the issue: https://codesandbox.io/s/busy-colden-owmy3

Screenshots

Environment

• devextreme-reactive: 2.7.0
• react: 16.10
• material-ui: 4.9

Solution

Custom integrated selection should look into collapsed rows using getCollapsedRows when it calculates rowsWithAvailableToSelect value and meets a group row.

export const rowsWithAvailableToSelect: RowsWithAvailableToSelectFn = (
  rows, getRowId, isGroupRow, getCollapsedRows
) => {
  let dataRows = rows;
  if (isGroupRow) {
    dataRows = rows.reduce((acc, row) => {
      if (isGroupRow(row)) {
        return acc.concat(getCollapsedRows(row) || [])
      }

      return acc.concat([row])
    }, [])
  }
  return { rows, availableToSelect: dataRows.map(row => getRowId(row)) };
};

[MaximKudriavtsev]

Hi @SunnyMagadan,

Take a look at this demo. Here, the 'Select All' checkbox selects only visible rows.

Note that the IntegratedGrouping plugin is placed before the IntegratedSelection one. In this case, Grid groups rows first and then selects grouped ones.

If you would like to change this behavior, just swap the IntegratedGrouping and IntegratedSelection plugins. You can read more about our plugin system in the Plugin Overview guide.

[SunnyMagadan]

Thank you, @MaximKudriavtsev. Indeed, plugins swap resolves the issue. Surprisingly, I tried doing the swap before creating the issue, but it seems I did some mistakes there, so I was sure it just doesn't work this way. 🤷‍♂️ I'm glad to see the problem was resolved without writing any extra code. 👯

[MaximKudriavtsev]

You are welcome! 😊