JavaScript/jQuery DataGrid Options

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

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 option to true.

See Also

• columns[].allowReordering

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

See Also

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

When this option is set to true, data loaded once is saved in cache. Then, the widget 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 widget or the load() method of the DataSource.

See Also

• Data Caching
• getDataSource()

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

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

If the widget's overall content is narrower than the widget's width, the columns are stretched to fit the widget. To avoid this, set the columns.width option to "auto".

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

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

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

See Also

• Column Chooser
• columns[].allowHiding

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

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

DataGrid Demo TreeList Demo

See Also

• Column Fixing

This option set to true makes the widget hide certain columns automatically if all the columns do not fit the widget'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.

See Also

• onAdaptiveDetailRowPreparing
• Adaptability

See Also

• columns[].minWidth
• allowColumnResizing
• columnResizingMode

The columnResizingMode option 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 widget changes.
  This mode is ignored if you specify the width of any column in percent.

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 option. 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 options 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 options, apply a filter to grid records using the allowFiltering and filterOperations options, and group grid records using the allowGrouping and groupIndex options. In addition, you can change the visibility and width of a column using corresponding options.

To get or set an option or several options 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

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>

For a more detailed column customization, declare the columns array.

This function is called between the onExporting and onExported functions. This function customizes data; the other functions can be used to customize grid columns.

In the following code, the customizeExportData function replaces empty values with the "Is Blank" value:

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        customizeExportData: function (columns, rows) {
            rows.forEach(function (row) {
                var rowValues = row.values;
                for (var i = 0; i < rowValues.length; i++) {
                    if (rowValues[i] == "")
                        rowValues[i] = "Is Blank";
                }
            })
        }
    });
});

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    customizeExportData (columns, rows) {
        rows.forEach(function (row) {
            let rowValues =  row.values;
            for(let i = 0; i < rowValues.length; i++) {
                if (rowValues[i] == "")
                    rowValues[i] = "Is Blank";
            }
        })
    };
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

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

See Also

• Client-Side Exporting
• export.enabled
• columns[].allowExporting

If you use DevExtreme ASP.NET MVC Controls, refer to the Bind Controls to Data article.

The DataGrid works with collections of objects.

Depending on your data source, bind the 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 option 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 widgets 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.common.css';
  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.common.css';
  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 otherwise shape data. To get its instance, call the getDataSource() method.

Without a data source, the widget cannot detect the date-time values' format. In this case, specify the dateSerializationFormat option that supports the following formats:

• "yyyy-MM-dd" - a local date

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

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

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

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

See Also

• format

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

View Demo

See Also

• Editing

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

See Also

• onDataErrorOccured

When client-side exporting is enabled, the grid toolbar contains the Export button ( ) that exports grid data to Excel. For details on exporting, refer to the Client-Side Exporting article.

View Demo

See the FilterBuilder configuration for options that you can specify in this object.

See Also

• Filter Panel with Filter Builder

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

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 option to false. In this case, the filter panel remains synchronized with the filter builder.

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, pausing on which opens a drop-down list with filters available for the column.

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

View 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 filtering has the dataField or name option 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.

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.common.css';
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.common.css';
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 option 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.common.css';
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.common.css';
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

This index depends on the column's location and can change dynamically (for example, when columns are reordered). The following image illustrates the indexing system. Note that command columns have indexes but cannot be focused.

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

See Also

• onFocusedCellChanging | onFocusedCellChanged
• focusedRowIndex | focusedRowKey

When this option 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.

View Demo

See Also

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

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, -1, means that no row is focused.

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

See Also

• onFocusedRowChanging | onFocusedRowChanged
• focusedColumnIndex

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

View 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 option to true. Alternatively, the visibility of the group panel can depend on the device's screen size. To accomplish this behavior, set the visible option to "auto".

In case you need to show the group panel, but make it irresponsive, assign false to the groupPanel.allowColumnDragging option. 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.

See Also

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

View Demo

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

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

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

See Also

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

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

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

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

See Also

• key in ArrayStore | CustomStore | LocalStore | ODataStore

The load panel is displayed while the widget 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 widget, the loadPanel object can contain any options of this widget along with options 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 option. After that, specify the template for detail sections using the masterDetail.template option. Templates allow you to place virtually anything into the detail sections. For example, you can display another DataGrid or any other UI widget there. For more information on specifying the template for the detail sections, see the template option description.

View Demo

See Also

• Master-Detail Interface

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

See Also

• columnHidingEnabled
• columns[].hidingPriority
• Adaptability

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

View Demo

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.common.css';
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.common.css';
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>

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.common.css';
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.common.css';
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;

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.

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

View Demo

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") {
                  var standardHandler = e.editorOptions.onValueChanged;
                  e.editorOptions.onValueChanged = function(e) { // Overrides the standard handler
                      // ...
                      // Custom commands go here
                      // ...
                      standardHandler(e); // Calls the standard handler to save the edited value
                  }
              }
          }
      });
  });

  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') {
              let standardHandler = e.editorOptions.onValueChanged;
              e.editorOptions.onValueChanged = function (e) { // Overrides the standard handler
                  // ...
                  // Custom commands go here
                  // ...
                  standardHandler(e); // Calls the standard handler to save the edited value
              }
          }
      }
  }

  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.common.css';
  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') {
                  let standardHandler = e.editorOptions.onValueChanged;
                  e.editorOptions.onValueChanged = function (e) { // Overrides the standard handler
                      // ...
                      // Custom commands go here
                      // ...
                      standardHandler(e); // Calls the standard handler to save the edited value
                  }
              }
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.common.css';
  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') {
              let standardHandler = e.editorOptions.onValueChanged;
              e.editorOptions.onValueChanged = function (e) { // Overrides the standard handler
                  // ...
                  // Custom commands go here
                  // ...
                  standardHandler(e); // Calls the standard handler to save the edited value
              }
          }
      }
      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") {
              var standardHandler = e.editorOptions.onValueChanged;
              e.editorOptions.onValueChanged = function(e) { // Overrides the standard handler
                  // ...
                  // Custom commands go here
                  // ...
                  standardHandler(e); // Calls the standard handler to save the edited value
              }
          }
      }
  </script>

• Replace the default editor. The old editor's configuration applies to the replacement editor. To define the configuration from scratch, use an editCellTemplate.

  In the following code, the DevExtreme TextArea widget is the replacement editor:

  jQuery

  index.js

  $(function() {
      $("#dataGridContainer").dxDataGrid({
          // ...
          onEditorPreparing: function(e) {
              if (e.dataField === "description" && e.parentType === "dataRow") {
                  e.editorName = "dxTextArea";
              }
          }
      });
  });

  Angular

  app.component.html

  app.component.ts

  app.module.ts

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

  import { Component } from '@angular/core';
  import 'devextreme/ui/text_area';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      replaceEditor(e) { 
          if (e.dataField === 'description' && e.parentType === 'dataRow') {
              e.editorName = 'dxTextArea';
          }
      }
  }

  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="replaceEditor">
      </DxDataGrid>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import DxDataGrid from 'devextreme-vue/data-grid';
  import 'devextreme/ui/text_area';
  
  export default {
      components: {
          DxDataGrid
      },
      // ...
      methods: {
          replaceEditor(e) { 
              if (e.dataField === 'description' && e.parentType === 'dataRow') {
                  e.editorName = 'dxTextArea';
              }
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import DataGrid from 'devextreme-react/data-grid';
  import 'devextreme/ui/text_area';
  
  class App extends React.Component {
      replaceEditor(e) { 
          if (e.dataField === 'description' && e.parentType === 'dataRow') {
              e.editorName = 'dxTextArea';
          }
      }
      render() {
          return (
              <DataGrid ...
                  onEditorPreparing={this.replaceEditor}>
              </DataGrid>
          );
      }
  }
  export default App;

  ASP.NET MVC Controls

  Razor C#

  @(Html.DevExtreme().DataGrid()
      // ...
      .OnEditorPreparing("replaceEditor")
  )
  
  <script type="text/javascript">
      function replaceEditor(e) {
          if (e.dataField === "description" && e.parentType === "dataRow") {
              e.editorName = "dxTextArea";
          }
      }
  </script>

• Customize editors used in the search panel, filter row, and selection column.
  Use the parentType function parameter to check if the editor being customized belongs to one of these UI elements.

• Dynamically change editor options in the editing state.

• Implement other customization cases.

View Demo

See Also

• columns[].showEditorAlways

You can use this function with the onExporting function to adjust columns before exporting. See an example in the onExporting description.

See Also

• Client-Side Exporting
• customizeExportData
• onFileSaving

You can use this function with the onExported function to adjust columns before export. In the following code, these functions are used to export a hidden ID column:

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "ID",
            visible: false
        }, // ...
        ]
        onExporting: function (e) {
            e.component.beginUpdate();
            e.component.columnOption("ID", "visible", true);
        },
        onExported: function (e) {
            e.component.columnOption("ID", "visible", false);
            e.component.endUpdate();
        }
    });
});

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    onExporting (e) {
        e.component.beginUpdate();
        e.component.columnOption("ID", "visible", true);
    };
    onExported (e) {
        e.component.columnOption("ID", "visible", false);
        e.component.endUpdate();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<dx-data-grid ...
    (onExporting)="onExporting($event)"
    (onExported)="onExported($event)">
    <!-- ... -->
    <dxi-column dataField="ID" [visible]="false"></dxi-column>
</dx-data-grid>

See Also

• Client-Side Exporting
• export
• customizeExportData
• onFileSaving

See Also

• Client-Side Exporting - Events
• onExporting
• onExported

See Also

• focusedRowIndex | focusedRowKey
• focusedColumnIndex

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>

See Also

• focusedRowIndex | focusedRowKey
• focusedColumnIndex

View Demo

See Also

• focusedRowIndex | focusedRowKey
• focusedColumnIndex

View Demo

See Also

• focusedRowIndex | focusedRowKey
• focusedColumnIndex

See Also

• Get a Widget Instance in Angular | AngularJS | Knockout | Vue | React

Using this function, you can populate a newly added row with data by default. Add fields to the data object so that they correspond to fields of a data source object. Note that the data object may omit some fields present in the data source object. Add only those fields that must initialize specific cells of a new row.

In the following code, the onInitNewRow function is used to provide default values for the hireDate and position cells of a new row:

$(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.data.position = "Programmer";
        }
    });
})

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

@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.data.position = "Programmer";
    }
}

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($event)">
        <DxColumn data-field="ID" />
        <DxColumn data-field="hireDate" data-type="date" />
        <DxColumn data-field="position" />
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

const employees = [{
    ID: 1,
    hireDate: 1491821760000,
    position: "CTO"
}, // ...
];

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    data() {
        employees
    },
    methods: {
        initNewRow(e) {
            e.data.hireDate = new Date();
            e.data.position = "Programmer";
        }
    }
};
</script>

import React from 'react';

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

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

const employees = [{
    ID: 1,
    hireDate: 1491821760000,
    position: "CTO"
}, // ...
];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.onInitNewRow = this.onInitNewRow.bind(this);
    }

    onInitNewRow(e) {
        e.data.hireDate = new Date();
        e.data.position = "Programmer";
    }

    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.data.position = "Programmer";
    }
</script>

The widget 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.common.css';
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.common.css';
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.

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

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 row data validation on the server succeeds (the Promise is resolved); otherwise, row insertion is prevented (the Promise is rejected).

$(function(){
    $("#dataGridContainer").dxDataGrid({
        // ...
        onRowInserting: function(e) {
            var d = $.Deferred();
            $.getJSON("https://url/to/your/validation/service", JSON.stringify(e.data))
                .then(function(result) {
                    return !result.errorText ? d.resolve() : d.reject(result.errorText);
                })
                .fail(function() { 
                    return.reject(); 
                })
            e.cancel = d.promise();
        }
    })
})

import { DxDataGridModule } from "devextreme-angular";
import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
import "rxjs/add/operator/toPromise";
// ...
export class AppComponent {
    constructor(private httpClient: HttpClient) { /*...*/}
    onRowInserting(e) {
        let params = new HttpParams({ fromString: JSON.stringify(e.data) });
        let result = this.httpClient.get("https://url/to/your/validation/service", { params: params })
            .toPromise();
        e.cancel = new Promise((resolve, reject) => {
            result.then((validationResult) => {
                !validationResult.errorText ? resolve() : reject(validationResult.errorText)
            })
            .catch(() => reject());
        })    
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        HttpClientModule
    ],
    // ...
})

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

The following code shows how to use the function parameter's cancel field to prevent or continue row removal. In this code, a Promise is assigned to this field. Row removal continues if checks on the server succeed (the Promise is resolved); otherwise, row removal is prevented (the Promise is rejected).

$(function(){
    $("#dataGridContainer").dxDataGrid({
        // ...
        onRowRemoving: function(e) {
            var d = $.Deferred();
            $.getJSON("https://url/to/your/validation/service", JSON.stringify(e.data))
                .then(function(result) {
                    return !result.errorText ? d.resolve() : d.reject(result.errorText)
                })
                .fail(function() { 
                    return d.reject(); 
                })
            e.cancel = d.promise();
        }
    })
})

import { DxDataGridModule } from "devextreme-angular";
import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
import "rxjs/add/operator/toPromise";
// ...
export class AppComponent {
    constructor(private httpClient: HttpClient) { /*...*/}
    onRowRemoving(e) {
        let params = new HttpParams({ fromString: JSON.stringify(e.data) });
        let result = this.httpClient.get("https://url/to/your/validation/service", { params: params })
            .toPromise();
        e.cancel = new Promise((resolve, reject) => {
            result.then((validationResult) => {
                !validationResult.errorText ? resolve() : reject(validationResult.errorText)
            })
            .catch(() => reject());
        })    
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        HttpClientModule
    ],
    // ...
})

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

The following code shows how to use the function parameter's cancel field to prevent or continue row updating. In this code, a Promise is assigned to this field. Row updating continues if row data validation on the server succeeds (the Promise is resolved); otherwise, row updating is prevented (the Promise is rejected).

$(function(){
    $("#dataGridContainer").dxDataGrid({
        // ...
        onRowUpdating: function(e) {
            var d = $.Deferred();
            $.getJSON("https://url/to/your/validation/service", JSON.stringify(e.data))
                .then(function(result) {
                    return !result.errorText ? d.resolve() : d.reject(result.errorText); 
                })
                .fail(function() { 
                    return d.reject(); 
                })
            e.cancel = d.promise();
        }
    })
})

import { DxDataGridModule } from "devextreme-angular";
import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
import "rxjs/add/operator/toPromise";
// ...
export class AppComponent {
    constructor(private httpClient: HttpClient) { /*...*/}
    onRowUpdating(e) {
        let params = new HttpParams({ fromString: JSON.stringify(e.data) });
        let result = this.httpClient.get("https://url/to/your/validation/service", { params: params })
            .toPromise();
        e.cancel = new Promise((resolve, reject) => {
            result.then((validationResult) => {
                !validationResult.errorText ? resolve() : reject(validationResult.errorText)
            })
            .catch(() => reject());
        })    
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        HttpClientModule
    ],
    // ...
})

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

Use this function to interfere before a message on the broken validation rules is displayed. For instance, you can perform additional checks in this function and change the validation result by changing the isValid field of the function parameter. Or, you can correct the error message using the errorText field of the same parameter.

This function has the following specifics:

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

View Demo

This function allows you to customize the toolbar. Depending on the configuration, the widget may add the following items to the toolbar:

• - "columnChooserButton"
• - "addRowButton"
• - "saveButton"
• - "revertButton"
• - "exportButton"
• - "applyFilterButton"
• "groupPanel"
• "searchPanel"

The following code shows how you can customize the toolbar using this function.

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onToolbarPreparing: function (e) {
            var toolbarItems = e.toolbarOptions.items;
            // Modifies an existing item
            $.each(toolbarItems, function(_, item) {
                if(item.name === "saveButton") {
                    // Change the item options here
                }
            }); 

            // Adds a new item
            toolbarItems.push({
                widget: "dxButton", 
                options: { icon: "user", onClick: function() { ... } },
                location: "after"
            });
        }
    });
});

import { DxDataGridModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    onToolbarPreparing (e) { 
        var toolbarItems = e.toolbarOptions.items;
        // Modifies an existing item
        toolbarItems.forEach(function(item) {
            if (item.name === "saveButton") {
                // Change the item options here
            }
        });

        // Adds a new item
        toolbarItems.push({
            widget: "dxButton", 
            options: { icon: "user", onClick: function () { ... } },
            location: "after"
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        DxButtonModule
    ],
    // ...
})

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

View Demo

The pager is an element that allows users to navigate through pages and change their size at runtime. The pager consists of the page navigator and several optional elements: the page size selector, navigation buttons, and page information.

View Demo

See Also

• Paging - User Interaction

Paging allows the widget to load data in portions instead of loading it at once. To enable paging, set the paging.enabled option to true.

View Demo

See Also

• Paging

Server-side data processing improves the widget'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 widget 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 widget functionality.

The following restrictions apply to widget functionality when operations are remote:

• Columns with the calculateCellValue or calculateDisplayValue option set cannot be sorted, filtered, or used for grouping.

• The calculateGroupValue and calculateSortValue options accept only string values.

• Custom summary calculation is not supported.

• The calculateFilterExpression option 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 Service | PHP Service | MongoDB Service | Custom Sources

See Also

• columns.renderAsync

See Also

• push(changes) in: ArrayStore | CustomStore | LocalStore | ODataStore
• DataSource.reshapeOnPush

All rows are monochrome without any visual distinctions by default. However, if you set this option to true, ordinary-looking rows will alternate with slightly shaded ones.

View Demo

In AngularJS and Knockout, use the dxTemplate and declare it within a <table> element. In other cases, declare the markup in a <tbody> element with the dx-row class.

$(function() {
    $("dataGridContainer").dxDataGrid({
        // ...
        rowTemplate: function(container, item) {
            var data = item.data,
                markup = "<tbody class='dx-row'>" +
                    "<tr>" +
                        "<td>" + item.data.id + "</td>" +
                        "<td>" + item.data.name + "</td>" +  
                    "</tr>" +
                "</tbody>";
            container.append(markup);
        }
    });
});

<dx-data-grid ...
    rowTemplate="rowTemplateName">
    <tbody class="dx-row" *dxTemplate="let item of 'rowTemplateName'" >
        <tr>
            <td>{{item.data.id}}</td>
            <td>{{item.data.name}}</td>
        </tr>
    </tbody>
</dx-data-grid>

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

<div dx-data-grid="{
        ...
        rowTemplate: 'rowTemplateName'
    }" dx-item-alias="item">
        <table data-options="dxTemplate: { name: 'rowTemplateName' }" >
            <tr>
                <td>{{item.data.id}}</td>
                <td>{{item.data.name}}</td>
            </tr>
        </table>
    </div>

<div data-bind="dxDataGrid: {
        ...
        rowTemplate: 'rowTemplateName'
    }">
        <table data-options="dxTemplate: { name: 'rowTemplateName' }" >
            <tr>
                <td data-bind="text: data.id"></td>
                <td data-bind="text: data.name"></td>
            </tr>
        </table>
    </div>