Devextreme-reactive: How to prevent more than X number of rows selected

[pbalzano91]

Hi there -

Question: how could I only allow X number of rows selected? (if the user tries to select another, either do nothing or disable the rest)

I know I could check for that in the onSelectionChange handler, but I want my grid to be fully uncontrolled, so that would not be an option.

Right now I'm using a plugin to render a table toolbar which receives all getters and actions, including selection, but I can't manage to put the limit there.

Thanks in advance!

[SergeyAlexeev]

Hi,

In your case, I suggest you use a custom cell component for the TableSelection plugin. It allows you to manage a checkbox state manually.

First, create a custom cell component:

const Cell = (props) => {
   return (
     <TableCell>
       <Checkbox />
     </TableCell>
   )
};

<Grid>
  <TableSelection
    cellComponent={Cell}
  />
</Grid>

Next, pass the selection getter to the tableCell template in your custom plugin:

class CustomToolbar extends React.PureComponent {
  render() {
    return (
      <Plugin>
        <Template
          name="tableCell"
          predicate={({ tableRow, tableColumn }) => {
            return tableColumn.type === 'select' && tableRow.type === 'data'
          }}
        >
          {params => (
            <TemplateConnector>
              {({ selection }) => (
                <TemplatePlaceholder params={{ selection, ...params }} />
              )}
            </TemplateConnector>
          )}
        </Template>
      </Plugin>
    );
  }
}

Then, the selection field will be available as a property of the custom Cell component.

I've created a sample that demonstrates the described approach.

Please refer to React Core Docs for more information.

[pbalzano91]

Thanks! That solves my problem. Keep up with the good work!

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.