Disable selection for rows with particular Row Ids in devexpress react Grid?

Question

I am working on devexpress react grid and I am new to react. I need to disable the selection of rows based on the condition. I struggle here to disable the selection of particular rows rather than all the rows. Please help me.

https://stackblitz.com/edit/react-deg9yu?file=index.js

The above link has the demo to disable the selection if the 3 rows are selected. But in my scenario the selection checkbox should be enabled for only the rowid [0,1,5]. Other rows should be disabled for selection by default.

Answer 1

I found the answer to my question on below link.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  Getter,
  Plugin
} from '@devexpress/dx-react-core';
import {
  SelectionState,
  IntegratedSelection
} from '@devexpress/dx-react-grid';
import {
  Grid,
  Table,
  TableHeaderRow,
  TableSelection
} from '@devexpress/dx-react-grid-bootstrap3';

const filters = [0,2,5];

const columns = [
  { name: 'id', title: 'ID' },
  { name: 'product', title: 'Product' },
  { name: 'owner', title: 'Owner' },
];
const rows = [
  { id: 0, product: 'DevExtreme', owner: 'DevExpress' },
  { id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
  { id: 2, product: 'DevExtreme Reactive 1', owner: 'DevExpress' },
  { id: 3, product: 'DevExtreme Reactive 2', owner: 'DevExpress' },
   { id: 4, product: 'DevExtreme', owner: 'DevExpress' },
  { id: 5, product: 'DevExtreme Reactive', owner: 'DevExpress' },
  { id: 6, product: 'DevExtreme Reactive 1', owner: 'DevExpress' },
  { id: 7, product: 'DevExtreme Reactive 2', owner: 'DevExpress' },
];
const rowSelectionEnabled = row => row.product === 'DevExtreme' ; 




class PatchedIntegratedSelection extends React.PureComponent {   
  render() {    
    const { rowSelectionEnabled, ...restProps } = this.props;
    return (
      <Plugin>
        <Getter
          name="rows"
          computed={({ rows }) => {
            this.rows = rows;
            return rows.filter(rowSelectionEnabled);
          }}
        />
        <IntegratedSelection {...restProps} />
        <Getter
          name="rows"
          computed={() => this.rows}
        />
      </Plugin>
    )
  }
};

class PatchedTableSelection extends React.PureComponent {
  render() {
    const { rowSelectionEnabled, ...restProps } = this.props;
    return (
      <TableSelection
        cellComponent={(props) => this.props.rowSelectionEnabled(props.tableRow.row) ? (
          <TableSelection.Cell {...props} />
        ) : (
          <Table.StubCell {...props} />
        )}
        {...restProps}
      />
    );
  }
}


export default class App extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      selection: []
    };

    this.changeSelection = selection => this.setState({ selection });
  }
  render() {
    const { selection } = this.state;   
    return (
      <div>
        <span>Selection: {JSON.stringify(selection)}</span>
        <Grid
          rows={rows}
          columns={columns}
        >
          <SelectionState
            selection={selection}
            onSelectionChange={this.changeSelection}
          />
          <PatchedIntegratedSelection
            rowSelectionEnabled={rowSelectionEnabled}
          />
          <Table />
          <TableHeaderRow />
          <PatchedTableSelection
            showSelectAll
            rowSelectionEnabled={rowSelectionEnabled}
          />
        </Grid>
      </div>
    );
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

Links: https://github.com/DevExpress/devextreme-reactive/issues/1706