@progress/kendo-grid-react-wrapper/docs/selection.md

Kendo UI Grid wrapper for React

---
title: Selection
page_title: React Grid Wrapper - Selection - Kendo UI
description: "Get started with the selection functionality of the Grid wrapper for React."
slug: selection_grid
position: 4
---

# Selection

The Grid allows the user to select single or multiple rows.

By default, the single-row selection option of the Grid is disabled. To enable the single-row selection functionality, set the [`selectable`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/selectable) option of the Grid to `true`.

```sh
<Grid selectable={true} //other configuration
/>
```

The `selectable` option also accepts the following values:

* `row`
* `cell`
* `multiple row`
* `multiple cell`

As of the Kendo UI R2 2017 SP1 release, the Grid provides the [`columns.selectable`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.selectable) property, which enables multiple selection through a checkbox column. When enabled, the `selectable` property of a column also renders a checkbox in the header and allows the selection and deselection of all rows on the current page.

> * The built-in checkbox selection, which is enabled through the [`selectable`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/selectable) option, is not integrated with the selection functionality of the Grid. They are mutually exclusive and to enable the selection, it is recommended to use either of the approaches.
> * Selection is not persisted when the Grid is rebound&mdash;that is, when paging, filtering, sorting, editing, or virtual scrolling occurs&mdash;unless the [`persistSelection`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/persistselection) property is enabled. The `persistSelection` option is applicable for row selection only.
> * Selection performance may decrease when the page size is too large or paging is not used while at the same time the Grid is rendering hundreds or thousands of items. This behavior most frequently occurs in Internet Explorer. Grouping, hierarchy, and frozen columns also have a negative impact on the selection performance, because these features make the HTML output of the Grid more complex. As a result, it is recommended that you use paging with a reasonable page size.

For more information on selection, refer to the documentation of the [Kendo UI Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/walkthrough#configuration-Selection).

{% meta height:460 %}
```jsx-preview
class GridContainer extends React.Component {
    constructor(props) {
        super(props);

        this.dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url:"https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: "jsonp"
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });
    }

    render() {
        return (
            <Grid dataSource={this.dataSource}
                selectable={true} height={400}>
                <GridColumn field="ProductName" title="Product Name" />
                <GridColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="120px" />
                <GridColumn field="UnitsInStock" title="Units in Stock" width="120px" />
                <GridColumn field="Discontinued" width="120px" />
            </Grid>
        );
    }
}

ReactDOM.render(
    <GridContainer />,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Suggested Links

* [Kendo UI Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview)
* [API Reference of the Grid Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)