DevExtreme jQuery/JS - Selection
User Interaction
The DataGrid widget supports single and multiple row selection. Use the selection.mode option to change the current mode.
jQuery
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
selection: {
mode: "single" // or "multiple" | "none"
}
});
});Angular
<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
],
// ...
})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.
jQuery
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
selection: {
mode: "multiple",
selectAllMode: "page" // or "allPages"
}
});
});Angular
<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
],
// ...
})You can prevent users from selecting all rows by setting the selection.allowSelectAll option to false.
jQuery
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
selection: {
mode: "multiple",
allowSelectAll: false
}
});
});Angular
<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
],
// ...
})The showCheckBoxesMode option specifies when the widget renders check boxes in the selection column. For example, the following code tells the widget to never render them, though a user can still select rows using keyboard shortcuts:
jQuery
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
selection: {
mode: "multiple",
showCheckBoxesMode: "none" // or "onClick" | "onLongTap" | "always"
}
});
});Angular
<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
],
// ...
})Single Selection Demo Multiple Selection Demo
See Also
Initial and Runtime Selection
Use the selectedRowKeys option 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 option.
jQuery
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
dataSource: {
store: {
// ...
key: "id"
}
},
selectedRowKeys: [1, 5, 18]
});
});Angular
<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
],
// ...
})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
var selectSingleRow = function (dataGridInstance, key, preserve) {
if (!dataGridInstance.isRowSelected(key)) {
dataGridInstance.selectRows([key], preserve);
}
}
$("#dataGridContainer").dxDataGrid({
// ...
onContentReady: function (e) {
// Selects the first visible row
e.component.selectRowsByIndexes([0]);
}
}).dxDataGrid("instance");Angular
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>To select all rows at once, call the selectAll() method.
jQuery
dataGrid.selectAll();
Angular
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
],
// ...
})Call the getSelectedRowKeys() or getSelectedRowsData() method to get the selected row's keys or data.
jQuery
var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
var selectedKeys = dataGrid.getSelectedRowKeys();
var selectedData = dataGrid.getSelectedRowsData();Angular
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
],
// ...
})See Also
Clear Selection Settings
Call the deselectRows(keys) method to clear the selection of specific rows.
jQuery
$("#dataGridContainer").dxDataGrid("deselectRows", [1, 4, 10]);Angular
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
],
// ...
})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
var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.deselectAll();
dataGrid.clearSelection();Angular
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
],
// ...
})See Also
- remoteOperations
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Events
The DataGrid widget 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 option when you configure the widget. Note that information on selected and deselected rows is passed to the handler only when selection is not deferred.
jQuery
$(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
<dx-data-grid ...
(onSelectionChanged)="onSelectionChanged($event)">
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
onSelectionChanged (e) { // Handler of the "selectionChanged" event
let currentSelectedRowKeys = e.currentSelectedRowKeys;
let currentDeselectedRowKeys = e.currentDeselectedRowKeys;
let allSelectedRowKeys = e.selectedRowKeys;
let allSelectedRowsData = e.selectedRowsData;
// ...
}
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})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. This approach is more typical of jQuery.
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
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core