disable check on a row click in DetailsList

Question

I want to use the check column to select which products to put into a shopping cart. In the same time, I'd like clicking on the row to just open a product view without making a selection.

Currently, if I click on the row, all other rows are unselected and the row I clicked on is selected.

Committal

Answer 1

SelectionZone component data-selection-disabled attribute could be utilized for that matter which :

allows a branch of the DOM to be marked to ignore input events that alter selections.

The following example demonstrates how to disable selection for row fields but to preserve it for check column. The solution is to place the rendering of row fields (DetailsRowFields component) wrapped with element <span data-selection-disabled={true}> to prevent row selection:

export default class DetailsListCustomSelectionExample extends React.Component<any,any> {
  constructor(props: {}) {
    super(props);
    this.state = {};
    this.renderRow = this.renderRow.bind(this);
  }

  public render() {
    return (
      <DetailsList
        onRenderRow={this.renderRow}
        selectionMode={SelectionMode.multiple}
        items={items}
        setKey="set"
        columns={buildColumns(items)}
      />
    );
  }

  private renderRow(props: IDetailsRowProps) {
    return <DetailsRow rowFieldsAs={this.renderRowFields} {...props} />;
  }

  private renderRowFields(props: IDetailsRowFieldsProps) {
    return (
      <span data-selection-disabled={true}>
        <DetailsRowFields {...props} />
      </span>
    );
  }
}

Here is a demo

Erlina