0

By setting selectable: row. The grid allow you to select an item in each page. I just want to select only one row in the Grid and limit the selected row to 1. 

<Grid
        {...{
          dataSource: dataSource,
          sortable: sortable,
          selectable: selectable,
          scrollable: false,
          navigatable: true,
          filterable: filterable,
          allowCopy: allowCopy,
          pageable: pageable,
          perPage: perPage,
          editable: editable,
          change: e => e.sender.selectedKeyNames()),
          persistSelection: true,
          columns: [
            {
              template: "<span class='sl-select-check'></span>",
              attributes: { class: 'sl-select-check-td' }
            },
            ...columns
          ]
        }}
      />
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
Zied Hf
  • 491
  • 3
  • 10
  • 30

1 Answers1

1

It would be easier with the new version of the Kendo Grid implemented in React: https://www.telerik.com/kendo-react-ui/components/grid/selection/ In this demo the selection code is fully customizable and the state of if an item is selected or no is in the item itself.

    if (!event.nativeEvent.ctrlKey) {
        this.state.data.forEach(item => item.selected = false);
    } 
    //this works across pages.
Xizario
  • 481
  • 2
  • 9
  • Is this a new version for React ? – Zied Hf Jan 24 '18 at 13:25
  • 1
    Yes this version of the components written entirely for react. The previous version was react wrappers for the jQuery widgets. You can now see two sections in the demos. They exist as separate packages. new: [@progress/kendo-react-grid](https://www.npmjs.com/package/@progress/kendo-react-grid) old: [@progress/kendo-grid-react-wrapper](https://www.npmjs.com/package/@progress/kendo-grid-react-wrapper) The components look similar because of similar HTML output an can be styled the same way, but they work and configure differently. – Xizario Jan 25 '18 at 06:55