React DataGrid - Selection - DevExtreme React Documentation v23.2 (2024)

  • Overview
  • Getting Started
  • UI Components
    • Accordion
    • ActionSheet
    • Autocomplete
    • BarGauge
    • Box
    • Bullet
    • Button
    • ButtonGroup
    • Calendar
    • Chart
    • CheckBox
    • CircularGauge
    • ColorBox
    • ContextMenu
    • DataGrid
      • Getting Started
      • How To
        • Enhance Performance on Large Datasets
        • Columns
        • Editing
        • Sorting
        • Filtering and Searching
        • Paging
        • Scrolling
        • Grouping
        • Selection
          • User Interaction
          • API
            • Initial and Runtime Selection
            • Clear Selection Settings
          • Events
        • Load Panel
        • Master-Detail Interface
        • Summaries
        • Customize the Appearance
        • Custom Keyboard Navigation
        • Focused Row
        • Bind a Lookup Column to a Custom Data Source
        • Customize Header Filter Data Source
        • Dynamically Change Editor Properties in the Editing State
        • Dynamically Change Form Item Properties in the Editing State
      • API
      • Demos
      • Accessibility
    • DateBox
    • DateRangeBox
    • DeferRendering
    • Diagram
    • Draggable
    • Drawer
    • DropDownBox
    • DropDownButton
    • FileManager
    • FileUploader
    • FilterBuilder
    • Floating Action Button
    • Form
    • Funnel
    • Gallery
    • Gantt
    • HtmlEditor
    • LinearGauge
    • List
    • LoadIndicator
    • LoadPanel
    • Lookup
    • Map
    • Menu
    • MultiView
    • NumberBox
    • PieChart
    • PivotGrid
    • PivotGridFieldChooser
    • PolarChart
    • Popover
    • Popup
    • ProgressBar
    • RadioGroup
    • RangeSelector
    • RangeSlider
    • Resizable
    • ResponsiveBox
    • Sankey
    • Scheduler
    • ScrollView
    • SelectBox
    • Slider
    • Sortable
    • Sparkline
    • Switch
    • TabPanel
    • Tabs
    • TagBox
    • TextArea
    • TextBox
    • TileView
    • Toast
    • Toolbar
    • Tooltip
    • TreeList
    • TreeMap
    • TreeView
    • VectorMap
    • Common Types
    • Utilities
  • Data Binding
  • Data Validation
  • Localization and Globalization
  • UI Customization
  • React Application Template
  • DevExtreme CLI
  • Data Analytics and BI
  • .NET Backend Solutions
  • Advanced Topics
  • Troubleshooting
  • Migrate to the New Version

Documentation Menu

  • React Documentation
  • UI Components
  • DataGrid
  • How To
  • Selection
  • React Documentation
  • UI Components
  • DataGrid
  • How To
  • Selection
v24.1 v23.2 v23.1 v22.2 v22.1 v21.2 v21.1 v20.2 v20.1 v19.2 The page you are viewing does not exist inversion 19.2. v19.1 The page you are viewing does not exist inversion 19.1. v18.2 The page you are viewing does not exist inversion 18.2. v18.1 The page you are viewing does not exist inversion 18.1. v17.2 The page you are viewing does not exist inversion 17.2.

NOTE

You must specify the DataGrid's keyExpr or the Store's key property to ensure that selection works properly.

See Also
  • key in ArrayStore | CustomStore | LocalStore | ODataStore

User Interaction

The DataGrid UI component supports single and multiple row selection. Use the selection.mode property to change the current mode.

jQuery

JavaScript

$(function() { $("#dataGridContainer").dxDataGrid({ // ... selection: { mode: "single" // or "multiple" | "none" } });});
Angular

HTML

TypeScript

<dx-data-grid ... > <dxo-selection mode="single"> <!-- "multiple" | "none" --> </dxo-selection></dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";// ...export class AppComponent { // ...}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
Vue

App.vue

<template> <DxDataGrid ... > <DxSelection mode="single" /> <!-- "multiple" | "none" --> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid, { DxSelection} from 'devextreme-vue/data-grid';export default { components: { DxDataGrid, DxSelection }}</script>
React

App.js

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.

React DataGrid - Selection - DevExtreme React Documentation v23.2 (1)

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.

jQuery

JavaScript

$(function() { $("#dataGridContainer").dxDataGrid({ // ... selection: { mode: "multiple", selectAllMode: "page" // or "allPages" } });});
Angular

HTML

TypeScript

<dx-data-grid ... > <dxo-selection mode="multiple" selectAllMode="page"> <!-- or "allPages" --> </dxo-selection></dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";// ...export class AppComponent { // ...}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
Vue

App.vue

<template> <DxDataGrid ... > <DxSelection mode="single" select-all-mode="page" /> <!-- or "allPages" --> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid, { DxSelection} from 'devextreme-vue/data-grid';export default { components: { DxDataGrid, DxSelection }}</script>
React

App.js

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.

jQuery

JavaScript

$(function() { $("#dataGridContainer").dxDataGrid({ // ... selection: { mode: "multiple", allowSelectAll: false } });});
Angular

HTML

TypeScript

<dx-data-grid ... > <dxo-selection mode="multiple" [allowSelectAll]="false"> </dxo-selection></dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";// ...export class AppComponent { // ...}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
Vue

App.vue

<template> <DxDataGrid ... > <DxSelection mode="multiple" :allow-select-all="false" /> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid, { DxSelection} from 'devextreme-vue/data-grid';export default { components: { DxDataGrid, DxSelection }}</script>
React

App.js

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:

jQuery

JavaScript

$(function() { $("#dataGridContainer").dxDataGrid({ // ... selection: { mode: "multiple", showCheckBoxesMode: "none" // or "onClick" | "onLongTap" | "always" } });});
Angular

HTML

TypeScript

<dx-data-grid ... > <dxo-selection mode="multiple" showCheckBoxesMode="none"> <!-- or "onClick" | "onLongTap" | "always" --> </dxo-selection></dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";// ...export class AppComponent { // ...}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
Vue

App.vue

<template> <DxDataGrid ... > <DxSelection mode="multiple" :show-check-boxes-mode="none" /> <!-- or "onClick" | "onLongTap" | "always" --> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid, { DxSelection} from 'devextreme-vue/data-grid';export default { components: { DxDataGrid, DxSelection }}</script>
React

App.js

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 DemoMultiple Selection Demo

See Also
  • remoteOperations
  • Deferred Selection

API

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.

jQuery

JavaScript

$(function() { $("#dataGridContainer").dxDataGrid({ // ... dataSource: { store: { // ... key: "id" } }, selectedRowKeys: [1, 5, 18] });});
Angular

HTML

TypeScript

<dx-data-grid [dataSource]="dataGridDataSource" [selectedRowKeys]="[1, 5, 18]"></dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";import DataSource from "devextreme/data/data_source";import "devextreme/data/array_store";// or// import "devextreme/data/odata/store";// import "devextreme/data/custom_store";// ...export class AppComponent { dataGridDataSource = new DataSource({ store: { // ... key: "id" } });}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
Vue

App.vue

<template> <DxDataGrid ... :data-source="dataGridDataSource" :selected-row-keys="[1, 5, 18]"> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid from 'devextreme-vue/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' }});export default { components: { DxDataGrid }, data() { return { dataGridDataSource } }}</script>
React

App.js

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.

jQuery

JavaScript

var selectSingleRow = function (dataGridInstance, key, preserve) { if (!dataGridInstance.isRowSelected(key)) { dataGridInstance.selectRows([key], preserve); }}

JavaScript

$("#dataGridContainer").dxDataGrid({ // ... onContentReady: function (e) { // Selects the first visible row e.component.selectRowsByIndexes([0]); }}).dxDataGrid("instance");
Angular

TypeScript

HTML

import { ..., ViewChild } from "@angular/core";import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";// ...export class AppComponent { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; // Prior to Angular 8 // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent; selectSingleRow (key, preserve) { if (!this.dataGrid.instance.isRowSelected(key)) { this.dataGrid.instance.selectRows([key], preserve); } } onContentReadyHandler (e) { // Selects the first visible row e.component.selectRowsByIndexes([0]); }}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
<dx-data-grid ... (onContentReady)="onContentReadyHandler($event)"></dx-data-grid>
Vue

App.vue

<template> <DxDataGrid ... v-model:selected-row-keys="selectedRowKeys" @content-ready="selectFirstRow"> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid from 'devextreme-vue/data-grid';export default { components: { DxDataGrid }, data() { return { selectedRowKeys: [] } }, methods: { selectFirstRow(e) { const rowKey = e.component.getKeyByRowIndex(0); this.selectedRowKeys = [...this.selectedRowKeys, rowKey]; } }}</script>
React

App.js

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.

jQuery

JavaScript

dataGrid.selectAll();
Angular

TypeScript

import { ..., ViewChild } from "@angular/core";import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";// ...export class AppComponent { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; // Prior to Angular 8 // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent; selectAllRows () { this.dataGrid.instance.selectAll(); }}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
Vue

App.vue

<template> <DxDataGrid ... :ref="dataGridRefKey"> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid from 'devextreme-vue/data-grid';const dataGridRefKey = 'my-data-grid';export default { components: { DxDataGrid }, data() { return { dataGridRefKey } }, methods: { selectAllRows() { this.dataGrid.selectAll(); } }, computed: { dataGrid: function() { return this.$refs[dataGridRefKey].instance; } }}</script>
React

App.js

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;

View Demo

Call the getSelectedRowKeys() or getSelectedRowsData() method to get the selected row's keys or data.

jQuery

JavaScript

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");var selectedKeys = dataGrid.getSelectedRowKeys();var selectedData = dataGrid.getSelectedRowsData();
Angular

TypeScript

import { ..., ViewChild } from "@angular/core";import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";// ...export class AppComponent { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; // Prior to Angular 8 // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent; getSelectedRowKeys () { return this.dataGrid.instance.getSelectedRowKeys(); } getSelectedRowsData () { return this.dataGrid.instance.getSelectedRowsData(); }}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
Vue

App.vue

<template> <DxDataGrid ... :ref="dataGridRefKey"> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid from 'devextreme-vue/data-grid';const dataGridRefKey = 'my-data-grid';export default { components: { DxDataGrid }, data() { return { dataGridRefKey } }, methods: { getSelectedRowKeys() { return this.dataGrid.getSelectedRowKeys(); }, getSelectedRowsData() { return this.dataGrid.getSelectedRowsData(); } }, computed: { dataGrid: function() { return this.$refs[dataGridRefKey].instance; } }}</script>
React

App.js

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
  • Deferred Selection

Clear Selection Settings

Call the deselectRows(keys) method to clear the selection of specific rows.

jQuery

JavaScript

$("#dataGridContainer").dxDataGrid("deselectRows", [1, 4, 10]);
Angular

TypeScript

import { ..., ViewChild } from "@angular/core";import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";// ...export class AppComponent { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; // Prior to Angular 8 // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent; deselectRows (keys) { this.dataGrid.instance.deselectRows(keys); }}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
Vue

App.vue

<template> <DxDataGrid ... v-model:selected-row-keys="selectedRowKeys"> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid from 'devextreme-vue/data-grid';export default { components: { DxDataGrid }, data() { return { selectedRowKeys: [] } }, methods: { deselectRows(keys) { let selectedRowKeys = this.selectedRowKeys; keys.forEach(function(item) { const index = selectedRowKeys.indexOf(item); if (index !== -1) { const newRowKeys = [...this.selectedRowKeys]; newRowKeys.splice(index, 1); this.selectedRowKeys = newRowKeys; } }); } }}</script>
React

App.js

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.

jQuery

JavaScript

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");dataGrid.deselectAll();dataGrid.clearSelection();
Angular

TypeScript

import { ..., ViewChild } from "@angular/core";import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";// ...export class AppComponent { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; // Prior to Angular 8 // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent; deselectVisibleRows () { this.dataGrid.instance.deselectAll(); } deselectAllRows () { this.dataGrid.instance.clearSelection(); }}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
Vue

App.vue

<template> <DxDataGrid ... ref="dataGrid" v-model:selected-row-keys="selectedRowKeys"> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid from 'devextreme-vue/data-grid';export default { components: { DxDataGrid }, data() { return { selectedRowKeys: [] } }, methods: { deselectAllRows() { this.selectedRowKeys = []; }, deselectVisibleRows() { this.$refs['dataGrid'].instance.deselectAll(); } }}</script>
React

App.js

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;

View Demo

See Also
  • remoteOperations
jQuery
  • Call Methods
Angular
  • Call Methods
Vue
  • Call Methods
React
  • Call Methods

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.

jQuery

JavaScript

$(function() { $("#dataGridContainer").dxDataGrid({ onSelectionChanged: function(e) { // Handler of the "selectionChanged" event var currentSelectedRowKeys = e.currentSelectedRowKeys; var currentDeselectedRowKeys = e.currentDeselectedRowKeys; var allSelectedRowKeys = e.selectedRowKeys; var allSelectedRowsData = e.selectedRowsData; // ... } });});
Angular

HTML

TypeScript

<dx-data-grid ... (onSelectionChanged)="onSelectionChanged($event)"></dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";// ...export class AppComponent { onSelectionChanged (e) { // Handler of the "selectionChanged" event const currentSelectedRowKeys = e.currentSelectedRowKeys; const currentDeselectedRowKeys = e.currentDeselectedRowKeys; const allSelectedRowKeys = e.selectedRowKeys; const allSelectedRowsData = e.selectedRowsData; // ... }}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})
Vue

App.vue

<template> <DxDataGrid ... @selection-changed="onSelectionChanged"> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid from 'devextreme-vue/data-grid';export default { components: { DxDataGrid }, methods: { onSelectionChanged(e) { const currentSelectedRowKeys = e.currentSelectedRowKeys; const currentDeselectedRowKeys = e.currentDeselectedRowKeys; const allSelectedRowKeys = e.selectedRowKeys; const allSelectedRowsData = e.selectedRowsData; // ... } }}</script>
React

App.js

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;
jQuery

If you are going to change the event handler at runtime, or if you need to attach several handlers to the event, subscribe to it using the on(eventName, eventHandler) method.

JavaScript

var selectionChangedEventHandler1 = function(e) { // First handler of the "selectionChanged" event};var selectionChangedEventHandler2 = function(e) { // Second handler of the "selectionChanged" event};$("#dataGridContainer").dxDataGrid("instance") .on("selectionChanged", selectionChangedEventHandler1) .on("selectionChanged", selectionChangedEventHandler2);
See Also
jQuery
  • Handle Events
Angular
  • Event Handling
Vue
  • Event Handling
React
  • Event Handling

Was this topic helpful?

Feel free toshare topic-related thoughts here.
Ifyou have technical questions, please create asupport ticket inthe DevExpress Support Center.

Thank you for the feedback!

React DataGrid - Selection - DevExtreme React Documentation v23.2 (2024)

FAQs

What is DataGrid in react? ›

A Data Grid is an essential element for any data-driven application. It renders data in rows and columns and enables users to interact with that data in various ways. The React data grid is a high-performance component that is useful for displaying data in a tabular format.

What is DevExtreme grid? ›

DevExtreme JavaScript DataGrid is a client-side grid control available as a jQuery component. This control supports binding to data from local arrays, JSON files, Web API and OData services, as well as custom remote services.

Is DevExpress React free? ›

DevExtreme React UI Components are released as an MIT-licensed (free and open-source) add-on to DevExtreme.

What is the difference between DataGrid and table in React? ›

Data Grid Features

Differences start already at basic functionality, like scrolling. While a table would not offer much more than a sticky header, usually showing the column definitions, the data grid can be much more sophisticated. The same pattern continues to sort (multi-column with precedence) and data selection.

What is the difference between grid and DataGrid? ›

A Grid is a control for laying out other controls on the form (or page). A DataGrid is a control for displaying tabular data as read from a database for example.

What is the difference between DevExpress and DevExtreme? ›

While both are server-side ASP.NET MVC controls, the DevExtreme MVC Controls will render client-side UI because of they wrap client-side DevExtreme JavaScript controls in ASP.NET MVC controls. On the other hand, the DevExpress ASP.NET MVC controls will render server-side HTML and then deliver this to the client.

Is DevExtreme worth it? ›

DevExtreme is really the best JavaScript component suite for those who need to create modern web applications!

Why use DevExtreme? ›

DevExtreme is a set of enterprise-ready UI component suites for Angular, React, Vue, and jQuery. It is everything you need to create responsive web apps for touch devices and traditional desktops: data grid, interactive charts, data editors, navigation and multi-purpose widgets.

How do I use my DevExpress license? ›

Log in to the Developer Express Inc website and select My Account | Manage & Assign Licenses where you can assign a particular license to a given email address (that's how we differentiate between developers). You also assign a password at the same time.

How to use DevExpress in Visual Studio? ›

Use a DevExpress Template to Create a New Project

In Visual Studio, press Ctrl+Shift+N or select File → New → Project… to create a project. In the invoked dialog, select DevExpress Web Site Template Gallery and click Next. Configure project settings and click Create.

Can you use Express in react app? ›

Conclusion In this article, we explored the step-by-step process of connecting Express with React. We set up an Express server, created a React application, and established communication between the two. By following these steps, you can build powerful full-stack web applications with ease.

References

Top Articles
Latest Posts
Article information

Author: Aron Pacocha

Last Updated:

Views: 6112

Rating: 4.8 / 5 (48 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Aron Pacocha

Birthday: 1999-08-12

Address: 3808 Moen Corner, Gorczanyport, FL 67364-2074

Phone: +393457723392

Job: Retail Consultant

Hobby: Jewelry making, Cooking, Gaming, Reading, Juggling, Cabaret, Origami

Introduction: My name is Aron Pacocha, I am a happy, tasty, innocent, proud, talented, courageous, magnificent person who loves writing and wants to share my knowledge and understanding with you.