Selection

The Grid enables the user to select a single row or multiple rows.

Getting Started

To implement row selection:

  1. Use the onRowClick event.
  2. Set theselectedField option.

As a result, the Grid allows you to set the currently clicked item as selected. The selectedField option represents a field inside the data collection which determines the rows that will render as selected.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.Component {
    state = {
        data: products,
        selectedID: null
    }

    render() {
        return (
            <div>
                <Grid
                    style={{ height: '400px' }}
                    data={this.state.data.map(
                        (item) => ({ ...item, selected: item.ProductID === this.state.selectedID }))
                    }
                    selectedField="selected"
                    onRowClick={(e) => {
                        this.setState({ selectedID: e.dataItem.ProductID });
                    }}
                >
                    <Column field="ProductName" title="Product Name" width="300px" />
                    <Column field="UnitsInStock" title="Units In Stock" />
                    <Column field="UnitsOnOrder" title="Units On Order" />
                    <Column field="ReorderLevel" title="Reorder Level" />
                </Grid>
            </div >
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Customizing the Selection

The Grid provides both checkbox and row-click selection options which can be applied to single or multiple records.

The checkbox selection enables selection upon a checkbox click and implements a master checkbox in the header that selects and deselects all items.

To configure the checkbox selection:

  1. Set a selection column by setting the field option and passing the select value to field.
  2. Handle the GridSelectionChangeEvent, selectionChange and the onHeaderSelectionChange events which will be fired once the user clicks a checkbox.
  3. Depending on the selected state of an item, set the selectedField value.

The row-click selection allows the selection of items on row click. Depending on the selection logic of the project, you can implement multiple row selection through the Ctrl and Shift keys by handling the onRowClick event and specifying the selectedField.

The following example demonstrates how to implement multiple selection both on row click and with checkboxes.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.Component {
    lastSelectedIndex = 0;
    state = {
        data: products.map(dataItem => Object.assign({ selected: false }, dataItem))
    }

    selectionChange = (event) => {
        event.dataItem.selected = !event.dataItem.selected;
        this.forceUpdate();
    }

    rowClick = (event) => {
        let last = this.lastSelectedIndex;
        const current = this.state.data.findIndex(dataItem => dataItem === event.dataItem);

        if (!event.nativeEvent.shiftKey) {
            this.lastSelectedIndex = last = current;
        }

        if (!event.nativeEvent.ctrlKey) {
            this.state.data.forEach(item => item.selected = false);
        }
        const select = !event.dataItem.selected;
        for (let i = Math.min(last, current); i <= Math.max(last, current); i++) {
            this.state.data[i].selected = select;
        }
        this.forceUpdate();
    }

    headerSelectionChange = (event) => {
        const checked = event.syntheticEvent.target.checked;
        this.state.data.forEach(item => item.selected = checked);
        this.forceUpdate();
    }

    render() {
        return (
            <div onMouseDown={e => e.preventDefault() /* prevents browser text selection */}>
                <Grid
                    data={this.state.data}
                    style={{ height: '400px' }}
                    selectedField="selected"
                    onSelectionChange={this.selectionChange}
                    onHeaderSelectionChange={this.headerSelectionChange}
                    onRowClick={this.rowClick}
                >
                    <Column
                        field="selected"
                        width="50px"
                        headerSelectionValue={
                            this.state.data.findIndex(dataItem => dataItem.selected === false) === -1
                        } />
                    <Column field="ProductName" title="Product Name" width="300px" />
                    <Column field="UnitsInStock" title="Units In Stock" />
                    <Column field="UnitsOnOrder" title="Units On Order" />
                    <Column field="ReorderLevel" title="Reorder Level" />
                </Grid>
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /