<!-- Export to Excel -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.1.1/exceljs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
    <!-- Reference the DevExtreme sources here -->
</head>
<!-- Export to Pdf -->
    <!-- ... -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
    <!-- Reference the DevExtreme sources here -->
</head>

import { useCallback } from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid from 'devextreme-react/data-grid';
export default function App() {
    const onAdaptiveDetailRowPreparing = useCallback((e) => {
        e.formOptions.colCount = 2;
        e.formOptions.colCountByScreen = {
            xs: 2
        e.formOptions.labelLocation = 'left';
    }, []);
    return (
        <DataGrid
            onAdaptiveDetailRowPreparing={onAdaptiveDetailRowPreparing}
See Also
columnHidingEnabled
columns[].hidingPriority
Adaptability
Customize Adaptive Detail Row
The index of the column to which the cell belongs. For details on indexes, see the Column and Row Indexes topic.
            component:
            
DataGrid
The cell's displayed value. Differs from the value field only when the column to which the clicked cell belongs uses lookup.
            element:
            
HTMLElement | jQuery
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            event:
            
Event (jQuery or EventObject)
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
The row's key. If a field providing keys is not specified in the data source, the whole data object is considered the key.
            
DataGrid Row
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
            rowType:
            
String
The index of the column the cell belongs to. For details on indexes, see the Column and Row Indexes topic.
            component:
            
DataGrid
The data of the row the cell belongs to. Available if the rowType is "data", "detail", or "detailAdaptive".
            displayValue:
The value displayed in the cell. Available if the rowType is "data" or "group".

Differs from the value field only when the cell belongs to a lookup column.
            element:
            
HTMLElement | jQuery
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            event:
            
Event (jQuery or EventObject)
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
The row's key or a group row's key. Available if the rowType is "data", "detail", "detailAdaptive", or "group".
            
DataGrid Row
The row's properties. Available if the rowType is "data", "detail", "detailAdaptive", or "group".
            rowIndex:
            
Number
The cell's formatted value converted to a string. Available if the rowType is "data" or "group".
            value:
The cell's raw value. Available if the rowType is "data" or "group".
The index of the column to which the cell belongs. For details on indexes, see the Column and Row Indexes topic.
            component:
            
DataGrid
The cell's displayed value. Differs from the value field only when the column to which the current cell belongs uses lookup.
            element:
            
HTMLElement | jQuery
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            eventType:
            
String
Indicates whether the pointer entered or left the cell. Can be either "mouseover" or "mouseout".
The row's key. If a field providing keys is not specified in the data source, the whole data object is considered the key.
            
DataGrid Row
The data of the row to which the cell belongs. Unavailable if rowType is "header", "filter", or "totalFooter".
            displayValue:
The cell's displayed value. Available if the rowType is "data".

Differs from the value field only when the column to which the prepared cell belongs uses lookup.
            element:
            
HTMLElement | jQuery
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            isExpanded:
            
Boolean
Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "group".
            isNewRow:
            
Boolean
The row's key. Unavailable if rowType is "header", "filter", or "totalFooter".

If a field providing keys is not specified in the data source, the whole data object is considered the key.
            oldValue:
The cell's previous raw value. Defined only if repaintChangesOnly is true.
            
DataGrid Row
Allows you to track a variable and execute actions when it changes. Applies when repaintChangesOnly is true.

This function has the following parameters:     
getter(data): Function

A function that returns the variable that should be tracked.
handler(newValue): Function

A function called when this variable changes.
In the following code, the onCellPrepared function is used to change a ProductName's color depending on the Amount of sold products. You can paste this code in the Real-Time Updates demo and see how it works.
jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        repaintChangesOnly: true,
        onCellPrepared: function(e) {
            if(e.rowType === "data" && e.column.dataField === "ProductName") {
                e.cellElement.css("color", e.data.Amount >= 10000 ? "green" : "red");
                // Tracks the `Amount` data field
                e.watch(function() {
                    return e.data.Amount;
                }, function() {
                    e.cellElement.css("color", e.data.Amount >= 10000 ? "green" : "red");
Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    onCellPrepared(e) {
        if(e.rowType === "data" && e.column.dataField === "ProductName") {
            e.cellElement.style.color = e.data.Amount >= 10000 ? "green" : "red";
            // Tracks the `Amount` data field
            e.watch(function() {
                return e.data.Amount;
            }, function() {
                e.cellElement.style.color = e.data.Amount >= 10000 ? "green" : "red";
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    // ...
<dx-data-grid ...
    [repaintChangesOnly]="true"
    (onCellPrepared)="onCellPrepared($event)">
</dx-data-grid>
App.vue
<template>
    <DxDataGrid
        :repaint-changes-only="true"
        @cell-prepared="onCellPrepared"
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DataGrid from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid
    methods: {
       onCellPrepared(e) {
            if(e.rowType === "data" && e.column.dataField === "ProductName") {
                e.cellElement.style.color = e.data.Amount >= 10000 ? "green" : "red";
                // Tracks the `Amount` data field
                e.watch(function() {
                    return e.data.Amount;
                }, function() {
                    e.cellElement.style.color = e.data.Amount >= 10000 ? "green" : "red";
</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 {
    // ...
    render() {
        return (
            <DataGrid
                 repaintChangesOnly={true}
                 onCellPrepared={this.onCellPrepared}
    onCellPrepared = (e) => {
        if(e.rowType === "data" && e.column.dataField === "ProductName") {
            e.cellElement.style.color = e.data.Amount >= 10000 ? "green" : "red";
            // Tracks the `Amount` data field
            e.watch(function() {
                return e.data.Amount;
            }, function() {
                e.cellElement.style.color = e.data.Amount >= 10000 ? "green" : "red";
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    .ID("dataGridContainer")
    // ...
    .RepaintChangesOnly(true)
    .OnCellPrepared("dataGrid_cellPrepared_handler")
<script>
    function dataGrid_cellPrepared_handler(e) {
        if (e.rowType === "data" && e.column.dataField === "ProductName") {
            e.cellElement.css("color", e.data.Amount >= 10000 ? "green" : "red");
            // Tracks the `Amount` data field
            e.watch(function() {
                return e.data.Amount;
            }, function() {
                e.cellElement.css("color", e.data.Amount >= 10000 ? "green" : "red");
</script>
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
The index of the column on which the context menu is invoked. For details on indexes, see the following help topic: Column and Row Indexes.
            component:
            
DataGrid
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            items:
            
Array<Object>
Items to be displayed in the context menu. Their structure is described in the items property description. Each item also contains the onItemClick event handler, which allows you to access the clicked or tapped item's data.
            
DataGrid Row
The index of the row on which the context menu is invoked. Refer to the following help topic for more information: Column and Row Indexes.
            target:
            
String
The name of the element on which the context menu is invoked: "headerPanel", "header", "content", or "footer". This field is read-only.
            targetElement:
            
HTMLElement | jQuery
In the following code, the onContextMenuPreparing function adds a custom item to the context menu invoked when a user right-clicks any column header:
jQuery
index.js




    
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onContextMenuPreparing: function(e) { 
            if (e.target == "header") {
                // e.items can be undefined
                if (!e.items) e.items = [];
                // Add a custom menu item
                e.items.push({
                    text: "Log Column Caption",
                    onItemClick: function() {
                        console.log(e.column.caption);
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ...
    (onContextMenuPreparing)="addMenuItems($event)">
</dx-data-grid>
import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    addMenuItems(e) { 
        if (e.target == 'header') {
            // e.items can be undefined
            if (!e.items) e.items = [];
            // Add a custom menu item
            e.items.push({
                text: 'Log Column Caption',
                onItemClick: () => {
                    console.log(e.column.caption);
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxDataGridModule } from 'devextreme-angular';
@NgModule({
    declarations: [
        AppComponent
    imports: [
        BrowserModule,
        DxDataGridModule
    providers: [ ],
    bootstrap: [AppComponent]
export class AppModule { }
App.vue
<template>
    <DxDataGrid ...
        @context-menu-preparing="addMenuItems">
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid
    data() {
        return {
            // ...
    methods: {
        addMenuItems(e) {
            if (e.target == 'header') {
                // e.items can be undefined
                if (!e.items) e.items = [];
                // Add a custom menu item
                e.items.push({
                    text: 'Log Column Caption',
                    onItemClick: () => {
                        console.log(e.column.caption);
</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 {
    addMenuItems(e) {
        if (e.target == 'header') {
            // e.items can be undefined
            if (!e.items) e.items = [];
            // Add a custom menu item
            e.items.push({
                text: 'Log Column Caption',
                onItemClick: () => {
                    console.log(e.column.caption);
    render() {
        return (
            <DataGrid ...
                onContextMenuPreparing={this.addMenuItems}>
            </DataGrid>
export default App;
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
The configuration of the column whose cell is switching to the editing state. Available in the "cell" and "batch" editing modes.
            component:
            
DataGrid
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
The row's key. The key of an added but not yet saved row is undefined.

If a field providing keys is not specified in the data source, the whole data object is considered the key.
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            parentType:
            
String
The editor's location. One of "dataRow", "filterRow", "headerRow" or "searchPanel".

Options passed to the function depend on this value.
            readOnly:
            
Boolean
A method you should call to change the cell value and, optionally, the displayed value after the editor's value is changed.
            updateValueTimeout:
            
Number
Gets and sets the delay between when a user stops typing a filter value and the change is applied. Available if the parentType is "filterRow" or "searchPanel".
            value:
The editor's value.
            width:
            
Number
Allows you to cancel the editor's creation.

You can set this field's value to true and implement a custom editor.
            component:
            
DataGrid
Allows you to change the editor. Accepts names of DevExtreme UI components only, for example, "dxTextBox".

Import a new editor's module when DevExtreme modules are used.
            editorOptions:
            
Object
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            parentType:
            
String
The editor's location. One of "dataRow", "filterRow", "headerRow" or "searchPanel".

Properties passed to the function depend on this value.
            readOnly:
            
Boolean
A method you should call to change the cell value and, optionally, the displayed value after the editor's value is changed.
            updateValueTimeout:
            
Number
Gets and sets the delay between when a user stops typing a filter value and the change is applied. Available if the parentType is "filterRow" or "searchPanel".
            value:
The editor's value. This field is read-only. To change the editor's value, use the setValue(newValue, newText) function parameter.
            width:
            
Number
Override the default editor's onValueChanged handler. For other default editor customizations, use editorOptions.
jQuery
index.js
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onEditorPreparing: function(e) {
            if (e.dataField === "requiredDataField" && e.parentType === "dataRow") {
                const defaultValueChangeHandler = e.editorOptions.onValueChanged;
                e.editorOptions.onValueChanged = function(args) { // Override the default handler
                    // ...
                    // Custom commands go here
                    // ...
                    // If you want to modify the editor value, call the setValue function:
                    // e.setValue(newValue);
                    // Otherwise, call the default handler:
                    defaultValueChangeHandler(args);
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ...
    (onEditorPreparing)="overrideOnValueChanged($event)">
</dx-data-grid>
import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    overrideOnValueChanged(e) {
        if (e.dataField === 'requiredDataField' && e.parentType === 'dataRow') {
            const defaultValueChangeHandler = e.editorOptions.onValueChanged;
            e.editorOptions.onValueChanged = function (args) { // Override the default handler
                // ...
                // Custom commands go here
                // ...
                // If you want to modify the editor value, call the setValue function:
                // e.setValue(newValue);
                // Otherwise, call the default handler:
                defaultValueChangeHandler(args);
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxDataGridModule } from 'devextreme-angular';
@NgModule({
    declarations: [
        AppComponent
    imports: [
        BrowserModule,
        DxDataGridModule
    providers: [],
    bootstrap: [AppComponent]
export class AppModule { }
App.vue
<template>
    <DxDataGrid ...
        @editor-preparing="overrideOnValueChanged">
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid
    // ...
    methods: {
        overrideOnValueChanged(e) {
            if (e.dataField === 'requiredDataField' && e.parentType === 'dataRow') {
                const defaultValueChangeHandler = e.editorOptions.onValueChanged;
                e.editorOptions.onValueChanged = function (args) { // Override the default handler
                    // ...
                    // Custom commands go here
                    // ...
                    // If you want to modify the editor value, call the setValue function:
                    // e.setValue(newValue);
                    // Otherwise, call the default handler:
                    defaultValueChangeHandler(args);
</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 {
    overrideOnValueChanged(e) {
        if (e.dataField === 'requiredDataField' && e.parentType === 'dataRow') {
            const defaultValueChangeHandler = e.editorOptions.onValueChanged;
            e.editorOptions.onValueChanged = function (args) { // Override the default handler
                // ...
                // Custom commands go here
                // ...
                // If you want to modify the editor value, call the setValue function:
                // e.setValue(newValue);
                // Otherwise, call the default handler:
                defaultValueChangeHandler(args);
    render() {
        return (
            <DataGrid ...
                onEditorPreparing={this.overrideOnValueChanged}>
            </DataGrid>
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    // ...
    .OnEditorPreparing("overrideOnValueChanged")
<script type="text/javascript">
    function overrideOnValueChanged(e) {
        if (e.dataField === "requiredDataField" && e.parentType === "dataRow") {
            const defaultValueChangeHandler = e.editorOptions.onValueChanged;
            e.editorOptions.onValueChanged = function(args) { // Override the default handler
                // ...
                // Custom commands go here
                // ...
                // If you want to modify the editor value, call the setValue function:
                // e.setValue(newValue);
                // Otherwise, call the default handler:
                defaultValueChangeHandler(args);
</script>
Customize editors used in the search panel, filter row, and selection column.

Use the parentType function parameter to check if the editor that the function customizes belongs to one of these UI elements.
Dynamically change editor properties in the editing state.
Implement other customization cases.
We do not recommend that you use the onEditorPreparing function to specify an editor's default value. Use the onInitNewRow function instead.
This function has the highest priority over the other editing tools. The order of priority is as follows: onEditorPreparing > columns.formItem > editing.form.
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            fileName:
            
String
You can use this function to adjust column properties before export. In the following code, the column.visible property's value is changed to export the hidden ID column to an Excel file.  
jQuery
JavaScript




    
$(function() {
    $('#gridContainer').dxDataGrid({
        // ...
        export: {
            enabled: true
        columns: [{
            dataField: 'ID',
            visible: false
            // ...
        onExporting: function(e) { 
            e.component.beginUpdate();
            e.component.columnOption('ID', 'visible', true);
            var workbook = new ExcelJS.Workbook(); 
            var worksheet = workbook.addWorksheet('Main sheet');
            DevExpress.excelExporter.exportDataGrid({
                component: e.component,
                worksheet: worksheet
            }).then(function() {
                workbook.xlsx.writeBuffer().then(function(buffer) {
                    saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
            }).then(function() {
                e.component.columnOption('ID', 'visible', false);
                e.component.endUpdate();
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ...
    (onExporting)="onExporting($event)">
    <dxo-export [enabled]="true"></dxo-export>
    <dxi-column dataField="ID" [visible]="false"></dxi-column>
</dx-data-grid>
import { Component } from '@angular/core';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'exceljs';
import saveAs from 'file-saver';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    onExporting(e) {
        e.component.beginUpdate();
        e.component.columnOption('ID', 'visible', true);
        const workbook = new Workbook();
        const worksheet = workbook.addWorksheet('Employees');
        exportDataGrid({
            component: e.component,
            worksheet: worksheet
        }).then(function() {
            workbook.xlsx.writeBuffer().then(function(buffer: BlobPart) {
                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
        }).then(function() {
            e.component.columnOption('ID', 'visible', false);
            e.component.endUpdate();
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxDataGridModule } from 'devextreme-angular';
@NgModule({
    declarations: [
        AppComponent
    imports: [
        BrowserModule,
        DxDataGridModule
    providers: [ ],
    bootstrap: [AppComponent]
export class AppModule { }
App.vue
<template>
    <DxDataGrid ...
        @exporting="onExporting">
        <DxExport :enabled="true" />
        <DxColumn data-field="ID" :visible="false" />
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxDataGrid, DxExport, DxColumn } from 'devextreme-vue/data-grid';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'exceljs';
import saveAs from 'file-saver';
export default {
    components: {
        DxDataGrid,
        DxExport,
        DxColumn
    methods: {
        onExporting(e) {
            e.component.beginUpdate();
            e.component.columnOption('ID', 'visible', true);
            const workbook = new Workbook();
            const worksheet = workbook.addWorksheet('Employees');
            exportDataGrid({
                component: e.component,
                worksheet: worksheet
            }).then(function() {
                workbook.xlsx.writeBuffer().then(function(buffer) {
                    saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
            }).then(function() {
                e.component.columnOption('ID', 'visible', false);
                e.component.endUpdate();
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Workbook } from 'exceljs';
import saveAs from 'file-saver';
import DataGrid, { Export, Column } from 'devextreme-react/data-grid';
import { exportDataGrid } from 'devextreme/excel_exporter';
class App extends React.Component {
    render() {
        return (
            <DataGrid ...
                onExporting={this.onExporting}>
                <Export enabled={true} />
                <Column dataField="ID" visible={false} />
            </DataGrid>
    onExporting(e) {
        e.component.beginUpdate();
        e.component.columnOption('ID', 'visible', true);
        const workbook = new Workbook();
        const worksheet = workbook.addWorksheet('Employees');
        exportDataGrid({
            component: e.component,
            worksheet: worksheet
        }).then(function() {
            workbook.xlsx.writeBuffer().then(function(buffer) {
                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
        }).then(function() {
            e.component.columnOption('ID', 'visible', false);
            e.component.endUpdate();
export default App;
Export to Excel Overview Demo
Export to PDF Overview Demo
See Also
export
The focused cell's container. It is an HTML Element or a jQuery Element when you use jQuery.
            column:
            
DataGrid Column
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            
DataGrid Row
The to-be-focused cell's container. It is an HTML Element or a jQuery Element when you use jQuery.
            columns:
            
Array<DataGrid Column>
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            event:
            
Event (jQuery or EventObject)
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
            isHighlighted:
            
Boolean
true if the cell is highlighted; otherwise false, even if the cell's row is highlighted.
            newColumnIndex:
            
Number
In the following code, the onFocusedCellChanging function is used to customize keyboard navigation within a row. The cell navigation is looped in a single row because focus moves to the row's first cell after reaching the last cell and vice versa:
jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onFocusedCellChanging: function (e) {
            if (e.newColumnIndex == e.prevColumnIndex) {
                e.newColumnIndex = (e.newColumnIndex == 0 ? e.columns.length - 1 : 0)
Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    onFocusedCellChanging (e) { 
        if (e.newColumnIndex == e.prevColumnIndex) {
            e.newColumnIndex = (e.newColumnIndex == 0 ? e.columns.length - 1 : 0)
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    // ...
<dx-data-grid ...
    (onFocusedCellChanging)="onFocusedCellChanging($event)">
</dx-data-grid>
App.vue
<template>
    <DxDataGrid ...
        @focused-cell-changing="onFocusedCellChanging"
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxDataGrid } from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid
    methods: {
        onFocusedCellChanging(e) {
            if (e.newColumnIndex == e.prevColumnIndex) {
                e.newColumnIndex = (e.newColumnIndex == 0 ? e.columns.length - 1 : 0);
</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 {
    render() {
        return (
            <DataGrid ...
                onFocusedCellChanging={this.onFocusedCellChanging}
            </DataGrid>
    onFocusedCellChanging(e) { 
        if (e.newColumnIndex == e.prevColumnIndex) {
            e.newColumnIndex = (e.newColumnIndex == 0 ? e.columns.length - 1 : 0);
export default App;
See Also
focusedRowIndex | focusedRowKey
focusedColumnIndex
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            
DataGrid Row
The focused row's container. It is an HTML Element or a jQuery Element when you use jQuery.
            rowIndex:
            
Number
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            event:
            
Event (jQuery or EventObject)
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
            newRowIndex:
            
Number
The to-be-focused row's container. It is an HTML Element or a jQuery Element when you use jQuery.
            rows:
            
Array<DataGrid Row>
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
app.component.html
app.component.ts
<dx-data-grid ...
    (onInitialized)="saveInstance($event)">
</dx-data-grid>
import { Component } from "@angular/core";
import DataGrid from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    dataGridInstance: DataGrid;
    saveInstance (e) {
        this.dataGridInstance = e.component;
App.vue (Options API)
App.vue (Composition API)
<template>
        <DxDataGrid ...
            @initialized="saveInstance">
        </DxDataGrid>
</template>
<script>
import DxDataGrid from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid
    data: function() {
        return {
            dataGridInstance: null
    methods: {
        saveInstance: function(e) {
            this.dataGridInstance = e.component;
</script>
<template>
        <DxDataGrid ...
            @initialized="saveInstance">
        </DxDataGrid>
</template>
<script setup>
import DxDataGrid from 'devextreme-vue/data-grid';
let dataGridInstance = null;
const saveInstance = (e) => {
    dataGridInstance = e.component;
</script>
React
App.js
import DataGrid from 'devextreme-react/data-grid';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.saveInstance = this.saveInstance.bind(this);
    saveInstance(e) {
        this.dataGridInstance = e.component;
    render() {
        return (
                <DataGrid onInitialized={this.saveInstance} />
See Also
jQuery
Get a UI component Instance in jQuery
Angular
Get a UI component Instance in Angular
Get a UI component Instance in Vue
React
Get a UI component Instance in React
Assign a Promise to this field to perform an asynchronous operation, such as a request to a server.
            data:
            
Object
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
You can use this function to populate a new row with data. Add fields to the data object that correspond to the data source object's fields. Note that the data object can omit some fields from the data source object. Add only those fields that should initialize specific cells of a new row.
DataGrid Demo
TreeList Demo
In the following code, the onInitNewRow function is used to provide default values for the new row's ID, hireDate, and position cells. The promise parameter is used to obtain values for the ID and position cell values asynchronously:
jQuery
index.js




    
$(function() {
    $("#dataGridContainer").dxDataGrid({
        dataSource: [{
            ID: 1,
            hireDate: 1491821760000,
            position: "CTO"
        }, // ...
        columns: [ "ID", {
            dataField: "hireDate",
            dataType: "date"
        }, "position" ],
        onInitNewRow: function(e) {
            e.data.hireDate = new Date();
            e.promise = getDefaultData().done(function(data) {
                e.data.ID = data.ID;
                e.data.position = data.Position;
    function getDefaultData() {
        var promise = $.ajax({
            // The URL returns { ID: 100, Position: "Programmer" }
            url: "https://www.mywebsite.com/api/getDefaultData", 
            dataType: "json"
        return promise;
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ...
    [dataSource]="employees"
    (onInitNewRow)="onInitNewRow($event)">
    <dxi-column dataField="ID"></dxi-column>
    <dxi-column dataField="hireDate" dataType="date"></dxi-column>
    <dxi-column dataField="position"></dxi-column>
</dx-data-grid>
import { Component } from '@angular/core';
import { lastValueFrom } from 'rxjs';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    employees = [{
        ID: 1,
        hireDate: 1491821760000,
        position: "CTO"
    }, // ...
    onInitNewRow(e) {
        e.data.hireDate = new Date();
        e.promise = this.getDefaultData().then((data: any) => {
            e.data.ID = data.ID;
            e.data.position = data.Position;
    getDefaultData() {
        return lastValueFrom(this.httpClient.get("https://www.mywebsite.com/api/getDefaultData"))
            .then(data => {
                // "data" is { ID: 100, Position: "Programmer" }
                return data;
            .catch(error => { throw 'Data Loading Error' });
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxDataGridModule } from 'devextreme-angular';
@NgModule({
    declarations: [
        AppComponent
    imports: [
        BrowserModule,
        DxDataGridModule
    providers: [ ],
    bootstrap: [AppComponent]
export class AppModule { }
App.vue
<template>
    <DxDataGrid ...
        :data-source="employees"
        @init-new-row="initNewRow">
        <DxColumn data-field="ID" />
        <DxColumn data-field="hireDate" data-type="date" />
        <DxColumn data-field="position" />
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';
import 'whatwg-fetch';
const employees = [{
    ID: 1,
    hireDate: 1491821760000,
    position: "CTO"
}, // ...
export default {
    components: {
        DxDataGrid,
        DxColumn
    data() {
        employees
    methods: {
        initNewRow(e) {
            e.data.hireDate = new Date();
            e.promise = this.getDefaultData().then(data => {
                e.data.ID = data.ID;
                e.data.position = data.Position;
        getDefaultData() {
            return fetch("https://www.mywebsite.com/api/getDefaultData")
                .then(response => response.json())
                .then((data) => {
                    // "data" is { ID: 100, Position: "Programmer" }
                    return data;
                .catch(() => { throw 'Data Loading Error' });
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, Column } from 'devextreme-react/data-grid';
import 'whatwg-fetch';
const employees = [{
    ID: 1,
    hireDate: 1491821760000,
    position: "CTO"
}, // ...
class App extends React.Component {
    constructor(props) {
        super(props);
        this.onInitNewRow = this.onInitNewRow.bind(this);
        this.getDefaultData = this.getDefaultData.bind(this);
    onInitNewRow(e) {
        e.promise = this.getDefaultData().then(data => {
            e.data.ID = data.ID;
            e.data.position = data.Position;
        e.data.hireDate = new Date();
    getDefaultData() {
        return fetch("https://www.mywebsite.com/api/getDefaultData")
            .then(response => response.json())
            .then((data) => {
                // "data" is { ID: 100, Position: "Programmer" }
                return data;
            .catch(() => { throw 'Data Loading Error' });
    render() {
        return (
            <DataGrid ...
                dataSource={employees}
                onInitNewRow={this.onInitNewRow}>
                <Column dataField="ID" />
                <Column dataField="hireDate" dataType="date" />
                <Column dataField="position" />
            </DataGrid>
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    .DataSource(new JS("employees"))
    .Columns(c => {
        c.Add().DataField("ID");
        c.Add().DataField("hireDate")
            .DataType(GridColumnDataType.Date);
        c.Add().DataField("position");
    .OnInitNewRow("onInitNewRow")
<script type="text/javascript">
    var employees = [{
        ID: 1,
        hireDate: 1491821760000,
        position: "CTO"
    }, // ...
    function onInitNewRow(e) {
        e.data.hireDate = new Date();
        e.promise = getDefaultData().done(data => {
            e.data.ID = data.ID;
            e.data.position = data.Position;
    function getDefaultData() {
        let promise = $.ajax({
            // The URL returns { ID: 100, Position: "Programmer" }
            url: "https://www.mywebsite.com/api/getDefaultData",
            dataType: "json",
        return promise;
</script>
The event that caused the function to execute. It is a EventObject or a jQuery.Event when you use jQuery. This event is based on the keydown native event.
            element:
            
HTMLElement | jQuery
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
        onKeyDown(e) {
            if (e.event.ctrlKey && e.event.key === "Q") {
                console.log("Ctrl + Q was pressed"); 
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ...
    (onKeyDown)="onKeyDown($event)">
</dx-data-grid>
import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    onKeyDown(e) {
        if (e.event.ctrlKey && e.event.key === "Q") {
            console.log("Ctrl + Q was pressed"); 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxDataGridModule } from 'devextreme-angular';
@NgModule({
    declarations: [
        AppComponent
    imports: [
        BrowserModule,
        DxDataGridModule
    providers: [ ],
    bootstrap: [AppComponent]
export class AppModule { }
App.vue
<template>
    <DxDataGrid ...
        @key-down="onKeyDown">            
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid
    methods: {
        onKeyDown(e) {
            if (e.event.ctrlKey && e.event.key === "Q") {
                console.log("Ctrl + Q was pressed"); 
</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 {
    render() {
        return (
            <DataGrid ...
                onKeyDown={this.onKeyDown}>
            </DataGrid>
    onKeyDown(e) {
        if (e.event.ctrlKey && e.event.key === "Q") {
            console.log("Ctrl + Q was pressed"); 
export default App;
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
            fullName:
            
String
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-data-grid>
import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxDataGridModule } from 'devextreme-angular'; 
@NgModule({ 
    declarations: [ 
        AppComponent 
    imports: [ 
        BrowserModule, 
        DxDataGridModule 
    providers: [ ], 
    bootstrap: [AppComponent] 
export class AppModule { }  
App.vue
<template> 
    <DxDataGrid ...
        @option-changed="handlePropertyChange"
</template> 
<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxDataGrid from 'devextreme-vue/data-grid'; 
export default { 
    components: { 
        DxDataGrid
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
</script> 
React
App.js
import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 
import DataGrid from 'devextreme-react/data-grid'; 
const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
export default function App() { 
    return ( 
        <DataGrid ...
            onOptionChanged={handlePropertyChange}
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            event:
            
Event (jQuery or EventObject)
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
            groupIndex:
            
Number
Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "group".
            isNewRow:
            
Boolean
The UI component executes the onCellClick function and can also execute internal functions before this function. Use the handled field to check whether internal functions were executed.
In the following code, the onRowClick function calls the editRow method to switch the clicked row to the editing state. This functionality is best applied in form or popup editing.mode:
jQuery
index.js
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        editing: { mode: "form" },
        onRowClick: function(e) {
            if(e.rowType === "data") {
                e.component.editRow(e.rowIndex);
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ...
    (onRowClick)="startEdit($event)">
    <dxo-editing mode="form"></dxo-editing>
</dx-data-grid>
import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    // ...
    startEdit(e) {
        if(e.rowType === "data") {
            e.component.editRow(e.rowIndex);
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxDataGridModule } from 'devextreme-angular';
@NgModule({
    declarations: [
        AppComponent
    imports: [
        BrowserModule,
        DxDataGridModule
    bootstrap: [AppComponent]
export class AppModule { }
App.vue
<template>
    <DxDataGrid ...
        @row-click="startEdit">
        <DxEditing mode="form" />
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
    DxEditing 
} from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid
    methods: {
       startEdit(e) {
            if(e.rowType === "data") {
                e.component.editRow(e.rowIndex);
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid, {
    Editing 
} from 'devextreme-react/data-grid';
class App extends React.Component {
    render() {
        return (
            <DataGrid ...
                onRowClick={this.startEdit}>
                <Editing mode="form">
            </DataGrid>
    startEdit = (e) => {
        if(e.rowType === "data") {
            e.component.editRow(e.rowIndex);
export default App;




    

ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    // ...
    .Editing(e => e.Mode(GridEditMode.Form))
    .OnRowClick("startEdit")
<script type="text/javascript">
    function startEdit(e) {
        if(e.rowType === "data") {
            e.component.editRow(e.rowIndex);
</script>
NOTE
 
 The onRowClick function is not executed when the clicked row enters or is in the editing state. Instead, specify the onCellClick function.
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            event:
            
Event (jQuery or EventObject)
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
            groupIndex:
            
Number
Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "group".
            isNewRow:
            
Boolean
The row's key or a group row's key. Available if the rowType is "data", "detail", "detailAdaptive", or "group".
            rowElement:
            
HTMLElement | jQuery
onRowDblClick is not executed when the clicked row enters or is in the editing state. You can use onCellDblClick instead.
This event handler is also not executed on mobile devices, because double tap gesture is reserved for zooming. To force onRowDblClick execution, add the following CSS property to the UI component's container: 
<div style="touch-action:manipulation"></div>
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key.
            error:
            
JavaScript Error Object
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
true, a Promise resolved with true, or a rejected Promise stops row insertion.

false or a Promise resolved with false or undefined continues row insertion.
            element:
            
HTMLElement | jQuery
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
This function allows you to intercept row insertion and perform additional actions. The following code shows how to use the function parameter's cancel field to prevent or continue row insertion. In this code, a Promise is assigned to this field. Row insertion continues if a user confirms it and row data validation on the server succeeds (the Promise is resolved); otherwise, row insertion is prevented (the Promise is rejected):
jQuery
JavaScript
$(function(){
    $("#dataGridContainer").dxDataGrid({
        // ...
        onRowInserting: function(e) {
            const deferred = $.Deferred();
            const promptPromise = DevExpress.ui.dialog.confirm("Are you sure?", "Confirm changes");
            promptPromise.done((dialogResult) => {
                if (dialogResult) {
                    $.ajax({
                        url: "https://url/to/your/validation/service",
                        dataType: "json",
                        data: e.newData,
                        success: function(validationResult) {
                            if (validationResult.errorText) {
                                deferred.reject(validationResult.errorText);
                            } else {
                                deferred.resolve(false);
                        error: function() {
                            deferred.reject("Data Loading Error");
                        timeout: 5000
                } else {
                    deferred.resolve(true);              
            e.cancel = deferred.promise();
Angular
app.component.ts
app.component.html
app.module.ts
import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
import { confirm } from 'devextreme/ui/dialog';
import { lastValueFrom } from 'rxjs';
// ...
export class AppComponent {
    constructor(private httpClient: HttpClient) { /*...*/ }
    async insertRow(e) {
        try {
            const dialogResult = await this.confirmAsync("Are you sure?", "Confirm changes");
            if (dialogResult) {
                let params = new HttpParams();
                for (let key in e.newData) {
                    params = params.set(key, e.newData[key]);
                const validationResult = await lastValueFrom(this.httpClient.get("https://url/to/your/validation/service", { params }));
                if (validationResult.errorText) {
                    throw validationResult.errorText;
                } else {
                    e.cancel = false;
            } else {
                e.cancel = true;
        } catch (error) {
            console.error("Validation or confirmation error", error);
            e.cancel = Promise.reject(error);
    private confirmAsync(message: string, title?: string): Promise<boolean> {
        return new Promise<boolean>((resolve) => {
            const dialogResult = confirm(message, title);
            resolve(dialogResult);
<dx-data-grid ... 
    (onRowInserting)="insertRow($event)">
</dx-data-grid>
// ... 
import { DxDataGridModule } from 'devextreme-angular'; 
import { HttpClientModule } from "@angular/common/http";
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        HttpClientModule
    // ...
App.vue
<template>
    <DxDataGrid ...
        @row-inserting="insertRow">
    </DxDataGrid>
</template>
<script>
import DxDataGrid, { ... } from 'devextreme-vue/data-grid';
import { confirm } from 'devextreme/ui/dialog';
// ...
export default {
    components: {
        DxDataGrid,
        // ...
    // ...
    methods: {
        insertRow(e) {
            const isCanceled = new Promise((resolve, reject) => {
                const promptPromise = confirm("Are you sure?", "Confirm changes");
                promptPromise.then((dialogResult) => {
                    if (dialogResult) {
                        let params = new HttpParams();
                        for (let key in e.newData) {
                            params = params.set(key, e.newData[key]);
                        fetch(`https://url/to/your/validation/service${params}`)
                            .then((validationResult) => {
                                if (validationResult.errorText) {
                                    reject(validationResult.errorText);
                                } else {
                                    resolve(false);
                    } else {
                        return resolve(true);
            e.cancel = isCanceled;
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { confirm } from 'devextreme/ui/dialog';
import DataGrid, { ... } from 'devextreme-react/data-grid';
function insertRow(e) {
    const isCanceled = new Promise((resolve, reject) => {
        const promptPromise = confirm("Are you sure?", "Confirm changes");
        promptPromise.then((dialogResult) => {
            if (dialogResult) {
                let params = new HttpParams();
                for (let key in e.newData) {
                    params = params.set(key, e.newData[key]);
                fetch(`https://url/to/your/validation/service${params}`)
                    .then((validationResult) => {
                        if (validationResult.errorText) {
                            reject(validationResult.errorText);
                        } else {
                            resolve(false);
            } else {
                return resolve(true);
    e.cancel = isCanceled;
function App() {
    return (
        <DataGrid ...
            onRowInserting={insertRow}>
            // ...
        </DataGrid>
export default App;
Do not use this function to insert data. If you need a custom insert logic, implement CustomStore's insert function.
In batch editing mode, this function is executed for each row individually if several rows should be inserted.
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            groupIndex:
            
Number
Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "group".
            isNewRow:
            
Boolean
The row's key.

If a field providing keys is not specified in the data source, the whole data object is considered the key.
            rowElement:
            
HTMLElement | jQuery
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key.
            error:
            
JavaScript Error Object
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
true, a Promise resolved with true, or a rejected Promise stops row removal.

false or a Promise resolved with false or undefined continues row removal.
            element:
            
HTMLElement | jQuery
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
NOTE
 
 In batch editing mode, this function is executed for each row individually if several rows should be removed.
This function allows you to intercept row removal and perform additional actions. The following code shows how to use the function parameter's cancel field to prevent or continue removal. In this code, a Promise is assigned to this field. Removal continues if a user confirms it and row validation on the server succeeds (the Promise is resolved); otherwise, removal is prevented (the Promise is rejected):
jQuery
JavaScript
$(function(){
    $("#dataGridContainer").dxDataGrid({
        // ...
        onRowRemoving: function(e) {
            var deferred = $.Deferred();
            $.ajax({
                url: `https://url/to/your/validation/service/${e.key}`,
                success: function(validationResult) {
                    if (validationResult.errorText) {
                        deferred.reject(validationResult.errorText);
                    } else {
                        deferred.resolve(false);
                error: function() {
                    deferred.reject("Data Loading Error");
                timeout: 5000
            e.cancel = deferred.promise();
Angular
TypeScript
app.component.html
app.module.ts
import { DxDataGridModule } from "devextreme-angular";
import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
import { lastValueFrom } from 'rxjs';
export class AppComponent {
    constructor(private httpClient: HttpClient) { /*...*/ }
    validateRemove(e) {
        const isCanceled = new Promise((resolve, reject) => {
            const request$ = this.httpClient
                .get(`https://url/to/your/validation/service/${e.key}`);
            lastValueFrom(request$).then((validationResult) => {
                if (validationResult.errorText) {
                    reject(validationResult.errorText);
                } else {
                    resolve(false);
        e.cancel = isCanceled;
<dx-data-grid ... 
    (onRowRemoving)="validateRemove($event)">
</dx-data-grid>
// ... 
import { DxDataGridModule } from 'devextreme-angular'; 
import { HttpClientModule } from "@angular/common/http";
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        HttpClientModule
    // ...
App.vue




    
<template>
    <DxDataGrid ...
        @row-removing="validateRemove">
    </DxDataGrid>
</template>
<script>
import DxDataGrid, { ... } from 'devextreme-vue/data-grid';
// ...
export default {
    components: {
        DxDataGrid,
        // ...
    // ...
    methods: {
        validateRemove(e) {
            const isCanceled = new Promise((resolve, reject) => {
                fetch(`https://url/to/your/validation/service/${e.key}`)
                    .then((validationResult) => {
                        if (validationResult.errorText) {
                            reject(validationResult.errorText);
                        } else {
                            resolve(false);
            e.cancel = isCanceled;
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid, { ... } from 'devextreme-react/data-grid';
function validateRemove(e) {
    const isCanceled = new Promise((resolve, reject) => {
        fetch(`https://url/to/your/validation/service/${e.key}`)
            .then((validationResult) => {
                if (validationResult.errorText) {
                    reject(validationResult.errorText);
                } else {
                    resolve(false);
    e.cancel = isCanceled;
function App() {
    return (
        <DataGrid ...
            onRowRemoving={validateRemove}>
            // ...
        </DataGrid>
export default App;
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key.
            error:
            
JavaScript Error Object
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
true, a Promise resolved with true, or a rejected Promise stops row updating.

false or a Promise resolved with false or undefined continues row updating.
            element:
            
HTMLElement | jQuery
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
This function allows you to intercept row update and perform additional actions. The following code shows how to use the function parameter's cancel field to prevent or continue row update. In this code, a Promise is assigned to this field. Row update continues if a user confirms it and row data validation on the server succeeds (the Promise is resolved); otherwise, row update is prevented (the Promise is rejected).
jQuery
JavaScript
$(function(){
    $("#dataGridContainer").dxDataGrid({
        // ...
        onRowUpdating: function(e) {
            const deferred = $.Deferred();
            const promptPromise = DevExpress.ui.dialog.confirm("Are you sure?", "Confirm changes");
            promptPromise.done((dialogResult) => {
                if (dialogResult) {
                    $.ajax({
                        url: "https://url/to/your/validation/service",
                        dataType: "json",
                        data: e.newData,
                        success: function(validationResult) {
                            if (validationResult.errorText) {
                                deferred.reject(validationResult.errorText);
                            } else {
                                deferred.resolve(false);
                        error: function() {
                            deferred.reject("Data Loading Error");
                        timeout: 5000
                } else {
                    deferred.resolve(true);              
            e.cancel = deferred.promise();
Angular
app.component.ts
app.component.html
app.module.ts
import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
import { confirm } from 'devextreme/ui/dialog';
import { lastValueFrom } from 'rxjs';
// ...
export class AppComponent {
    constructor(private httpClient: HttpClient) { /*...*/ }
    async updateRow(e) {
        try {
            const dialogResult = await this.confirmAsync("Are you sure?", "Confirm changes");
            if (dialogResult) {
                let params = new HttpParams();
                for (let key in e.newData) {
                    params = params.set(key, e.newData[key]);
                const validationResult = await lastValueFrom(this.httpClient.get("https://url/to/your/validation/service", { params }));
                if (validationResult.errorText) {
                    throw validationResult.errorText;
                } else {
                    e.cancel = false;
            } else {
                e.cancel = true;
        } catch (error) {
            console.error("Validation or confirmation error", error);
            e.cancel = Promise.reject(error);
    private confirmAsync(message: string, title?: string): Promise<boolean> {
        return new Promise<boolean>((resolve) => {
            const dialogResult = confirm(message, title);
            resolve(dialogResult);
<dx-data-grid ... 
    (onRowUpdating)="updateRow($event)">
</dx-data-grid>
// ... 
import { DxDataGridModule } from 'devextreme-angular'; 
import { HttpClientModule } from "@angular/common/http";
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        HttpClientModule
    // ...
App.vue
<template>
    <DxDataGrid ...
        @row-updating="updateRow">
    </DxDataGrid>
</template>
<script>
import DxDataGrid, { ... } from 'devextreme-vue/data-grid';
import { confirm } from 'devextreme/ui/dialog';
// ...
export default {
    components: {
        DxDataGrid,
        // ...
    // ...
    methods: {
        updateRow(e) {
            const isCanceled = new Promise((resolve, reject) => {
                const promptPromise = confirm("Are you sure?", "Confirm changes");
                promptPromise.then((dialogResult) => {
                    if (dialogResult) {
                        let params = new HttpParams();
                        for (let key in e.newData) {
                            params = params.set(key, e.newData[key]);
                        fetch(`https://url/to/your/validation/service${params}`)
                            .then((validationResult) => {
                                if (validationResult.errorText) {
                                    reject(validationResult.errorText);
                                } else {
                                    resolve(false);
                    } else {
                        return resolve(true);
            e.cancel = isCanceled;
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { confirm } from 'devextreme/ui/dialog';
import DataGrid, { ... } from 'devextreme-react/data-grid';
function updateRow(e) {
    const isCanceled = new Promise((resolve, reject) => {
        const promptPromise = confirm("Are you sure?", "Confirm changes");
        promptPromise.then((dialogResult) => {
            if (dialogResult) {
                let params = new HttpParams();
                for (let key in e.newData) {
                    params = params.set(key, e.newData[key]);
                fetch(`https://url/to/your/validation/service${params}`)
                    .then((validationResult) => {
                        if (validationResult.errorText) {
                            reject(validationResult.errorText);
                        } else {
                            resolve(false);
            } else {
                return resolve(true);
    e.cancel = isCanceled;
function App() {
    return (
        <DataGrid ...
            onRowUpdating={updateRow}>
            // ...
        </DataGrid>
export default App;
You can use this function to change e.newData values, but do not use it to implement custom update logic. For this purpose, you can implement the onSaving or CustomStore's update function.
In batch editing mode, this function is executed for each row individually if several rows should be updated.
Assign a Promise to this field to perform an asynchronous operation, such as a request to a server.
            oldData:
The data of the validated row before changes.
            newData:
            
Object
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key.
            isValid:
            
Boolean
An array of broken rules. The structure of rule objects is described in the Validation Rules section.
            element:
            
HTMLElement | jQuery
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
Use this function to perform operations before messages about failed validation are shown. For instance, you can run additional checks and change the isValid function parameter to change the validation result. You can also change the errorText parameter to correct the error message.
The following code illustrates how to validate an email address on the server and display an error row with a custom error text if the validation fails:
jQuery
index.js
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onRowValidating: function(e) {
            if(e.newData.Email) {
                e.promise = checkEmail(e.newData.Email)
                    .done(function(result) {
                        e.errorText = result.errorText;
                        e.isValid = result.isValid;
function checkEmail(email) {
    return $.ajax({
        // The url returns { errorText: "The Email address you entered already exists.", isValid: false }
        url: "https://www.mywebsite.com/api/checkEmail",
        dataType: "json",
        data: { email: email }
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ...
    (onRowValidating)="onRowValidating($event)">
</dx-data-grid>
import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { lastValueFrom } from 'rxjs';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    constructor(@Inject(HttpClient) http: HttpClient) {
        this.checkEmail = this.checkEmail.bind(this);
    onRowValidating(e) {
        if(e.newData.Email) {
            e.promise = this.checkEmail(e.newData.Email)
                .then((result: any) => {
                    // "result" is { errorText: "The Email address you entered already exists.", isValid: false }
                    e.errorText = result.errorText;
                    e.isValid = result.isValid;
    checkEmail(email) {
        const params = new HttpParams().set("email", email);
        return lastValueFrom(
            this.http.get("https://www.mywebsite.com/api/checkEmail", { params })
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DxDataGridModule } from 'devextreme-angular';
@NgModule({
    declarations: [
        AppComponent
    imports: [
        BrowserModule,
        HttpClientModule,
        DxDataGridModule
    providers: [],
    bootstrap: [AppComponent]
export class AppModule { }
App.vue
<template>
    <DxDataGrid ...
        @row-validating="onRowValidating">
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
import 'whatwg-fetch';
export default {
    components: {
        DxDataGrid
    // ...
    methods: {
        onRowValidating(e) {
            if(e.newData.Email) {
                e.promise = this.checkEmail(e.newData.Email)
                    .then((result: any) => {
                        // "result" is { errorText: "The Email address you entered already exists.", isValid: false }
                        e.errorText = result.errorText;
                        e.isValid = result.isValid;
        checkEmail(email) {
            let params = '?' + 'email=' + email;
            return fetch("https://www.mywebsite.com/api/checkEmail${params}");
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid from 'devextreme-react/data-grid';
import 'whatwg-fetch';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.onRowValidating = this.onRowValidating.bind(this);
    onRowValidating(e) {
        if(e.newData.Email) {
            e.promise = this.checkEmail(e.newData.Email)
                .then((result: any) => {
                    // "result" is { errorText: "The Email address you entered already exists.", isValid: false }
                    e.errorText = result.errorText;
                    e.isValid = result.isValid;
    checkEmail(email) {
        let params = '?' + 'email=' + email;
        return fetch("https://www.mywebsite.com/api/checkEmail${params}");
    render() {
        return (
            <DataGrid ...
                onRowValidating={this.onRowValidating}>
            </DataGrid>
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    // ...
    .OnRowValidating("onRowValidating")
<script type="text/javascript">
    function onRowValidating(e) {
        if(e.newData.Email) {
            e.promise = checkEmail(e.newData.Email)
                .done(function(result) {
                    e.errorText = result.errorText;
                    e.isValid = result.isValid;
    function checkEmail(email) {
        return $.ajax({
            // The url returns { errorText: "The Email address you entered already exists.", isValid: false }
            url: "https://www.mywebsite.com/api/checkEmail",
            dataType: "json",
            data: { email: email }
</script>
NOTE
 
 In batch editing mode, if changes in several rows are committed simultaneously, this function is executed for each row.
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
Assign a Promise to this field to perform an asynchronous operation, such as a request to a server.
            changes:
            
Array<DataChange>
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
If a field providing key values is not specified in the data source, the whole data object is considered the key. In this case, all arrays passed to the function contain data objects instead of keys.
When selection is deferred, this function does not provide access to keys and data. Use the getSelectedRowsData() or getSelectedRowKeys() method instead.
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
            component:
            
DataGrid
If you use DevExtreme ASP.NET components or JQuery in your application, specify this property to get the component's instance. In Angular, Vue, or React, use the toolbar property instead.
jQuery
The following code adds a refresh button to the toolbar:
$(function() {
    $("#container").dxDataGrid({
        // ...
        onToolbarPreparing: function(e) {
            let dataGrid = e.component;
            e.toolbarOptions.items.unshift({
                location: "after",
                widget: "dxButton",
                options: {
                    icon: "refresh",
                    onClick: function() {
                        dataGrid.refresh();
Paging allows the UI component to load data in portions instead of loading it simultaneously. To enable paging, set the paging.enabled property to true.
Users can switch between pages and change paging settings using the pager or they can scroll the pages. Paging settings apply with any scrolling mode.
DataGrid Demo
TreeList Demo
See Also
Paging
Server-side data processing improves the UI component's performance on large datasets. When the server does not implement particular operations (and/or the corresponding remoteOperations fields are false) they are executed on the client. Note that the UI component may send queries to the server while executing a client-side operation.
The following table lists the possible remoteOperations configurations and the operations the server should implement. The server should also implement additional operations depending on the used UI component functionality.
    Setting
    Required server-side operations
    Additional server-side operations
    remoteOperations: true
    all operations except group paging
    remoteOperations: { groupPaging: true }
    all operations including group paging
    remoteOperations: { paging: true }
    paging
    filtering1, sorting1, summary calculation1
    remoteOperations: { paging: true }
(with grouping used in the UI component)
    paging, filtering, sorting
    grouping3, summary calculation1
    remoteOperations: { filtering: true }
    filtering
    grouping4
    remoteOperations: { sorting: true }
    sorting
    filtering1
    remoteOperations: { grouping: true }
    grouping, filtering
    sorting1, summary calculation1
    remoteOperations: { summary: true }
    summary calculation
    filtering1, sorting2, grouping2
        
If this functionality is used in the UI component.
        
If group summary calculation is used.
        
If grouping.autoExpandAll is set to false.
        
If DataGrid contains a lookup column and syncLookupFilterValues is set to true (default value).
NOTE




    
 
 Paging, filtering, and sorting are performed on the server side for the ODataStore, but you can change them to the client side by setting the corresponding remoteOperations fields to false. Other operations are always client-side.
The following restrictions apply to UI component functionality when operations are remote:
Columns with the calculateCellValue or calculateDisplayValue property set cannot be sorted, filtered, or used for grouping.
The calculateGroupValue and calculateSortValue properties accept only string values.
Custom summary calculation is not supported.
The calculateFilterExpression property does not apply if it returns a function or a filter expression that contains functions.
Web API Service Demo
Custom Service Demo
See Also
Data Binding: Web API, PHP, MongoDB | Custom Sources
Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "group".
            isSelected:
            
Boolean
Follow these steps to migrate from the deprecated rowTemplate property to the dataRowTemplate property:
jQuery
Rename the rowTemplate property to dataRowTemplate.
Remove <tbody>.
If <tbody> contained custom classes or attributes, use the onRowPrepared to add them to the dataRowTemplate.
If you implemented custom row alternation logic, you can remove it and set the rowAlternationEnabled property to true.
If you implemented custom hover logic, you can remove it. Instead, set the hoverStateEnabled property to true and use the dx-state-hover class to specify custom hover styles.
        rowTemplate: function(container, item) {
            const { data } = item;
            const markup = "<tbody class='dx-row my-custom-class'>" +
                "<tr>" +
                    "<td>" + item.data.id + "</td>" +
                    "<td>" + item.data.name + "</td>" +  
                "</tr>" +
            "</tbody>";
            container.append(markup);
After:
index.js
index.css
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        dataRowTemplate: function(container, item) {
            const { data } = item;
            const markup = "<tr>" +
                "<td>" + item.data.id + "</td>" +
                "<td>" + item.data.name + "</td>" +  
            "</tr>";
            container.append(markup);
        onRowPrepared: function({ rowElement }) {
            rowElement.addClass("my-custom-class");
#dataGridContainer tbody.dx-state-hover {
    background-color: #ebebeb;
Angular
Rename the rowTemplate property to dataRowTemplate.
Replace <tbody> with <ng-container>.
If <tbody> contained custom classes or attributes, use the onRowPrepared to add them to the dataRowTemplate.
If you implemented custom row alternation logic, you can remove it and set the rowAlternationEnabled property to true.
If you implemented custom hover logic, you can remove it. Instead, set the hoverStateEnabled property to true and use the dx-state-hover class to specify custom hover styles.
<dx-data-grid ...
    rowTemplate="rowTemplateName">
    <tbody class="dx-row" *dxTemplate="let item of 'rowTemplateName'" >
            <td>{{item.data.id}}</td>
            <td>{{item.data.name}}</td>
    </tbody>
</dx-data-grid>
After: 
app.component.html
app.component.ts
app.component.css
<dx-data-grid ...
    id="dataGridContainer"
    dataRowTemplate="dataRowTemplateName"
    (onRowPrepared)="addRowClasses">
    <ng-container *dxTemplate="let item of 'dataRowTemplateName'">
            <td>{{item.data.id}}</td>
            <td>{{item.data.name}}</td>
    </ng-container>
</dx-data-grid>
import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    addRowClasses({ rowElement }) {
        rowElement.classList.add('my-custom-class');
#dataGridContainer tbody.dx-state-hover {
    background-color: #ebebeb;
Rename the rowTemplate property to dataRowTemplate.
In Vue 3, remove <tbody>. In Vue 2, change <tbody> for a <div> with the following attribute: style="display: contents".
If <tbody> contained custom classes or attributes, use the onRowPrepared to add them to the dataRowTemplate.
If you implemented custom row alternation logic, you can remove it and set the rowAlternationEnabled property to true.
If you implemented custom hover logic, you can remove it. Instead, set the hoverStateEnabled property to true and use the dx-state-hover class to specify custom hover styles.
        row-template="rowTemplate">
        <!-- Vue 3 -->
        <template #rowTemplate="{ data: { data: { id, name } }">
            <tbody class="dx-row">
                    <td>{{id}}</td>
                    <td>{{name}}</td>
            </tbody>
        </template>
        <!-- Vue 2 -->
        <tbody slot="rowTemplate"
            slot-scope="{ data: { data: { id, name } } }"
            class="dx-row">
                <td>{{id}}</td>
                <td>{{name}}</td>
        </tbody>
    </DxDataGrid>
</template>
<script>
import { DxDataGrid } from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid
</script>
After:
App.vue
<template>
    <DxDataGrid ...
        id="dataGridContainer"
        data-row-template="dataRowTemplate"
        @row-prepared="addRowClasses">
        <!-- Vue 3 -->
        <template #dataRowTemplate="{ data: { data: { id, name } }">
                <td>{{id}}</td>
                <td>{{name}}</td>
        </template>
        <!-- Vue 2 -->
        <div slot="dataRowTemplate"
            slot-scope="{ data: { data: { id, name } } }"
            style="display: contents">
                <td>{{id}}</td>
                <td>{{name}}</td>
    </DxDataGrid>
</template>
<script>
import { DxDataGrid } from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid
    methods: {
        addRowClasses({ rowElement }) {
            rowElement.classList.add('my-custom-class');
</script>
<style>
#dataGridContainer tbody.dx-state-hover {
    background-color: #ebebeb;
</style>
React
Rename the rowRender property to dataRowRender.
Replace <tbody> with <React.Fragment>.
If <tbody> contained custom classes or attributes, use the onRowPrepared to add them to the dataRowTemplate.
If you implemented custom row alternation logic, you can remove it and set the rowAlternationEnabled property to true.
If you implemented custom hover logic, you can remove it. Instead, set the hoverStateEnabled property to true and use the dx-state-hover class to specify custom hover styles.
import DataGrid from 'devextreme-react/data-grid';
const Row = ({ data: { id, name } }) => {
    return (
        <tbody className={"dx-row"}>
                <td>{id}</td>
                <td>{name}</td>
        </tbody>
export default function App() {
    return (
        <DataGrid ...
            rowRender={Row}>
        </DataGrid>
After:
App.js




    
import DataGrid from 'devextreme-react/data-grid';
import './App.css'
const Row = ({ data: { id, name } }) => {
    return (
        <React.Fragment>
                <td>{id}</td>
                <td>{name}</td>
        </React.Fragment>
const addRowClasses = ({ rowElement }) => {
    rowElement.classList.add('my-custom-class');
export default function App() {
    return (
        <DataGrid ...
            id="dataGridContainer"
            dataRowRender={Row}
            onRowPrepared={addRowClasses}>
        </DataGrid>
<!-- App.css -->
#dataGridContainer tbody.dx-state-hover {
    background-color: #ebebeb;
When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.
JavaScript
DevExpress.config({
    rtlEnabled: true
DataGrid Demo
Navigation UI Demo
Editors Demo
Scrolling allows a user to browse data left outside the current viewport. The UI component provides several scrolling modes detailed in the mode property description.
Virtual Scrolling Demo
Infinite Scrolling Demo
See Also
Scrolling
pager
To make the search panel visible, set the searchPanel.visible property to true.
DataGrid Demo
TreeList Demo
Keys are stored in the order the user selects rows.
To access a row using its key, specify the data field that provides key values. Assign the data field's name to the key property of the store that underlies the dataSource.
DataGrid Demo
TreeList Demo
See Also
Initial and Runtime Selection
getSelectedRowKeys()
getSelectedRowsData()
A user can select rows in a single or multiple mode. In multiple mode, a user can select all rows at once. To disable this feature, assign false to the allowSelectAll.
Single Row Selection Demo
Multiple Row Selection Demo
By default, once a user selects a row, the data source is instantly notified about it. This may lower the UI component performance if the data source is remote and the user is allowed to select all rows at once. In this case, we recommend making the selection deferred.
Deferred Selection Demo
See Also
Selection
Deferred Selection
onSelectionChanged
NOTE
 
If you use the Android or iOS theme, specifying this property doesn't affect anything. These themes avoid displaying column lines in order to provide a native look for the UI component. In case you still require the column lines to be displayed, choose another theme.
See Also
showBorders
Normally, when records are grouped by a column, the groups are sorted according to the values of this column. In a number of cases, such approaches cannot address your needs, e.g., when you require to sort groups by the number of records in each. For these cases, you can implement sorting according to the values of group summary items. These items are specified in the groupItems array. Assume that you have the following code that specifies three group summary items.
jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: "Age",
                summaryType: "avg",
                name: "Average Age Group Summary"
                column: "Income",
                summaryType: "max"
                column: "Tasks",
                summaryType: "min"
Angular
HTML
TypeScript
 <dx-data-grid ... >
     <dxo-summary>
         <dxi-group-item
             column="Age"
             summaryType="avg"
             name="Average Age Group Summary">
         </dxi-group-item>
         <dxi-group-item
             column="Income"
             summaryType="max">
         </dxi-group-item>
         <dxi-group-item
             column="Tasks"
             summaryType="min">
         </dxi-group-item>
     </dxo-summary>
 </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    // ...
App.vue
<template>
    <DxDataGrid>
        <DxSummary>
            <DxGroupItem 
                column="Age"
                summary-type="avg"
                name="Average Age Group Summary"
            <DxGroupItem
                column="Income"
                summary-type="max"
            <DxGroupItem
                column="Tasks"
                summary-type="min"
        </DxSummary>
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxDataGrid, DxSummary, DxGroupItem } from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid,
        DxSummary,
        DxGroupItem
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, Summary, GroupItem } from 'devextreme-react/data-grid';
class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Summary>
                    <GroupItem 
                        column="Age"
                        summaryType="avg"
                        name="Average Age Group Summary" />
                    <GroupItem 
                        column="Income"
                        summaryType="max" />
                    <GroupItem 
                        column="Tasks" 
                        summaryType="min" />
                </Summary>
            </DataGrid>
export default App;
To use these summary items for sorting groups, assign an array of objects to the sortByGroupSummaryInfo property. In each object of this array, specify the summaryItem field. This field determines the summary item to be used for summary-based sorting. In the following code, three objects form the sortByGroupSummaryInfo array. In each object, the summaryItem property determines different summary items using different values.
jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        sortByGroupSummaryInfo: [
            { summaryItem: 1 }, // determines the maximum income item using its index in the "groupItems" array
            { summaryItem: "min" }, // determines the minimum tasks item using its aggregate function
            { summaryItem: "Average Age Group Summary" } // determines the average age item using its name
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-sort-by-group-summary-info 
        [summaryItem]="1"> <!-- determines the maximum income item using its index in the "groupItems" array -->
    </dxi-sort-by-group-summary-info>
    <dxi-sort-by-group-summary-info 
        summaryItem="min"> <!-- determines the minimum tasks item using its aggregate function -->
    </dxi-sort-by-group-summary-info>
    <dxi-sort-by-group-summary-info 
        summaryItem="Average Age Group Summary"> <!-- determines the average age item using its name -->
    </dxi-sort-by-group-summary-info>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    // ...
App.vue
<template>
    <DxDataGrid>
        <DxSortByGroupSummaryInfo
            :summary-item="1"/> <!-- determines the maximum income item using its index in the "groupItems" array -->
        <DxSortByGroupSummaryInfo
            summary-item="min"/> <!-- determines the minimum tasks item using its aggregate function -->
        <DxSortByGroupSummaryInfo
            summary-item="Average Age Group Summary"/> <!-- determines the average age item using its name -->
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import {
    DxDataGrid,
    DxSortByGroupSummaryInfo
} from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid,
        DxSortByGroupSummaryInfo
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, SortByGroupSummaryInfo } from 'devextreme-react/data-grid';
class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <SortByGroupSummaryInfo
                    summaryItem={1}/> {/* determines the maximum income item using its index in the "groupItems" array */}
                <SortByGroupSummaryInfo
                    summaryItem="min"/> {/* determines the minimum tasks item using its aggregate function */}
                <SortByGroupSummaryInfo
                    summaryItem="Average Age Group Summary"/> {/* determines the average age item using its name */}
            </DataGrid>
export default App;
After that, set the groupColumn property for objects in the sortByGroupSummaryInfo array. This property identifies the column that must be used in grouping in order that a particular summary-based sorting setting be applied. If you have omitted this property from an object, the sorting setting specified by this object will be applied regardless of the column used in grouping.
jQuery
JavaScript
$(function () {
    $("#gridContainer").dxDataGrid({
        // ...
        sortByGroupSummaryInfo: [
            { summaryItem: 1, groupColumn: "Tasks" }, // applies sorting only when records are grouped by the "Tasks" column
            { summaryItem: "min", groupColumn: "Last Name" }, // applies sorting only when records are grouped by a "Last Name" column
            { summaryItem: "Average Age Group Summary" } // applies sorting regardless the grouping column
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-sort-by-group-summary-info 
        [summaryItem]="1" groupColumn="Tasks"> <!-- applies sorting only when records are grouped by the "Tasks" column -->
    </dxi-sort-by-group-summary-info>
    <dxi-sort-by-group-summary-info 
        summaryItem="min"
        groupColumn="Last Name"> <!-- applies sorting only when records are grouped by a "Last Name" column -->
    </dxi-sort-by-group-summary-info>
    <dxi-sort-by-group-summary-info 
        summaryItem="Average Age Group Summary"> <!--  applies sorting regardless the grouping column -->
    </dxi-sort-by-group-summary-info>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    // ...
App.vue
<template>
    <DxDataGrid>
        <DxSortByGroupSummaryInfo
            :summary-item="1"
            group-column="Tasks"
        /> <!-- applies sorting only when records are grouped by the "Tasks" column -->
        <DxSortByGroupSummaryInfo
            summary-item="min"
            group-column="Last Name"
        /> <!-- applies sorting only when records are grouped by a "Last Name" column -->
        <DxSortByGroupSummaryInfo
            summary-item="Average Age Group Summary"
        /> <!-- applies sorting regardless the grouping column -->
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import {
    DxDataGrid,
    DxSortByGroupSummaryInfo
} from 'devextreme-vue/data-grid';
export default {
    components: {
        DxDataGrid,
        DxSortByGroupSummaryInfo
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, SortByGroupSummaryInfo } from 'devextreme-react/data-grid';
class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <SortByGroupSummaryInfo
                    summaryItem={1}
                    groupColumn="Tasks"
                /> {/* applies sorting only when records are grouped by the "Tasks" column */}
                <SortByGroupSummaryInfo
                    summaryItem="min"
                    groupColumn="Last Name"
                /> {/* applies sorting only when records are grouped by a "Last Name" column */}
                <SortByGroupSummaryInfo
                    summaryItem="Average Age Group Summary"
                /> {/* applies sorting regardless the grouping column */}
            </DataGrid>
export default App;
If several summary-based sorting settings match the current grouping, their indexes in the sortByGroupSummaryInfo array will dictate the order of their application.
In addition, you can set an ascending or descending sort order for each summary-based sorting object using its sortOrder property.
NOTE
 
 This feature does not work when remoteOperations.groupPaging is set to true.
State storing enables the UI component to save applied settings and restore them the next time the UI component is loaded. Assign true to the stateStoring.enabled property to enable this functionality.
State storing saves the following properties:
                
columns.sortIndex
                
columns.sortOrder
                
columns.visible (only if the column chooser is enabled)
                
columns.visibleIndex
                
columns.width
A summary is a grid feature that provides a synopsis of data contained in the grid. A summary consists of several items. A summary item displays a value that is a product of applying an aggregate function to the data of a specific column.
There are two types of summary in DataGrid: group and total. The group summary is calculated on a group of data, which is segregated during grouping. To specify the items of the group summary, declare an array of objects and assign it to the summary.groupItems field.
The total summary is calculated on all data contained in the grid. To specify the items of the total summary, declare an array of objects and assign it to the summary.totalItems field.
Group Summaries Demo
Total Summaries Demo
The following table shows how the component behaves when you assign different values to this property. The 'State' column is filtered by the 'Alabama' value. If you set the syncLookupFilterValues to false, the 'City' column's header filter and filter row display all cities instead of showing cities within Alabama only.
        Filter type
        false
        Filter row
If filtering is enabled in remoteOperations and this property is set to true (default), the component uses the group parameter to fetch values. As a result, lookup columns can lose pagination (the DataSource.paginate property has no effect). To resolve this issue, disable this property.
If the filter panel is visible and at least one column includes headerFilter.dataSource or lookup.dataSource, disable this property. Otherwise, the filter panel may not display data correctly.
If the lookup column's data source lacks data that corresponds to the column data, the header filter may load incorrectly. To prevent this issue, you can either disable the syncLookupFilterValues property or the paginate option for the lookup column data source.
Two-way data binding ensures that the UI tracks changes made in the data source by a 3rd-party component, and vice versa. This way, the UI component and its data source stay synchronized.
If you implement two-way data binding in the UI component on your own using the cellTemplate and/or editCellTemplate properties, make sure to set the twoWayBindingEnabled property to false.
The height in pixels.

String

A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".
Function (deprecated since v21.2)

Refer to the W0017 warning description for information on how you can migrate to viewport units.
NOTE
 
 DataGrid does not support the transform: scale CSS rule. Specify height and width as a percentage instead.
            Feel free to share topic-related thoughts here.

            If you have technical questions, please create a support ticket in the DevExpress Support Center.
        Send Feedback
    Thank you for the feedback!
                    All trademarks or registered trademarks are property of their respective owners.
                    Use of this site constitutes acceptance of the Developer Express Inc Website Terms of Use, Privacy Policy (Updated), and Cookie Settings.
                    Use of DevExtreme UI components/libraries constitutes acceptance of the Developer Express Inc End User License Agreement.
                    FAQs: Licensing
                    | DevExpress Support Services
                    | Supported Versions & Requirements
                    | Maintenance Releases