CODEWITHSUNDEEP
javascriptreactjskendo-uikendo-gridkendo-react-ui
Zied Hf
Zied Hf

Reputation: 581

kendoui Grid & React : selectable row allows to select one row in each page

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
          ]
        }}
      />

Upvotes: 0

Views: 3246

Answers (1)

Xizario
Xizario

Reputation: 501

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.

Upvotes: 1

Related Questions