All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
Box
Row
Map
Vue
A newer version of this page is available. Switch to the current version.

jQuery DataGrid Methods

This section describes the methods that can be used to manipulate the DataGrid widget.

See Also

addColumn(columnOptions)

Adds a new column.

Parameters:
columnOptions:

Object

|

String

The column's configuration or the data field for which the column should be created.

This method is intended to add columns at runtime. To add columns at design-time, use the columns array.

If stateStoring is enabled, the added column is saved in the widget's state after the creation.

NOTE
Do not use this method to control a column's visibility; use the column's visible option instead.
See Also

addRow()

Adds an empty data row and switches it to the editing state.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after a new empty row is added.

Use this method if you want to add an empty row. If you need to add a row with data, do the following:

  • For a remote data source, insert a new row with data into it and reload the data source:

    jQuery
    JavaScript
    $(function(){
        var dataGrid = $("#gridContainer").dxDataGrid({
            // ...
        }).dxDataGrid("instance");
        var dataSource = dataGrid.getDataSource();
        dataSource.store().insert(data).then(function() {
            dataSource.reload();
        })
    });
    Angular
    app.component.ts
    app.module.ts
    import { Component } from '@angular/core';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        constructor() {
            this.dataSource = new DataSource({
                // ...
            })
        }
        // ...
        insertRowRemote: function(dataObj) {
            this.dataSource.store().insert(dataObj).then(function() {
                this.dataSource.reload();
            })
        }
    }
    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 { }
    Vue
    App.vue
    <template>
        <DxDataGrid
            :data-source="dataSource"
        />
    </template>
    
    <script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import DxDataGrid from 'devextreme-vue/data-grid';
    import DataSource from 'devextreme/data/data_source';
    
    const ds = new DataSource({
        // ...
    });
    
    export default {
        components: {
            DxDataGrid
        },
        data() {
            return {
                dataSource: ds
            }
        },
        methods: {
            insertRowRemote: function(dataObj) {
                ds.store().insert(dataObj).then(() => ds.reload());
            }
        }
    }
    </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 DataSource from 'devextreme/data/data_source';
    
    const ds = new DataSource({
        // ...
    });
    
    class App extends React.Component {
        insertRowRemote(dataObj) {
            ds.store().insert(dataObj).then(() => ds.reload());
        }
        render() {
            return (
                <DataGrid
                    dataSource={ds}
                />
            );
        }
    }
    export default App;
  • For a local data source, push a new row into it.

    jQuery
    JavaScript
    $(function(){
        var dataGrid = $("#gridContainer").dxDataGrid({
            // ...
        }).dxDataGrid("instance");
        var dataSource = dataGrid.getDataSource();
        dataSource.store().push([
            { type: "insert", data: data }
        ])
    });
    Angular
    app.component.ts
    app.module.ts
    import { Component } from '@angular/core';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        constructor() {
            this.dataSource = new DataSource({
                // ...
            })
        }
        // ...
        insertRowLocal: function(dataObj) {
            this.dataSource.store().push([
                { type: "insert", data: dataObj }
            ])
        }
    }
    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 { }
    Vue
    App.vue
    <template>
        <DxDataGrid
            :data-source="dataSource"
        />
    </template>
    
    <script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import DxDataGrid from 'devextreme-vue/data-grid';
    import DataSource from 'devextreme/data/data_source';
    
    const ds = new DataSource({
        // ...
    });
    
    export default {
        components: {
            DxDataGrid
        },
        data() {
            return {
                dataSource: ds
            }
        },
        methods: {
            insertRowLocal: function(dataObj) {
                ds.store().push([
                    { type: "insert", data: dataObj }
                ]);
            }
        }
    }
    </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 DataSource from 'devextreme/data/data_source';
    
    const ds = new DataSource({
        // ...
    });
    
    class App extends React.Component {
        insertRowLocal(dataObj) {
            ds.store().push([
                { type: "insert", data: dataObj }
            ]);
        }
        render() {
            return (
                <DataGrid
                    dataSource={ds}
                />
            );
        }
    }
    export default App;

This method works only when paging.enabled is false or when dataSource.reshapeOnPush is true and remoteOperations is false

See Also

beginCustomLoading(messageText)

Shows the load panel.

Parameters:
messageText:

String

The text for the load panel to display.

Normally, the load panel is invoked automatically while the widget is busy rendering or loading data. Additionally, you can invoke it by calling this method. If you call it without the argument, the load panel displays text specified by the loadPanel.text option. To specify the appearance of the load panel, use the loadPanel object. Once invoked from code, the load panel will not hide until you call the endCustomLoading() method.

NOTE
The load panel invoked from code does not replace the automatically invoked load panel. This circumstance might lead to a situation where the load panel invoked from code suddenly changes its text because it was overridden by the automatically invoked load panel. Therefore, be mindful when invoking the load panel with different text.
See Also

beginUpdate()

Prevents the widget from refreshing until the endUpdate() method is called.

The beginUpdate() and endUpdate() methods prevent the widget from excessive updates when you are changing multiple widget settings at once. After the beginUpdate() method is called, the widget does not update its UI until the endUpdate() method is called.

See Also

byKey(key)

Gets a data object with a specific key.

Parameters:
key:

Object

|

String

|

Number

The data object's key.

Return Value:

Promise<Object> (jQuery or native)

A Promise that is resolved after the data object is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

The following code shows how to get a data object whose key is 15.

JavaScript
widgetInstance.byKey(15).done(function(dataObject) {
        // process "dataObject"
    }).fail(function(error) {
        // handle error
    });
See Also

cancelEditData()

Discards changes that a user made to data.

cellValue(rowIndex, dataField)

Gets the value of a cell with a specific row index and a data field, column caption or name.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

dataField:

String

The data field, caption, or unique name of the column to which the cell belongs.

Return Value: any

The cell's value.

See Also

cellValue(rowIndex, dataField, value)

Sets a new value to a cell with a specific row index and a data field, column caption or name.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

dataField:

String

The data field, caption, or unique name of the column to which the cell belongs.

value: any

The cell's new value.

Call saveEditData() after this method to save the changes:

jQuery
JavaScript
var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.cellValue(0, "Position", "CEO");
dataGrid.saveEditData();
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    updateCell(rowIndex, dataField, value) {
        this.dataGrid.instance.cellValue(rowIndex, dataField, value);
        this.dataGrid.instance.saveEditData();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
See Also

cellValue(rowIndex, visibleColumnIndex)

Gets the value of a cell with specific row and column indexes.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

visibleColumnIndex:

Number

The visible index of the column to which the cell belongs.

Return Value: any

The cell's value.

See Also

cellValue(rowIndex, visibleColumnIndex, value)

Sets a new value to a cell with specific row and column indexes.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

visibleColumnIndex:

Number

The visible index of the column to which the cell belongs.

value: any

The cell's new value.

Call saveEditData() after this method to save the changes:

jQuery
JavaScript
var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.cellValue(0, 1, "newValue");
dataGrid.saveEditData();
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    updateCell(rowIndex, columnIndex, value) {
        this.dataGrid.instance.cellValue(rowIndex, columnIndex, value);
        this.dataGrid.instance.saveEditData();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
See Also

clearFilter()

Clears all filters applied to widget rows.

See Also

clearFilter(filterName)

Clears all row filters of a specific type.

Parameters:
filterName:

String

The filter type.

The method's parameter specifies what type of filter should be cleared. This parameter can have one of the following values:

See Also

clearGrouping()

Ungroups grid records.

For more information about grouping, see the Grouping topic.

See Also

clearSelection()

Clears selection of all rows on all pages.

clearSorting()

Clears sorting settings of all columns at once.

See Also

closeEditCell()

Switches the cell being edited back to the normal state. Takes effect only if editing.mode is batch and showEditorAlways is false.

collapseAdaptiveDetailRow()

Collapses the currently expanded adaptive detail row (if there is one).

collapseAll(groupIndex)

Collapses master rows or groups of a specific level.

Parameters:
groupIndex:

Number

| undefined

The group's level. Pass undefined to collapse all groups. Pass -1 to collapse all master rows.

collapseRow(key)

Collapses a group or a master row with a specific key.

Parameters:
key: any

The key of the group or the master row.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after the row is collapsed. It is a native Promise or a jQuery.Promise when you use jQuery.

To collapse a group row, call this method with an array each member of which is a grouping value. To collapse a master row, pass its key to this method.

See Also

columnCount()

Gets the data column count. Includes visible and hidden columns, excludes command columns.

Return Value:

Number

The data column count.

See Also

columnOption(id)

Gets all options of a column with a specific identifier.

Parameters:
id:

Number

|

String

The column's index, data field, caption, type, or unique name.

Return Value:

Object

The column's options.

This method gets the options of the first column found by either of the below:

  • Name
    The unique name of the column.

  • Column Index
    The index of the column in the columns array.

  • Data Field
    The name of the data source field assigned to the column.

  • Caption
    The text displayed in the column header.

  • Type (command columns only)
    The type of the command column.

  • Service String
    Any string matching the following format: "optionName:value", where optionName is one of the column options.

See Also

columnOption(id, optionName)

Gets the value of a single column option.

Parameters:
id:

Number

|

String

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

optionName:

String

The option's name.

Return Value: any

The option's value.

See Also

columnOption(id, optionName, optionValue)

Updates the value of a single column option.

Parameters:
id:

Number

|

String

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

optionName:

String

The option's name.

optionValue: any

The option's new value.

See Also

columnOption(id, options)

Updates the values of several column options.

Parameters:
id:

Number

|

String

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

options:

Object

The options with their new values.

See Also

defaultOptions(rule)

Specifies the device-dependent default configuration options for this component.

Parameters:
rule:

Object

The component's default device options.

Object structure:
Name Type Description
device

Device

|

Array<Device>

|

Function

Device parameters.
When specifying a function, get information about the current device from the argument. Return true if the options should be applied to the device.

options

Object

Options to be applied.

defaultOptions is a static method that the widget class supports. The following code demonstrates how to specify default options for all instances of the DataGrid widget in an application executed on the desktop.

jQuery
JavaScript
DevExpress.ui.dxDataGrid.defaultOptions({ 
    device: { deviceType: "desktop" },
    options: {
        // Here go the DataGrid options
    }
});
Angular
TypeScript
import DataGrid from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    constructor () {
        DataGrid.defaultOptions({
            device: { deviceType: "desktop" },
            options: {
                // Here go the DataGrid options
            }
        });
    }
}
Vue
<template>
    <div>
        <DxDataGrid id="dataGrid1" />
        <DxDataGrid id="dataGrid2" />
    </div>
</template>
<script>
import DxDataGrid from "devextreme-vue/data-grid";
import DataGrid from "devextreme/ui/data_grid";

DataGrid.defaultOptions({
    device: { deviceType: "desktop" },
    options: {
        // Here go the DataGrid options
    }
});

export default {
    components: {
        DxDataGrid
    }
}
</script>
React
import React from "react";
import dxDataGrid from "devextreme/ui/data_grid";
import DataGrid from "devextreme-react/data-grid";

class App extends React.Component {
    render () {
        dxDataGrid.defaultOptions({
            device: { deviceType: "desktop" },
            options: {
                // Here go the DataGrid options
            }
        })
        return (
            <div>
                <DataGrid id="dataGrid1" />
                <DataGrid id="dataGrid2" />
            </div>
        )
    }
}

export default App;

deleteColumn(id)

Removes a column.

Parameters:
id:

Number

|

String

The column's index, data field, caption or unique name.

This method removes the first column found by either of the below:

  • Name
    The unique name of the column.

  • Column Index
    The index of the column in the columns array.

  • Data Field
    The name of the data source field assigned to the column.

  • Caption
    The text displayed in the column header.

See Also

deleteRow(rowIndex)

Removes a row with a specific index.

Parameters:
rowIndex:

Number

The row's index. Refer to Column and Row Indexes for more information.

NOTE
You cannot call this method to delete a row if this row is being edited in row or form editing mode. In these modes, you can modify only one row at a time and you should finish the row edit to call this method.
See Also

deselectAll()

Clears the selection of all rows on all pages or the currently rendered page only.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after the selection is cleared. It is a native Promise or a jQuery.Promise when you use jQuery.

Depending on the value of the selectAllMode option, this method clears selection of all rows on all pages or on the currently rendered pages only. The selection is cleared of only those rows that meet filtering conditions if a filter is applied. To clear selection regardless of the selectAllMode option's value or applied filters, call the clearSelection() method.

See Also

deselectRows(keys)

Cancels the selection of rows with specific keys.

Parameters:
keys:

Array<any>

The row keys.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after selection is cleared. It is a native Promise or a jQuery.Promise when you use jQuery.

dispose()

Disposes of all the resources allocated to the DataGrid instance.

After calling this method, remove the DOM element associated with the widget:

JavaScript
$("#myDataGrid").dxDataGrid("dispose");
$("#myDataGrid").remove();

Use this method only if the widget was created with jQuery or pure JavaScript. In Angular, Vue, and React, use conditional rendering:

Angular
app.component.html
<dx-data-grid ...
    *ngIf="condition">
</dx-data-grid>
Vue
App.vue
<template>
    <DxDataGrid ...
        v-if="condition">
    </DxDataGrid>
</template>

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

export default {
    components: {
        DxDataGrid
    }
}
</script>
React
App.js
import React from 'react';

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

function DxDataGrid(props) {
    if (!props.shouldRender) {
        return null;
    }

    return (
        <DataGrid ... >    
        </DataGrid>
    );
}

class App extends React.Component {
    render() {
        return (
            <DxDataGrid shouldRender="condition" />
        );
    }
}
export default App;
See Also

editCell(rowIndex, dataField)

Switches a cell with a specific row index and a data field to the editing state. Takes effect only if the editing mode is "batch" or "cell".

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

dataField:

String

The name of the data field in the data source.

See Also

editCell(rowIndex, visibleColumnIndex)

Switches a cell with specific row and column indexes to the editing state. Takes effect only if the editing mode is "batch" or "cell".

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

visibleColumnIndex:

Number

The visible index of the column to which the cell belongs.

See Also

editRow(rowIndex)

Switches a row with a specific index to the editing state. Takes effect only if the editing mode is "row", "popup" or "form".

Parameters:
rowIndex:

Number

The row's index. Refer to Column and Row Indexes for more information.

See Also

element()

Gets the root widget element.

Return Value:

HTMLElement | jQuery

An HTML element or a jQuery element when you use jQuery.

See Also

endCustomLoading()

Hides the load panel.

Normally, the widget hides the load panel automatically once data is ready. But if you have invoked the load panel from code using the beginCustomLoading(messageText) method, you must call the endCustomLoading() method to hide it.

See Also

endUpdate()

Refreshes the widget after a call of the beginUpdate() method.

Main article: beginUpdate()

See Also

expandAdaptiveDetailRow(key)

Expands an adaptive detail row.

Parameters:
key: any

The key of the data row to which the adaptive detail row belongs.

To access a data row by its key, you should specify the field that provides keys in the data source. If no key was specified, the whole data object is considered the key.

See Also

expandAll(groupIndex)

Expands master rows or groups of a specific level. Does not apply if data is remote.

Parameters:
groupIndex:

Number

| undefined

The group's level. Pass undefined to expand all groups. Pass -1 to expand all master rows.

NOTE
The rowExpanded event is not raised when you call this method.
See Also

expandRow(key)

Expands a group or a master row with a specific key.

Parameters:
key: any

The key of the group or the master row.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after the row is expanded. It is a native Promise or a jQuery.Promise when you use jQuery.

To expand a group row, call this method with an array (each member of which is a grouping value). To expand a master row, pass its key to this method.

See Also

exportToExcel(selectionOnly)

Exports grid data to Excel.

Parameters:
selectionOnly:

Boolean

Specifies whether to export all the data presented in the grid or the selected rows only.

For details on exporting, refer to the Client-Side Exporting article.

See Also

filter()

Gets a filter expression applied to the widget's data source using the filter(filterExpr) method and the DataSource's filter option.

Return Value: any

filter(filterExpr)

Applies a filter to the widget's data source.

Parameters:
filterExpr: any

Pass an array with the following members to this method:

  1. The data source field by which data items are filtered.
  2. The comparison operator. The following operators are available: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".
  3. The value with which data source field values should be compared.

The filter passed to this method is not reflected in any of the filtering UI elements and is applied before these elements' filters. To clear all filters applied in code and the UI, call the clearFilter() method.

See Also

focus()

Sets focus on the widget.

See Also

focus(element)

Sets focus on a specific cell.

Parameters:
element:

Element

|

jQuery

The cell's container.

getCellElement(rowIndex, dataField)

Gets a cell with a specific row index and a data field, column caption or name.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

dataField:

String

The data field, caption, or unique name of the column to which the cell belongs.

Return Value:

HTMLElement | jQuery

| undefined

The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

If the specified row or data field does not exist, the method returns undefined.

See Also

getCellElement(rowIndex, visibleColumnIndex)

Gets a cell with specific row and column indexes.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

visibleColumnIndex:

Number

The visible index of the column to which the cell belongs.

Return Value:

HTMLElement | jQuery

| undefined

The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

If the specified row or column does not exist, the method returns undefined.

See Also

getCombinedFilter()

Gets the total filter that combines all the filters applied.

Return Value: any

Use this method to get the total filter. This filter combines filters applied using filtering UI elements and the filter(filterExpr) method. Note that the total filter contains getters. To get the total filter containing data fields, call the getCombinedFilter(returnDataField) method.

See Also

getCombinedFilter(returnDataField)

Gets the total filter that combines all the filters applied.

Parameters:
returnDataField:

Boolean

Specifies whether the total filter should contain data fields instead of getters.

Return Value: any

Use this method to get the total filter. This filter combines filters applied using filtering UI elements and the filter(filterExpr) method.

See Also

getDataSource()

Gets the DataSource instance.

Return Value:

DataSource

The DataSource instance.

NOTE
This method returns the DataSource instance even if the widget's dataSource option was given a simple array.
See Also

getInstance(element)

Gets the instance of a widget found using its DOM node.

Parameters:
element:

Element

|

jQuery

The widget's container.

Return Value:

Object

The widget's instance.

getInstance is a static method that the widget class supports. The following code demonstrates how to get the DataGrid instance found in an element with the myDataGrid ID:

// Modular approach
import DataGrid from "devextreme/ui/data_grid";
...
let element = document.getElementById("myDataGrid");
let instance = DataGrid.getInstance(element) as DataGrid;

// Non-modular approach
let element = document.getElementById("myDataGrid");
let instance = DevExpress.ui.dxDataGrid.getInstance(element);
See Also

getKeyByRowIndex(rowIndex)

Gets the key of a row with a specific index.

Parameters:
rowIndex:

Number

The row's visible index. Refer to Column and Row Indexes for more information.

Return Value: any

The row's key; undefined if nothing found.

getRowElement(rowIndex)

Gets the container of a row with a specific index.

Parameters:
rowIndex:

Number

The row's visible index. Refer to Column and Row Indexes for more information.

Return Value:

Array<Element>

|

jQuery

| undefined

The row's container.

Note that if the widget has fixed columns, the method returns an array of two separate elements: with unfixed and with fixed columns.

See Also

getRowIndexByKey(key)

Gets the index of a row with a specific key.

Parameters:
key:

Object

|

String

|

Number

The row's key.

Return Value:

Number

The row's index; -1 if nothing found. Refer to Column and Row Indexes for more information.

getScrollable()

Gets the instance of the widget's scrollable part.

Return Value:

Scrollable

The scrollable part's instance.

For information on API members of the scrollable part, refer to the ScrollView section, but bear in mind that several members described there are unavailable. Those are the following.

Options:

  • pullingDownText
  • pulledDownText
  • refreshingText
  • reachBottomText
  • onPullDown
  • onReachBottom

Methods:

  • release(preventScrollBottom)
  • refresh()
See Also

getSelectedRowKeys()

Gets the currently selected rows' keys.

Return Value:

Array<any>

|

Promise<any> (jQuery or native)

Keys of currently selected rows or a Promise that is resolved with an array of keys. The keys are stored in the order the user selects rows.

The whole data object is considered a key if the field providing keys is not specified in the data source. In this case, this method returns data objects, that is, operates like the getSelectedRowsData() method.

Note that when selection is deferred, the method returns a Promise (a native Promise or a jQuery.Promise when you use jQuery) that should be resolved with an array of keys.

See Also

getSelectedRowsData()

Gets the selected rows' data objects.

Return Value:

Array<any>

|

Promise<any> (jQuery or native)

The selected rows' data objects.
The objects are not processed by the DataSource and have the same order in which the rows were selected.
When selection is deferred, the method returns a Promise (a native Promise or a jQuery.Promise when you use jQuery) that is resolved with the selected rows' data objects.

jQuery
index.js
var dataGrid = $("#dataGridContainer").dxDataGrid("instance");

var selectedRowsData = dataGrid.getSelectedRowsData();

// ===== or when deferred selection is used =====
dataGrid.getSelectedRowsData().then(function(selectedRowsData) {
    // Your code goes here
});
Angular
app.component.ts
app.component.html
app.module.ts
import { Component, ViewChild } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('dataGridRef', { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild('dataGridRef') dataGrid: DxDataGridComponent;

    selectedRowsData = [];

    getSelectedData() {
        this.selectedRowsData = this.dataGrid.instance.getSelectedRowsData();

        // ===== or when deferred selection is used =====
        this.dataGrid.instance.getSelectedRowsData().then((selectedRowsData) => {
            // Your code goes here
        });
    }
}
<dx-data-grid ...
    #dataGridRef
></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 ...
        :ref="dataGridRef">
    </DxDataGrid>
</template>

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

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

const dataGridRef = 'dataGrid';

export default {
    components: {
        DxDataGrid
    },
    data() {
        return {
            dataGridRef,
            selectedRowsData: []
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRef].instance;
        }
    },
    methods: {
        getSelectedData() {
            this.selectedRowsData = this.dataGrid.getSelectedRowsData();

            // ===== or when deferred selection is used =====
            this.dataGrid.getSelectedRowsData().then((selectedRowsData) => {
                // Your code goes here
            });
        }
    }
}
</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 {
    constructor(props) {
        super(props);

        this.dataGridRef = React.createRef();

        this.selectedRowsData = [];

        this.getSelectedData = () => {
            this.selectedRowsData = this.dataGrid.getSelectedRowsData();

            // ===== or when deferred selection is used =====
            this.dataGrid.getSelectedRowsData().then((selectedRowsData) => {
                // Your code goes here
            });
        }
    }

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

    render() {
        return (
            <DataGrid ...
                ref={this.dataGridRef}>
            </DataGrid>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    .ID("dataGrid")
    @* ... *@
)

<script type="text/javascript">
    function getSelectedData() {
        var dataGrid = $("#dataGrid").dxDataGrid("instance");
        var selectedRowsData = dataGrid.getSelectedRowsData();
        // ...

        // ===== or when deferred selection is used =====
        dataGrid.getSelectedRowsData().then(function(selectedRowsData) {
            // Your code goes here
        });
    }
</script>
NOTE
Calculated values cannot be obtained because this method gets data objects from the data source.
See Also

getTotalSummaryValue(summaryItemName)

Gets the value of a total summary item.

Parameters:
summaryItemName:

String

The total summary item's name.

Return Value: any

The total summary item's value.

See Also

getVisibleColumnIndex(id)

Gets the index of a visible column.

Parameters:
id:

Number

|

String

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

Return Value:

Number

The column's index.

getVisibleColumns()

Gets all visible columns.

Return Value:

Array<DataGrid Column>

Visible columns; may include command columns.

getVisibleColumns(headerLevel)

Gets all visible columns at a specific hierarchical level of column headers. Use it to access banded columns.

Parameters:
headerLevel:

Number

The column headers' level.

Return Value:

Array<DataGrid Column>

Visible columns; may include command columns.

getVisibleRows()

Gets currently rendered rows.

Return Value:

Array<DataGrid Row>

Currently rendered rows.

See Also

hasEditData()

Checks whether the widget has unsaved changes.

Return Value:

Boolean

true if the widget has unsaved changes; otherwise - false.

hideColumnChooser()

Hides the column chooser.

insertRow() Deprecated

Use the addRow() method instead.

Adds a new data row to a grid.

instance()

Gets the widget's instance. Use it to access other methods of the widget.

Return Value:

DataGrid

This widget's instance.

See Also

isAdaptiveDetailRowExpanded(key)

Checks whether an adaptive detail row is expanded or collapsed.

Parameters:
key: any

The key of the data row to which the adaptive detail row belongs.

Return Value:

Boolean

true if the adaptive detail row is expanded; false if collapsed.

To access a data row by its key, specify the field that provides keys in the data source. If no key was specified, the whole data object is considered the key.

See Also

isRowExpanded(key)

Checks whether a specific group or master row is expanded or collapsed.

Parameters:
key: any

The key of the group or master row.

Return Value:

Boolean

true if the row is expanded; false if collapsed.

To check whether a group row is expanded, call this method with an array, in which each member is a grouping value. To check if a master row is expanded, pass its key to this method.

See Also

isRowFocused(key)

Checks whether a row with a specific key is focused.

Parameters:
key: any

A row's key.

Return Value:

Boolean

true if the row is focused; otherwise false.

isRowSelected(data)

Checks whether a row found using its data object is selected. Takes effect only if selection.deferred is true.

Parameters:
data: any

The row's data object.

Return Value:

Boolean

true if the row is selected; otherwise false.

See Also

isRowSelected(key)

Checks whether a row with a specific key is selected. Takes effect only if selection.deferred is false.

Parameters:
key: any

The row's key.

Return Value:

Boolean

true if the row is selected; otherwise false.

See Also

keyOf(obj)

Gets a data object's key.

Parameters:
obj:

Object

The data object.

Return Value: any

The data object's key.

See Also

navigateToRow(key)

Navigates the grid to the data page that contains the row with the specified key and scrolls the grid to display the row if it is not in the viewport.

Parameters:
key: any

The row's key.

The following requirements apply when you use this method:

  • The widget's keyExpr or the store's key option should be specified.
  • If remoteOperations are enabled and focusedRowEnabled is false, rows should be sorted by keys initially. To sort rows on the client, specify the column's sortOrder or the DataSource's sort option. Rows can also be received sorted from the server
See Also

off(eventName)

Detaches all event handlers from a single event.

Parameters:
eventName:

String

The event's name.

Return Value:

DataGrid

The object for which this method is called.

See Also

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

Parameters:
eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

DataGrid

The object for which this method is called.

See Also

on(eventName, eventHandler)

Subscribes to an event.

Parameters:
eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

DataGrid

The object for which this method is called.

Use this method to subscribe to one of the events listed in the Events section.

See Also

on(events)

Subscribes to events.

Parameters:
events:

Object

Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}

Return Value:

DataGrid

The object for which this method is called.

Use this method to subscribe to several events with one method call. Available events are listed in the Events section.

See Also

option()

Gets all widget options.

Return Value:

Object

The widget's options.

option(optionName)

Gets the value of a single option.

Parameters:
optionName:

String

The option's name or full path.

Return Value: any

This option's value.

option(optionName, optionValue)

Updates the value of a single option.

Parameters:
optionName:

String

The option's name or full path.

optionValue: any

This option's new value.

option(options)

Updates the values of several options.

Parameters:
options:

Object

Options with their new values.

pageCount()

Gets the total page count.

Return Value:

Number

The total page count.

NOTE
If you use infinite scrolling, this method returns how many pages the grid has loaded.
See Also

pageIndex()

Gets the current page index.

Return Value:

Number

The current page index.

When the scrolling mode is "virtual" or "infinite", this method returns the index of the page whose row is shown first in the widget.

See Also

pageIndex(newIndex)

Switches the widget to a specific page using a zero-based index.

Parameters:
newIndex:

Number

The zero-based page index.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after the page is shown. It is a native Promise or a jQuery.Promise when you use jQuery.

See Also

pageSize()

Gets the current page size.

Return Value:

Number

The current page size.

See Also

pageSize(value)

Sets the page size.

Parameters:
value:

Number

The page size.

refresh()

Reloads data and repaints the widget.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

The widget cannot track changes a third party makes in the data source. To update data in the widget in this case, call the refresh() method. Data sources of lookup columns are updated with the main data source.

The following code shows how to call this method:

jQuery
index.js
var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.refresh()
    .done(function() {
        // ...
    })
    .fail(function(error) {
        // ...
    });
Angular
app.component.html
<dx-data-grid #dataGridVar ... >
    <!-- ... -->
</dx-data-grid>
app.component.ts
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('dataGridVar', { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild('dataGridVar') dataGrid: DxDataGridComponent;

    refreshDataGrid() {
        this.dataGrid.instance.refresh()
            .then(function() {
                // ...
            })
            .catch(function(error) {
                // ...
            });
    }
}
Vue
App.vue
<template>
    <DxDataGrid ...
        :ref="dataGridRefKey">
        <!-- ... -->
    </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 {
            dataGridRefKey: 'dataGrid'
        };
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    },
    methods: {
        refreshDataGrid() {
            this.dataGrid.refresh()
                .then(function() {
                    // ...
                })
                .catch(function(error) {
                    // ...
                });
        }
    }
};
</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 {
    render() {
        return (
            <DataGrid ...
                ref={ref => this.dataGrid = ref}>
                {/* ... */}
            </DataGrid>
        );
    }
    refreshDataGrid() {
        this.dataGrid.instance.refresh()
            .then(function() {
                // ...
            })
            .catch(function(error) {
                // ...
            });
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    .ID("dataGridContainer")
    // ...
)
<script type="text/javascript">
    function refreshDataGrid() {
        var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
        dataGrid.refresh()
            .done(function() {
                // ...
            })
            .fail(function(error) {
                // ...
            });
    }
</script>
NOTE
Calling the refresh() method ends the editing process. In batch editing mode, changes are saved in a buffer before they are saved to the data source. In other modes, all unsaved changes are discarded.
See Also

refresh(changesOnly)

Reloads data and repaints the widget or elements whose data changed.

Parameters:
changesOnly:

Boolean

Pass true to repaint elements whose data changed; false to repaint the entire widget.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

Main article: refresh()

removeRow(rowIndex) Deprecated

Use the deleteRow(rowIndex) method instead.

Removes a row with a specific index.

Parameters:
rowIndex:

Number

The row's index.

repaint()

Repaints the widget without reloading data. Call it to update the widget's markup.

See Also

repaintRows(rowIndexes)

Repaints specific rows.

Parameters:
rowIndexes:

Array<Number>

Row indexes. Refer to Column and Row Indexes for more information.

This method updates the row objects and their visual representation.

See Also

resetOption(optionName)

Resets an option to its default value.

Parameters:
optionName:

String

An option's name.

See Also

saveEditData()

Saves changes that a user made to data.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after changes are saved in the data source. It is a native Promise or a jQuery.Promise when you use jQuery.

searchByText(text)

Seeks a search string in the columns whose allowSearch option is true.

Parameters:
text:

String

A search string. Pass an empty string to clear search results.

selectAll()

Selects all rows.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after all rows are selected. It is a native Promise or a jQuery.Promise when you use jQuery.

Depending on the value of the selectAllMode option, this method selects all rows on all pages or on the currently rendered pages only. If a filter is applied, this method selects only those rows that meet the filtering conditions.

See Also

selectRows(keys, preserve)

Selects rows with specific keys.

Parameters:
keys:

Array<any>

The row keys.

preserve:

Boolean

Specifies whether previously selected rows should stay selected.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after the rows are selected. It is a native Promise or a jQuery.Promise when you use jQuery.

By default, this method call clears selection of previously selected rows. To keep these rows selected, call this method with true as the second argument.

JavaScript
widgetInstance.selectRows([5, 10, 12], true);
See Also

selectRowsByIndexes(indexes)

Selects rows with specific indexes.

Parameters:
indexes:

Array<Number>

The row indexes.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after the rows are selected. It is a native Promise or a jQuery.Promise when you use jQuery.

This method has the following specifics:

  • This method call clears selection of all previously selected rows.
  • When calculating row indexes, the widget counts data and group rows. Nevertheless, only data rows can be selected.
  • If the pager is used, selection is cleared once a user moves to a different page. To preserve it, call this method within the onContentReady handler.
See Also

showColumnChooser()

Shows the column chooser.

state()

Gets the current widget state.

Return Value:

Object

The current widget state.

The following example shows how to save the widget state in the local storage and load it from there:

jQuery
JavaScript
$(function () {
    var dataGrid = $("#dataGridContainer").dxDataGrid({ 
        // ...
    }).dxDataGrid;
    $("#save").dxButton({
        text: "Save State",
        onClick: function() {
            var state = dataGrid.state();
            // Saves the state in the local storage
            localStorage.setItem("dataGridState", JSON.stringify(state));
        }
    });
    $("#load").dxButton({
        text: "Load State",
        onClick: function() {
            let state = JSON.parse(localStorage.getItem("dataGridState"));
            dataGrid.state(state);
        }
    });
});
Angular
TypeScript
HTML
import { Component, ViewChild } from "@angular/core";
import { 
    DxDataGridModule, 
    DxButtonModule, 
    DxDataGridComponent 
} from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent
    saveState() {
        let state = this.dataGrid.instance.state();
        // Saves the state in the local storage
        localStorage.setItem("dataGridState", JSON.stringify(state));
    }
    loadState() {
        let state = JSON.parse(localStorage.getItem("dataGridState"));
        this.dataGrid.instance.state(state);
    }
}
@NgModule({
    imports: [
        DxDataGridModule,
        DxButtonModule,
        // ...
    ],
    // ...
})
<dx-data-grid ...>
</dx-data-grid>
<dx-button
    text="Save State"
    (onClick)="saveState()">
</dx-button>
<dx-button
    text="Load State"
    (onClick)="loadState()">
</dx-button>
See Also

state(state)

Sets the widget state.

Parameters:
state:

Object

The widget's state to be set. Pass null to reset the state to default.

After the state is set, the DataGrid reloads data to apply sorting, filtering, and other data processing settings.

Refer to the state() method description for an example of how to work with the widget state.

See Also

totalCount()

Gets the total row count.

Return Value:

Number

The total row count.

NOTE
If any filter is applied, this method returns the count of records after filtering.
See Also

undeleteRow(rowIndex)

Recovers a row deleted in batch editing mode.

Parameters:
rowIndex:

Number

The row's index. Refer to Column and Row Indexes for more information.

updateDimensions()

Updates the widget's content after resizing.

See Also