Angular DataGrid Properties

See Also

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.

Use this property when you display the component on a platform whose guidelines include the active state change for UI components.

Initially, columns appear in the order specified by the columns array. If you skip specifying this array, columns will mirror the order of fields in the first object from the dataSource. You can allow a user to reorder columns at runtime by setting the allowColumnReordering property to true.

DataGrid Demo TreeList Demo

See Also

• columns[].allowReordering

By default, the width of each column depends on the width of the UI component and the total number of columns. You can allow a user to resize the columns at runtime by setting the allowColumnResizing property to true.

DataGrid Demo TreeList Demo

See Also

• columnResizingMode
• columns[].allowResizing
• columns[].width

If you set the remoteOperations property to true, the DataGrid generates additional requests with comparison operators (for example, < and >). This logic does not work if ODataStore is bound to a table with GUID keys. You need to disable the autoNavigateToFocusedRow or remoteOperations properties to ensure it operates correctly.

View Demo

When this property is set to true, data loaded once is saved in cache. Then, the UI component takes data from this cache when performing such operations as sorting, grouping, paging, etc. Caching is helpful when the data source takes significant time to load. But, consider disabling it for frequently changing data sources.

To update data in cache, call the refresh() method of the UI component or the reload() method of the DataSource:

$("#dataGridContainer").dxDataGrid("refresh");
// ===== or =====
const dataGridDataSource = $("#dataGridContainer").dxDataGrid("getDataSource");
dataGridDataSource.reload();

import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    refreshData () {
        this.dataGrid.instance.refresh();
        // ===== or =====
        const dataGridDataSource = this.dataGrid.instance.getDataSource();
        dataGridDataSource.reload();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<template>
    <DxDataGrid :ref="dataGridRefKey">
        <!-- ... -->
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

const dataGridRefKey = "my-data-grid";

export default {
    components: {
        DxDataGrid
    },
    data() {
        return {
            dataGridRefKey
        }
    },
    methods: {
        refreshData() {
            this.dataGrid.refresh();
            // ===== or =====
            const dataGridDataSource = this.dataGrid.getDataSource();
            dataGridDataSource.reload();
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.dataGridRef = React.createRef();

        this.refreshData = () => {
            this.dataGrid.refresh();
            // ===== or =====
            const dataGridDataSource = this.dataGrid.getDataSource();
            dataGridDataSource.reload();
        }
    }

    get dataGrid() {
        return this.dataGridRef.current.instance();
    }

    render() {
        return (
            <DataGrid ref={this.dataGridRef}>
                {/* ... */ }
            </DataGrid>
        );
    }
}
export default App;

See Also

• Enhance Performance on Large Datasets

The cell's content may be truncated if the width of the cell's column becomes very small. In this case, when a user hovers the mouse pointer over such a cell, a hint containing the cell's value appears. To disable cell hints, assign false to the cellHintEnabled property.

When this property is set to true, all columns adjust their width to the content.

If the DataGrid is wider than its overall content, the columns are stretched to occupy all available width. To avoid this, set the columnWidth or columns.width property to "auto".

If the content is wider, the columnAutoWidth property set to true causes horizontal scrolling. You can set the allowHiding property to false for columns you want to be displayed continuously.

When the columnAutoWidth property is set to false, all columns have identical width, which in turn depends on the width of the UI component.

DataGrid Demo TreeList Demo

See Also

• width
• columnFixing
• wordWrapEnabled

The column chooser allows a user to hide columns at runtime. To enable it, assign true to the columnChooser.enabled property.

DataGrid Demo TreeList Demo

See Also

• Column Chooser
• columns[].allowHiding

When the width of all columns exceeds the UI component width, horizontal scrolling appears. If specific columns should be on screen constantly regardless of how far the UI component is scrolled, allow a user to fix them at runtime using the context menu. For this, set the columnFixing.enabled property to true.

When you enable column fixing, command columns become fixed automatically.

DataGrid Demo TreeList Demo

See Also

• Column Fixing

This property set to true makes the UI component hide certain columns automatically if all the columns do not fit the UI component's width. Columns with low hidingPriority are hidden first. These are the rightmost (leftmost if rtlEnabled is true) columns by default. Information from hidden columns is available in an adaptive detail row.

DataGrid Demo TreeList Demo

See Also

• onAdaptiveDetailRowPreparing
• Adaptability

DataGrid Demo TreeList Demo

See Also

• columns[].minWidth
• allowColumnResizing
• columnResizingMode

The columnResizingMode property accepts one of the following values:

• nextColumn
  When a user resizes a column, the width of the next column changes.
• widget
  When a user resizes a column, the width of the UI component changes.
  This mode is ignored if you specify the width of any column in percent.

DataGrid Demo TreeList Demo

By default, a column is created for each field of a data source object, but in most cases, it is redundant. To specify a set of columns to be created in a grid, assign an array specifying these columns to the columns property. Each grid column is represented in this array by an object containing column settings or by a data source field that this column is bound to. Detailed information on specifying grid columns is given in the Columns Overview article.

Column properties define the behavior and appearance of a grid column. One of the other capabilities allows you to control the sorting of column values using the allowSorting and sortOrder properties, apply a filter to grid records using the allowFiltering and filterOperations properties, and group grid records using the allowGrouping and groupIndex properties. In addition, you can change the visibility and width of a column using corresponding properties.

To get or set a property or several properties for a column at runtime, use the columnOption method with the required arguments.

View Demo

See Also

• Column Types
• Customize Column Headers
• Column Sizing
• Column Reordering
• Column Fixing
• Hide a Column Using the API
• Adaptability
• Column and Row Indexes

DataGrid Demo TreeList Demo

See Also

• columnMinWidth

Use this function to make minor adjustments to automatically generated columns. You can access and modify column configurations using the function's parameter.

$(function(){
    $("#dataGrid").dxDataGrid({
        // ...
        customizeColumns: function (columns) {
            columns[0].width = 100;
            columns[1].width = 210;
        }
    })
});

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    customizeColumns (columns) {
        columns[0].width = 100;
        columns[1].width = 210;
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<dx-data-grid ...
    [customizeColumns]="customizeColumns">
</dx-data-grid>

<template>
    <DxDataGrid ...
        :customize-columns="customizeColumns"> 
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    // ... 
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    },
    methods: {
        customizeColumns(columns) {
            columns[0].width = 100;
            columns[1].width = 210;
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    // ...
} from 'devextreme-react/data-grid';

class App extends React.Component {
    customizeColumns = (columns) => {
        columns[0].width = 100;
        columns[1].width = 210;
    }

    render() {
        return (
            <DataGrid ...
                customizeColumns={this.customizeColumns}
            />
        );
    }
}
export default App;

@(Html.DevExtreme().DataGrid()
    // ...
    .CustomizeColumns("customizeColumns")
)
<script>
    function customizeColumns(columns) {
        columns[0].width = 100;
        columns[1].width = 210;
    }
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    // ...
} from 'devextreme-react/data-grid';

class App extends React.Component {
    customizeColumns = (columns) => {
        // ...
        // This code does not work
        // columns[0].cellRender = cellRender;
    }

    render() {
        return (
            <DataGrid ...
                customizeColumns={this.customizeColumns}
            >
                <!-- ... -->
                <Column
                    dataField="Picture"
                    cellRender={cellRender} <!-- This code works correctly -->
                />
            </DataGrid>
        );
    }
}

function cellRender(data) {
    return <img src={data.value} />;
}

export default App;

The following details should be taken into account when you use a dataRowTemplate:

• Disable column reordering, grouping, and column fixing when you specify the row template. Its content cannot automatically synchronize with the column layout, which makes these features inoperative. Command columns are not supported either.

• You should implement the following features manually: editing, adaptability, selection, master-detail interface, and focused row. Follow the links to review the API that can help you with this task.

• When DataGrid is exported to Excel, it omits customizations made in the template. However, you can use ExcelJS API to recreate the changes in the exported file. Use the customizeCell function to do this.

• You should specify all CSS rules manually if you use this property. Refer to the following demo's styles.css tab to see an example:

View Demo

See Also

• Custom Templates
• onRowPrepared

The DataGrid works with collections of objects. We recommend that you use a plain object in data (no circulars, no prototypes, etc.). The DataGird uses JSON.stringify and other recursive methods. Circular object references can crash native recursive algorithms (such as serializers) with stack overflows.

Depending on your data source, bind DataGrid to data as follows.

• Data Array
  Assign the array to the dataSource option and specify the keyExpr. View Demo

• Read-Only Data in JSON Format
  Set the dataSource property to the URL of a JSON file or service that returns JSON data. View Demo

• OData
  Implement an ODataStore. Make sure to specify the key. View Demo

• Web API, PHP, MongoDB
  Use one of the following extensions to enable the server to process data according to the protocol DevExtreme UI components use:

  • DevExtreme.AspNet.Data
  • DevExtreme-PHP-Data
  • devextreme-query-mongodb

  Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

  jQuery

  JavaScript

  $(function() {
      let serviceUrl = "https://url/to/my/service";
      $("#dataGridContainer").dxDataGrid({
          // ...
          dataSource: DevExpress.data.AspNet.createStore({
              key: "ID",
              loadUrl: serviceUrl + "/GetAction",
              insertUrl: serviceUrl + "/InsertAction",
              updateUrl: serviceUrl + "/UpdateAction",
              deleteUrl: serviceUrl + "/DeleteAction"
          })
      })
  });

  Angular

  app.component.ts

  app.component.html

  app.module.ts

  import { Component } from '@angular/core';
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      store: CustomStore;
      constructor() {
          let serviceUrl = "https://url/to/my/service";
          this.store = createStore({
              key: "ID",
              loadUrl: serviceUrl + "/GetAction",
              insertUrl: serviceUrl + "/InsertAction",
              updateUrl: serviceUrl + "/UpdateAction",
              deleteUrl: serviceUrl + "/DeleteAction"
          })
      }
  }

  <dx-data-grid ...
      [dataSource]="store">
  </dx-data-grid>

  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 { }

  Vue

  App.vue

  <template> 
      <DxDataGrid ...
          :data-source="store" />
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.light.css';
  
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  import { DxDataGrid } from 'devextreme-vue/data-grid';
  
  export default {
      components: {
          DxDataGrid
      },
      data() {
          const serviceUrl = "https://url/to/my/service";
          const store = createStore({
              key: "ID",
              loadUrl: serviceUrl + "/GetAction",
              insertUrl: serviceUrl + "/InsertAction",
              updateUrl: serviceUrl + "/UpdateAction",
              deleteUrl: serviceUrl + "/DeleteAction"
          });
          return {
              store
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  import 'devextreme/dist/css/dx.light.css';
  
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  import DataGrid from 'devextreme-react/data-grid';
  
  const serviceUrl = "https://url/to/my/service";
  const store = createStore({
      key: "ID",
      loadUrl: serviceUrl + "/GetAction",
      insertUrl: serviceUrl + "/InsertAction",
      updateUrl: serviceUrl + "/UpdateAction",
      deleteUrl: serviceUrl + "/DeleteAction"
  });
  
  class App extends React.Component {
      render() {
          return (
              <DataGrid ...
                  dataSource={store} />
          );
      }
  }
  export default App;

  View Demo

• Any other data source
  Implement a CustomStore. View Demo

Regardless of the data source on the input, the DataGrid always wraps it in the DataSource object. This object allows you to sort, filter, group, and perform other data shaping operations. To get its instance, call the getDataSource() method.

Specify this property in the following cases:

• The dataSource is empty or not set at design time. The dateSerializationFormat is needed, because the DataGrid cannot detect it automatically without a data source.

• You use the createStore method from the DevExtreme.AspNet.Data extension and remote date-time values are specified in UTC. DevExtreme.AspNet.Data requires the dateSerializationFormat to correctly serialize these values.

Use one of the following values to specify the dateSerializationFormat property:

• "yyyy-MM-dd" - local date

• "yyyy-MM-ddTHH:mm:ss" - local date and time

• "yyyy-MM-ddTHH:mm:ssZ" - UTC date and time

• "yyyy-MM-ddTHH:mm:ssx", "yyyy-MM-ddTHH:mm:ssxx", "yyyy-MM-ddTHH:mm:ssxxx" - date and time with a timezone

This property applies only if the forceIsoDateParsing field is set to true in the global configuration object.

See Also

• Troubleshooting - Date String Handling Issues
• columns[].format

The UI component can allow a user to add, update and delete data. To control which of these operations are allowed, use the allowAdding, allowUpdating and allowDeleting properties. Editing can be carried out in different modes, which are detailed in the mode property's description.

View Demo

See Also

• Editing

The error row displays data-related errors that may occur on the server during the UI component's runtime. Setting this property to false hides the error row, but the errors can still be viewed in the browser's console.

See Also

• onDataErrorOccured

A user can click the Export button to save an Excel or PDF file with the exported data. Data types, sort, filter, and group settings are maintained.

The following instructions show how to enable and configure client-side export:

1. Install or reference the required libraries

   Install the following libraries for the export:

   • Excel: The ExcelJS v4.4.0+ and FileSaver v2.0.2+ libraries. If you apply CSP rules, refer to the ExcelJS CSP Treats section for more information about potential vulnerabilities.

   • PDF: The jsPDF library.

   jQuery

   <!-- Export to Excel -->
   <head>
       <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.4.0/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 -->
   <head>
       <!-- ... -->
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
       <!-- Reference the DevExtreme sources here -->
   </head>

   Angular

   Installation command

   tsconfig.app.json

   <!-- Export to Pdf  -->
   npm install jspdf
   
   <!-- Export to Excel -->
   npm install --save exceljs file-saver
   npm i --save-dev @types/file-saver

   <!-- Export to Excel -->
   {
       "compilerOptions": {
           // ...
           "outDir": "./out-tsc/app",
           "types": ["node"]
       },
   }

   Vue

   Installation command

   <!-- Export to Pdf  -->
   npm install jspdf
   
   <!-- Export to Excel -->
   npm install --save exceljs file-saver

   React

   Installation command

   <!-- Export to Pdf  -->
   npm install jspdf
   
   <!-- Export to Excel -->
   npm install --save exceljs file-saver

2. Enable the export UI
   Set the export.enabled property to true. This property enables export for all columns. Set a column's allowExporting property to false to prevent it from being exported:

   jQuery

   JavaScript

   $(function () {
       $("#dataGridContainer").dxDataGrid({
           export: {
               enabled: true
           },
           columns: [{ ...
               allowExporting: false
           }, 
               // ...
           ]
       });
   });

   Angular

   app.component.html

   app.component.ts

   app.module.ts

   <dx-data-grid ... >
       <dxo-export [enabled]="true"></dxo-export>
       <dxi-column ...
           [allowExporting]="false">
       </dxi-column>
   </dx-data-grid>

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   export class AppComponent {
       // ...
   }

   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 { }

   Vue

   App.vue

   <template>
       <DxDataGrid ... >
           <DxExport
               :enabled="true"
           />
           <DxColumn ... 
               :allow-exporting="false"
           />
       </DxDataGrid>
   </template>
   
   <script>
   import 'devextreme/dist/css/dx.light.css';
   
   import { DxDataGrid, 
       DxExport,
       DxColumn
   } from 'devextreme-vue/data-grid';
   
   export default {
       components: {
           DxDataGrid,
           DxExport,
           DxColumn
       }
   }
   </script>

   React

   App.js

   import React from 'react';
   import 'devextreme/dist/css/dx.light.css';
   
   import DataGrid, {
       Export,
       Column
   } from 'devextreme-react/data-grid';
   
   class App extends React.Component {
       render() {
           return (
               <DataGrid ... >
                   <Export enabled={true} />
                   <Column ...
                       allowExporting={false}
                   />
               </DataGrid>
           );
       }
   }
   export default App;

3. Export the DataGrid
   Implement the onExporting handler and call the excelExporter.exportDataGrid(options) or pdfExporter.exportDataGrid(options) method. In the code below, the exportDataGrid method exports the DataGrid as is. You can use ExcelExportDataGridProps/PdfExportDataGridProps to configure export settings. The DataGrid exports its data to an Excel worksheet or a PDF document. To save the Excel document, call the FileSaver's saveAs method. To save the PDF document, call the jsPDF's save method.

   The example below shows how to export DataGrid to Excel file.

   jQuery

   JavaScript

   $('#gridContainer').dxDataGrid({
       export: {
           enabled: true
       },
       onExporting: function(e) { 
           var workbook = new ExcelJS.Workbook(); 
           var worksheet = workbook.addWorksheet('Main sheet'); 
           DevExpress.excelExporter.exportDataGrid({ 
               worksheet: worksheet, 
               component: e.component,
               customizeCell: function(options) {
                   options.excelCell.font = { name: 'Arial', size: 12 };
                   options.excelCell.alignment = { horizontal: 'left' };
               } 
           }).then(function() {
               workbook.xlsx.writeBuffer().then(function(buffer) { 
                   saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx'); 
               }); 
           }); 
       }
   });

   Angular

   app.component.html

   app.component.ts

   app.module.ts

   <dx-data-grid ...
       (onExporting)="onExporting($event)">
       <dxo-export [enabled]="true"></dxo-export>
   </dx-data-grid>

   import { Component } from '@angular/core';
   import { exportDataGrid } from 'devextreme/excel_exporter';
   import { Workbook } from 'exceljs';
   import { saveAs } from 'file-saver';
   import { ExportingEvent } from 'devextreme/ui/data_grid';
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   export class AppComponent {
       onExporting(e: ExportingEvent) {
           const workbook = new Workbook();    
           const worksheet = workbook.addWorksheet('Main sheet');
           exportDataGrid({
               component: e.component,
               worksheet: worksheet,
               customizeCell: function(options) {
                   options.excelCell.font = { name: 'Arial', size: 12 };
                   options.excelCell.alignment = { horizontal: 'left' };
               } 
           }).then(function() {
               workbook.xlsx.writeBuffer()
                   .then(function(buffer: BlobPart) {
                       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
                   });
           });
       }
   }

   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 { }

   Vue

   App.vue

   <template>
       <DxDataGrid ...
           @exporting="onExporting">
           <DxExport
               :enabled="true"
           />
       </DxDataGrid>
   </template>
   
   <script>
   import 'devextreme/dist/css/dx.light.css';
   
   import { DxDataGrid, DxExport } 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
       },
       methods: {
           onExporting(e) {
               const workbook = new Workbook();
               const worksheet = workbook.addWorksheet('Main sheet');
               exportDataGrid({
                   component: e.component,
                   worksheet: worksheet,
                   customizeCell: function(options) {
                       options.excelCell.font = { name: 'Arial', size: 12 };
                       options.excelCell.alignment = { horizontal: 'left' };
                   } 
               }).then(function() {
                   workbook.xlsx.writeBuffer()
                       .then(function(buffer) {
                           saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
                       });
               });
           }
       }
   }
   </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 } 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} />
               </DataGrid>
           );
       }
       onExporting(e) {
           const workbook = new Workbook();
           const worksheet = workbook.addWorksheet('Main sheet');
           exportDataGrid({
               component: e.component,
               worksheet: worksheet,
               customizeCell: function(options) {
                   options.excelCell.font = { name: 'Arial', size: 12 };
                   options.excelCell.alignment = { horizontal: 'left' };
               } 
           }).then(function() {
               workbook.xlsx.writeBuffer()
                   .then(function(buffer) {
                       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
                   });
           });
       }
   }
   export default App;

   The example below shows how to export DataGrid to PDF document.

   jQuery

   JavaScript

   $(function(){
       $('#exportButton').dxButton({
           // ...
           onClick: function() {
               const doc = new jsPDF();
               DevExpress.pdfExporter.exportDataGrid({
                   jsPDFDocument: doc,
                   component: dataGrid
               }).then(function() {
                   doc.save('Customers.pdf');
               });
           }
       });
       const dataGrid = $('#gridContainer').dxDataGrid({
           // ...
       }).dxDataGrid('instance');
   });

   Angular

   app.component.html

   app.component.ts

   app.module.ts

   <dx-button ... 
       (onClick)="exportGrid($event)">
   </dx-button>
   
   <dx-data-grid ... >
       <!-- ... -->
   </dx-data-grid>

   import { Component } from '@angular/core';
   import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
   import { jsPDF } from 'jspdf';
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   export class AppComponent {
       @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
       exportGrid() {
           const doc = new jsPDF();
           exportDataGridToPdf({
               jsPDFDocument: doc,
               component: this.dataGrid.instance
           }).then(() => {
               doc.save('Customers.pdf');
           })
       }
   }

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { AppComponent } from './app.component';
   import { DxDataGridModule, DxButtonModule } from 'devextreme-angular';
   
   @NgModule({
       declarations: [
           AppComponent
       ],
       imports: [
           BrowserModule,
           DxDataGridModule,
           DxButtonModule
       ],
       providers: [ ],
       bootstrap: [AppComponent]
   })
   export class AppModule { }

   Vue

   App.vue

   <template>
       <div>
           <DxButton ...
               @click="exportGrid()"
           />
           <DxDataGrid ...
               :ref="dataGridRef">
               <!-- ... -->
           </DxDataGrid>
       </div>
   </template>
   
   <script>
   import 'devextreme/dist/css/dx.light.css';
   
   import DxDataGrid from 'devextreme-vue/data-grid';
   import DxButton from 'devextreme-vue/button';
   import { jsPDF } from 'jspdf';
   import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
   const dataGridRef = 'dataGrid';
   export default {
       components: {
           DxDataGrid,
           DxButton
       },
       data() {
           return {
               dataGridRef
           };
       },
       computed: {
           dataGrid: function() {
               return this.$refs[dataGridRef].instance;
           }
       },
       methods: {
           exportGrid() {
               const doc = new jsPDF();
               exportDataGridToPdf({
                   jsPDFDocument: doc,
                   component: this.dataGrid
               }).then(() => {
                   doc.save('Customers.pdf');
               });
           }
       }
   }
   </script>

   React

   App.js

   import React from 'react';
   import 'devextreme/dist/css/dx.light.css';
   
   import DataGrid from 'devextreme-react/data-grid';
   import Button from 'devextreme-react/button';
   import { jsPDF } from 'jspdf';
   import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
   export default function App() {
       const dataGridRef = useRef(null);
       function exportGrid() {
           const doc = new jsPDF();
           const dataGrid = dataGridRef.current.instance();
           exportDataGridToPdf({
               jsPDFDocument: doc,
               component: dataGrid
           }).then(() => {
               doc.save('Customers.pdf');
           });
       }
       return (
           <React.Fragment>
               <div>
                   <Button ...
                       onClick={exportGrid}
                   />
                   <DataGrid ...
                       ref={dataGridRef}
                       >
                       {/* ... */}
                   </DataGrid>
               </div>
           </React.Fragment>
       );
   }

The following restrictions apply when users export DataGrid:

• Only XLSX and PDF files are supported out of the box. To export DataGrid to CSV, call the excelExporter.exportDataGrid(options) method as shown in the formats property example. Refer to the CSV Injection section to take the threat of a CSV Injection Attack into account.

• Excel limits the number of grouping levels to 7, while in the DataGrid it is unlimited.

• Only visible columns are exported. See the onExporting property description for a workaround.

• Detail rows are not exported.

• Group rows are always exported in an expanded state and the isExpanded property is ignored.

• Customizations made in the cellTemplate, groupCellTemplate, headerCellTemplate, and dataRowTemplate are omitted, but you can recreate them in the exported file. For this purpose, use the excelExporter.customizeCell or pdfExporter.customizeCell function. Refer to the following demos for more information: Excel Cell Customization, PDF Cell Customization.

• Data mapping is ignored. Use calculated columns instead.

Export to Excel Overview Demo Export to PDF Overview Demo Export Images to Excel Demo Export Images to PDF Demo

See the FilterBuilder configuration for properties that you can specify in this object. Do not specify the fields array because the DataGrid automatically populates it to sync filter builder fields with grid columns.

View Demo

See Also

• filterBuilderPopup
• filterPanel
• filterValue
• filterSyncEnabled

See the Popup configuration for properties that you can specify in this object.

View Demo

See Also

• Filter Panel with Filter Builder

The filter panel displays the applied filter expression.

Clicking on the filter expression opens the filter builder.

If you change the filter expression in the filter panel or filter builder, the changes are reflected in the filter row and header filter, and vice versa. You can disable this synchronization by setting the filterSyncEnabled property to false. In this case, the filter panel remains synchronized with the filter builder.

View Demo

See Also

• Filter Panel with Filter Builder
• filterBuilderPopup

The filter row allows a user to filter data by values of individual columns.

Each cell in the filter row contains a magnifying glass icon. Hovering over this icon opens a drop-down list with filters available for the column.

To make the filter row visible, assign true to the filterRow.visible property.

DataGrid Demo TreeList Demo

See Also

• Filter Row
• filter(filterExpr)
• clearFilter(filterName)

Synchronization is enabled if the filter panel is visible. When it is enabled, check that each column that allows filter operations has the dataField or name property specified.

If filterSyncEnabled is true, the filter expression includes a combination of the filter row, header filter, and filter builder filters. Otherwise, it contains only the filter builder filter.

Note that you should convert date strings into JavaScript Date objects before using them in the filter expression.

The filter expression can contain the following operations: "=", "<>", "<", ">", "<=", ">=", "between", "contains", "notcontains", "startswith", "endswith", "anyof", "noneof", and the filter builder's custom operations. Use "anyof" and "noneof" to select and clear the selection of items in the header filter's popup menu. In the following code, "anyof" is used to select items with IDs 500 and 700:

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        filterSyncEnabled: true,
        headerFilter: { visible: true },
        filterValue: ["ID", "anyof", [500, 700]], 
    })
});

<dx-data-grid ...
    [filterSyncEnabled]="true"
    [filterValue]="['ID', 'anyof', [500, 700]]"> 
    <dxo-header-filter 
        [visible]="true">
    </dxo-header-filter>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<template>
    <DxDataGrid ...
        :filter-sync-enabled="true"
        :filter-value="filterValue"> 
        <DxHeaderFilter :visible="true" />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxHeaderFilter,
    // ...
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxHeaderFilter,
        // ...
    },
    data() {
        return {
            filterValue: ['ID', 'anyof', [500, 700]]
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    HeaderFilter,
    // ...
} from 'devextreme-react/data-grid';

const filterValue = ['ID', 'anyof', [500, 700]];

class App extends React.Component {
    render() {
        return (
            <DataGrid ...
                filterSyncEnabled={true}
                defaultFilterValue={filterValue}>
                <HeaderFilter visible={true} />
            </DataGrid>
        );
    }
}
export default App;

@(Html.DevExtreme().DataGrid()
    // ...
    .FilterSyncEnabled(true)
    .HeaderFilter(hf => hf.Visible(true))
    .FilterValue("['ID', 'anyof', [500, 700]]")
)

If a column's groupInterval property is set, the "anyof" and "noneof" operations for this column accept the beginning of intervals instead of exact values:

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        headerFilter: { visible: true },
        filterValue: ["ID", "anyof", [500, 700]], // Filter intervals are 500-600 and 700-800
        columns: [{
            dataField: "ID",
            dataType: "number",
            headerFilter: { groupInterval: 100 }
        },
        // ...
        ]
    })
});

<dx-data-grid ...
    <!-- Filter intervals are 500-600 and 700-800 -->
    [(filterValue)]="['ID', 'anyof', [500, 700]]">
        <dxo-header-filter 
            [visible]="true">
        </dxo-header-filter>
        <dxi-column
            dataField="ID"
            dataType="number">
                <dxo-header-filter 
                    [groupInterval]="100">
                </dxo-header-filter>
        </dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<template>
    <DxDataGrid ...
        <!-- Filter intervals are 500-600 and 700-800 -->
        :filter-value="filterValue">
        <DxHeaderFilter :visible="true" />
        <DxColumn
            data-field="ID"
            data-type="number">
            <DxColumnHeaderFilter :group-interval="100" />
        </DxColumn>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumn,
    DxHeaderFilter,
    DxColumnHeaderFilter,
    // ...
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxHeaderFilter,
        DxColumnHeaderFilter,
        // ...
    },
    data() {
        return {
            filterValue: ['ID', 'anyof', [500, 700]]
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Column,
    HeaderFilter,
    ColumnHeaderFilter,
    // ...
} from 'devextreme-react/data-grid';

const filterValue = ['ID', 'anyof', [500, 700]];

class App extends React.Component {
    render() {
        return (
            <DataGrid ...
                {/* Filter intervals are 500-600 and 700-800 */}
                defaultFilterValue={filterValue}>
                <HeaderFilter visible={true} />
                <Column
                    dataField="ID"
                    dataType="number">
                    <ColumnHeaderFilter groupInterval={100} />
                </Column>
            </DataGrid>
        );
    }
}
export default App;

@(Html.DevExtreme().DataGrid()
    // ...
    // Filter intervals are 500-600 and 700-800
    .HeaderFilter(headerFilter => headerFilter.Visible(true))
    .FilterValue("['ID', 'anyof', [500, 700]]")
    .Columns(columns => {
        columns.AddFor(m => m.ID)
            .DataType(GridColumnDataType.Number)
            .HeaderFilter(hf => hf.GroupInterval(100));
        // ...
    })
)

See Also

• Filter Panel with Filter Builder

Unlike banded columns, Band columns cannot be focused.

The default index, -1, means that no column is focused.

See Also

• onFocusedCellChanging | onFocusedCellChanged
• focusedRowIndex | focusedRowKey

When this property is set to true, the following applies:

• Rows are initially sorted by keys if any field of remoteOperations is true.
• The row with focusedRowIndex or focusedRowKey is highlighted.
• When the data row area is focused, this row is focused and the area is scrolled down to it.
• The onFocusedRowChanging and onFocusedRowChanged functions become active.

DataGrid generates additional requests with comparison operators (for example, < and >) to calculate the page number where a row with a focused key is located. This logic does not work for certain key types (for example, GUID) and data providers (for example, ODataStore). You need to disable the autoNavigateToFocusedRow property or set remoteOperations to false to ensure it operates correctly.

View Demo

See Also

• navigateToRow(key)
• focusedColumnIndex
• key in ArrayStore | CustomStore | LocalStore | ODataStore

Ensure that focusedRowEnabled is true for focusedRowIndex to work.

The focused row has a key and index on a page. When the pager is used for navigation, the focused row's index persists from page to page, but corresponds to a different row with a different key on each page.

The default index of -1 indicates that no row is focused.

The focusedRowKey takes precedence over the focusedRowIndex when both are specified.

See Also

• onFocusedRowChanging | onFocusedRowChanged
• focusedColumnIndex
• Column and Row Indexes

Ensure that focusedRowEnabled is true for focusedRowKey to work.

The focused row has a key and index on a page. When the pager is used for navigation, the focused row's index persists from page to page but corresponds to a different row with a different key on each page.

In the DataGrid, group rows can also be focused. See the Group Index and Key topic for more information on how group keys are formed.

View Demo

See Also

• focusedRowIndex
• onFocusedRowChanging | onFocusedRowChanged
• focusedColumnIndex

Record Grouping Demo Remote Grouping Demo

See Also

• Grouping

Data in DataGrid can be grouped by one column or by several. Once a column is used for grouping, it is added to the group panel.

By default, the group panel is hidden. To make it visible, set the groupPanel.visible property to true. Alternatively, the visibility of the group panel can depend on the device's screen size. To accomplish this behavior, set the visible property to "auto".

In case you need to show the group panel, but make it irresponsive, assign false to the groupPanel.allowColumnDragging property. This is useful, for instance, when grid records are grouped initially and when the user needs to know about that grouping, but must not be able to change it.

Record Grouping Demo Remote Grouping Demo

See Also

• Grouping
• grouping.contextMenuEnabled - enables the user to group data using the context menu.
• columns[].allowGrouping - disables group operations for an individual column.

A header filter allows a user to filter values in an individual column by including/excluding them in/from the applied filter. A click on a header filter icon invokes a popup menu with all unique values in the column. By selecting or clearing the selection of values in this menu, the user includes/excludes them in/from the filter.

To make header filter icons visible, assign true to the headerFilter.visible property.

A header filter's popup menu lists all column values. If they are numbers or dates, you can group them using the groupInterval property in the column's headerFilter. You can also provide a custom data source for a header filter using the dataSource property.

The user's filtering preferences are saved in the filterValues property. The header filter's Select All checkbox changes the filterType property.

DataGrid Demo TreeList Demo

See Also

• Header Filter
• columns[].allowHeaderFiltering
• filter(filterExpr)
• clearFilter(filterName)

This property accepts a value of one of the following types:

• Number
  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.

Collaborative Editing Demo SignalR Service Demo

You can change the following CSS rules and classes that control highlighting:

@keyframes dx-datagrid-highlight-change {
    from {
        background-color: #efefef;
    }
    50% {
        background-color: #efefef;
    }
}
.dx-datagrid-cell-updated-animation {
    animation: dx-datagrid-highlight-change 1s;
}
.dx-datagrid-row-inserted-animation {
    animation: dx-datagrid-highlight-change 1s;
}

View Demo

View Demo

View Demo

See Also

• key in ArrayStore | CustomStore | LocalStore | ODataStore

The load panel is displayed while the UI component loads data. It consists of a loading indicator and text, both placed on a pane.

Since the load panel is, in fact, the DevExtreme LoadPanel UI component, the loadPanel object can contain any properties of this UI component along with properties described here.

See Also

• Load Panel
• beginCustomLoading(messageText)
• endCustomLoading()

In DataGrid, a master-detail interface supplies a usual data row with an expandable section that contains the details on this data row. In that case, the data row is called "master row", while the section is called "detail section".

To enable the master-detail interface, assign true to the masterDetail.enabled property. After that, specify the template for detail sections using the masterDetail.template property. Templates allow you to place virtually anything into the detail sections. For example, you can display another DataGrid or any other UI component there. For more information on specifying the template for the detail sections, see the template property description.

Master-Detail View Demo Advanced Master-Detail View Demo

See Also

• Master-Detail Interface

Adaptive detail rows display information from columns that were hidden when the UI component adapted to the screen or container size. Each adaptive detail row contains the Form UI component that you can customize within the onAdaptiveDetailRowPreparing function using the formOptions object. Refer to the Form Configuration section for details on properties of the Form UI component.

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onAdaptiveDetailRowPreparing: function(e) {
            e.formOptions.colCount = 2;
            e.formOptions.colCountByScreen = {
                xs: 2
            }
            e.formOptions.labelLocation = 'left';
        }
    })
})

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    onAdaptiveDetailRowPreparing(e) {
        e.formOptions.colCount = 2;
        e.formOptions.colCountByScreen = {
            xs: 2
        }
        e.formOptions.labelLocation = 'left';
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<dx-data-grid ...
    (onAdaptiveDetailRowPreparing)="onAdaptiveDetailRowPreparing($event)">
</dx-data-grid>

<template>
    <DxDataGrid
        @adaptive-detail-row-preparing="onAdaptiveDetailRowPreparing"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    },
    methods: {
        onAdaptiveDetailRowPreparing(e) {
            e.formOptions.colCount = 2;
            e.formOptions.colCountByScreen = {
                xs: 2
            }
            e.formOptions.labelLocation = 'left';
        }
    }
}
</script>

<template>
    <DxDataGrid
        @adaptive-detail-row-preparing="onAdaptiveDetailRowPreparing"
    />
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-vue/data-grid';

const onAdaptiveDetailRowPreparing = (e) => {
    e.formOptions.colCount = 2;
    e.formOptions.colCountByScreen = {
        xs: 2
    }
    e.formOptions.labelLocation = 'left';
}
</script>

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

View on GitHub

To identify whether the pointer has entered or left the cell, check the eventType field's value.

View on GitHub

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.

$(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");
                })
            }
        }
    })
})

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>

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

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;

@(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>

View on GitHub

See Also

• Customize Cells

In the following code, the onContextMenuPreparing function adds a custom item to the context menu invoked when a user right-clicks any column header:

$(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);
                    }
                });
            } 
        }
    });
});

<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 { }

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

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;

View on GitHub

Handles errors that might occur in the data source. To obtain a human-readable description of the error in the function, use the error.message field.

View Demo

An edit operation can be canceled from the UI (with the Cancel button) or programatically (with the cancelEditData() method).

View Demo

If the editing.mode is "batch" or "cell", this function is executed while the UI component renders columns of boolean dataType and other columns whose showEditorAlways property is true.

View Demo

View on GitHub

Use this function to:

• 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 { }

  Vue

  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.

View Demo

See Also

• columns[].showEditorAlways

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.

$(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();
            });
        }
    });
});

<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 { }

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

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

See Also

• focusedRowIndex | focusedRowKey
• focusedColumnIndex

View Demo

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:

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onFocusedCellChanging: function (e) {
            if (e.newColumnIndex == e.prevColumnIndex) {
                e.newColumnIndex = (e.newColumnIndex == 0 ? e.columns.length - 1 : 0)
            }
        }
    });
});

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>

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

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

View Demo

See Also

• focusedRowIndex | focusedRowKey
• focusedColumnIndex

View Demo

See Also

• focusedRowIndex | focusedRowKey
• focusedColumnIndex

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

<template>
    <div>
        <DxDataGrid ...
            @initialized="saveInstance">
        </DxDataGrid>
    </div>
</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>
    <div>
        <DxDataGrid ...
            @initialized="saveInstance">
        </DxDataGrid>
    </div>
</template>

<script setup>
import DxDataGrid from 'devextreme-vue/data-grid';

let dataGridInstance = null;

const saveInstance = (e) => {
    dataGridInstance = e.component;
}
</script>

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 (
            <div>
                <DataGrid onInitialized={this.saveInstance} />
            </div>
        );
    }
}

See Also

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:

$(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;
    } 
})

<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 { }

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

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;

@(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 following code shows how to handle a key combination:

$(function() {
    $("#dataGrid").dxDataGrid({
        // ...
        onKeyDown(e) {
            if (e.event.ctrlKey && e.event.key === "Q") {
                console.log("Ctrl + Q was pressed"); 
            }
        }
    });
});

<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 { }

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

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 following example shows how to subscribe to component property changes:

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<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 { }  

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

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 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:

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        editing: { mode: "form" },
        onRowClick: function(e) {
            if(e.rowType === "data") {
                e.component.editRow(e.rowIndex);
            }
        }
    });
});

<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 { }

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

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;

@(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>

To cancel row collapsing, assign true to the cancel field of the function parameter.