User Interaction
The DataGrid UI component supports single and multiple row selection. Use the selection.mode property to change the current mode.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, {
- Selection
- } from 'devextreme-react/data-grid';
- class App extends React.Component {
- render() {
- return (
- <DataGrid ... >
- <Selection mode="single" /> {/* "multiple" | "none" */}
- </DataGrid>
- );
- }
- }
- export default App;
In the single mode, only one row can be selected at a time, while in the multiple mode, several rows can be selected with check boxes that appear in the selection column.
The check box in the column's header selects all rows or only the currently rendered ones, depending on the selectAllMode. Note that clicking this check box selects/deselects only those rows that meet filtering conditions if a filter is applied.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, {
- Selection
- } from 'devextreme-react/data-grid';
- class App extends React.Component {
- render() {
- return (
- <DataGrid ... >
- <Selection
- mode="single"
- selectAllMode="page" /> {/* or "allPages" */}
- </DataGrid>
- );
- }
- }
- export default App;
You can prevent users from selecting all rows by setting the selection.allowSelectAll property to false.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, {
- Selection
- } from 'devextreme-react/data-grid';
- class App extends React.Component {
- render() {
- return (
- <DataGrid ... >
- <Selection
- mode="multiple"
- allowSelectAll={false}
- />
- </DataGrid>
- );
- }
- }
- export default App;
The showCheckBoxesMode the property specifies when the UI component renders checkboxes in the selection column. For example, the following code tells the UI component to never render them, though a user can still select rows using keyboard shortcuts:
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, {
- Selection
- } from 'devextreme-react/data-grid';
- class App extends React.Component {
- render() {
- return (
- <DataGrid ... >
- <Selection
- mode="multiple"
- showCheckBoxesMode="none" /> {/* or "onClick" | "onLongTap" | "always" */}
- </DataGrid>
- );
- }
- }
- export default App;
Single Selection Demo Multiple Selection Demo
See Also
Initial and Runtime Selection
Use the selectedRowKeys property to select rows initially. Note that to access a row by its key, you should specify the DataGrid's keyExpr or the Store's key property.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid from 'devextreme-react/data-grid';
- import DataSource from 'devextreme/data/data_source';
- import 'devextreme/data/array_store';
- // or
- // import 'devextreme/data/odata/store';
- // import 'devextreme/data/custom_store';
- const dataGridDataSource = new DataSource({
- store: {
- // ...
- key: 'id'
- }
- });
- class App extends React.Component {
- selectedRowKeys = [1, 5, 18];
- render() {
- return (
- <DataGrid ...
- dataSource={dataGridDataSource}
- defaultSelectedRowKeys={this.selectedRowKeys}>
- </DataGrid>
- );
- }
- }
- export default App;
The DataGrid provides two methods that select rows at runtime: selectRows(keys, preserve) and selectRowsByIndexes(indexes). They both clear the previous selection by default, although with the selectRows(keys, preserve) method you can keep it if you pass true as the preserve parameter. Before selecting a row, you can call the isRowSelected(key) method to check if this row is not already selected.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid from 'devextreme-react/data-grid';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- selectedRowKeys: []
- }
- this.selectFirstRow = this.selectFirstRow.bind(this);
- this.handleOptionChange = this.handleOptionChange.bind(this);
- }
- selectFirstRow(e) {
- const rowKey = e.component.getKeyByRowIndex(0);
- this.setState(prevState => ({
- selectedRowKeys: [...prevState.selectedRowKeys, rowKey]
- }));
- }
- handleOptionChange(e) {
- if(e.fullName === 'selectedRowKeys') {
- this.setState({
- selectedRowKeys: e.value
- });
- }
- }
- render() {
- return (
- <DataGrid ...
- selectedRowKeys={this.state.selectedRowKeys}
- onContentReady={this.selectFirstRow}
- onOptionChanged={this.handleOptionChange}>
- </DataGrid>
- );
- }
- }
- export default App;
To select all rows at once, call the selectAll() method.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid from 'devextreme-react/data-grid';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.dataGridRef = React.createRef();
- this.selectAllRows = () => {
- this.dataGrid.selectAll();
- }
- }
- get dataGrid() {
- return this.dataGridRef.current.instance();
- }
- render() {
- return (
- <DataGrid ...
- ref={this.dataGridRef}>
- </DataGrid>
- );
- }
- }
- export default App;
Call the getSelectedRowKeys() or getSelectedRowsData() method to get the selected row's keys or data.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid from 'devextreme-react/data-grid';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.dataGridRef = React.createRef();
- this.getSelectedRowKeys = () => {
- return this.dataGrid.getSelectedRowKeys();
- }
- this.getSelectedRowsData = () => {
- return this.dataGrid.getSelectedRowsData();
- }
- }
- get dataGrid() {
- return this.dataGridRef.current.instance();
- }
- render() {
- return (
- <DataGrid ...
- ref={this.dataGridRef}>
- </DataGrid>
- );
- }
- }
- export default App;
See Also
Clear Selection Settings
Call the deselectRows(keys) method to clear the selection of specific rows.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid from 'devextreme-react/data-grid';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- selectedRowKeys: []
- }
- this.deselectRows = this.deselectRows.bind(this);
- this.handleOptionChange = this.handleOptionChange.bind(this);
- }
- deselectRows(keys) {
- let selectedRowKeys = [...this.state.selectedRowKeys];
- keys.forEach(function(item) {
- const index = selectedRowKeys.indexOf(item);
- if (index !== -1) {
- selectedRowKeys.splice(index, 1);
- }
- });
- this.setState({
- selectedRowKeys: selectedRowKeys
- });
- }
- handleOptionChange(e) {
- if(e.fullName === 'selectedRowKeys') {
- this.setState({
- selectedRowKeys: e.value
- });
- }
- }
- render() {
- return (
- <DataGrid ...
- selectedRowKeys={this.state.selectedRowKeys}
- onOptionChanged={this.handleOptionChange}>
- </DataGrid>
- );
- }
- }
- export default App;
Call the clearSelection() method to clear selection of all rows. If you apply a filter and want to keep the selection of invisible rows that do not meet the filtering conditions, use the deselectAll() method. Also call this method to clear selection depending on the selectAllMode.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid from 'devextreme-react/data-grid';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- selectedRowKeys: []
- }
- this.dataGridRef = React.createRef();
- this.deselectAllRows = this.deselectAllRows.bind(this);
- this.deselectVisibleRows = this.deselectVisibleRows.bind(this);
- }
- deselectAllRows() {
- this.setState({
- selectedRowKeys: []
- });
- }
- deselectVisibleRows() {
- this.dataGridRef.current.instance().deselectAll();
- }
- handleOptionChange(e) {
- if(e.fullName === 'selectedRowKeys') {
- this.setState({
- selectedRowKeys: e.value
- });
- }
- }
- render() {
- return (
- <DataGrid ...
- ref="dataGridRef"
- selectedRowKeys={this.state.selectedRowKeys}
- onOptionChanged={this.handleOptionChange}>
- </DataGrid>
- );
- }
- }
- export default App;
See Also
Events
The DataGrid UI component raises the selectionChanged event when a row is selected, or the selection is cleared. If the function that handles this event is going to remain unchanged, assign it to the onSelectionChanged property when you configure the UI component. Note that information on selected and deselected rows is passed to the handler only when selection is not deferred.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid from 'devextreme-react/data-grid';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.onSelectionChanged = this.onSelectionChanged.bind(this);
- }
- onSelectionChanged(e) {
- const currentSelectedRowKeys = e.currentSelectedRowKeys;
- const currentDeselectedRowKeys = e.currentDeselectedRowKeys;
- const allSelectedRowKeys = e.selectedRowKeys;
- const allSelectedRowsData = e.selectedRowsData;
- // ...
- }
- render() {
- return (
- <DataGrid ...
- onSelectionChanged={this.onSelectionChanged}>
- </DataGrid>
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.