React DataGrid Methods

See Also

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 UI component's state after the creation.

See Also

View Demo

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

• editing.allowUpdating

Normally, the load panel is invoked automatically while the UI component 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 property. 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.

See Also

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

See Also

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

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

See Also

• instance()

View Demo

See Also

• saveEditData()
• editCell(rowIndex, dataField)
• editCell(rowIndex, visibleColumnIndex)
• editRow(rowIndex)

View Demo

See Also

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

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.cellValue(0, "Position", "CEO");
dataGrid.saveEditData();

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
    ],
    // ...
})

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

const dataGridRefKey = 'my-data-grid';

export default {
    components: {
        DxDataGrid
    },
    data() {
        return {
            dataGridRefKey
        };
    },
    methods: {
        updateCell(rowIndex, dataField, value) {
            this.dataGrid.cellValue(rowIndex, dataField, value);
            this.dataGrid.saveEditData();
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    const dataGrid = useRef(null);
    const updateCell = (rowIndex, dataField, value) => {
        dataGrid.current.instance.cellValue(rowIndex, dataField, value);
        dataGrid.current.instance.saveEditData();
    };
    return (
        <DataGrid ...
            ref={dataGrid}>
        </DataGrid>
    );
}

See Also

See Also

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

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.cellValue(0, 1, "newValue");
dataGrid.saveEditData();

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
    ],
    // ...
})

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

const dataGridRefKey = 'my-data-grid';

export default {
    components: {
        DxDataGrid
    },
    data() {
        return {
            dataGridRefKey
        };
    },
    methods: {
        updateCell(rowIndex, columnIndex, value) {
            this.dataGrid.cellValue(rowIndex, columnIndex, value);
            this.dataGrid.saveEditData();
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    const dataGrid = useRef(null);
    const updateCell = (rowIndex, columnIndex, value) => {
        dataGrid.current.instance.cellValue(rowIndex, columnIndex, value);
        dataGrid.current.instance.saveEditData();
    };
    return (
        <DataGrid ...
            ref={dataGrid}>
        </DataGrid>
    );
}

See Also

View Demo

See Also

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

• "row"
  Clears the filter row.
• "header"
  Clears the header filter.
• "filterValue"
  Clears the filter builder and the synchronized filtering UI elements.
• "search"
  Clears the search panel.
• "dataSource"
  Clears the data source filter defined in the configuration or applied by the filter(filterExpr) method.

See Also

• clearFilter()

View Demo

For more information about grouping, see the Grouping topic.

See Also

• Clear Grouping

View Demo

See Also

• deselectAll()
• deselectRows(keys)

See Also

See Also

• cancelEditData()

See Also

• isAdaptiveDetailRowExpanded(key)
• expandAdaptiveDetailRow(key)
• columnHidingEnabled

View Demo

See Also

• Expand and Collapse Groups - API
• Expand and Collapse Groups - User Interaction
• Master-Detail Interface - API

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

• Expand and Collapse Groups - API
• Master-Detail Interface - API

See Also

This method gets the properties 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.

• Service String
  A string that matches the following format: "optionName:value", where optionName is one of the column properties. For example, the following string corresponds to the command column: "type:buttons".

See Also

• columns

See Also

• columns

See Also

• columns

See Also

• columns

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

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

import DataGrid, { Properties } from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    constructor () {
        DataGrid.defaultOptions<Properties>({
            device: { deviceType: "desktop" },
            options: {
                // Here go the DataGrid properties
            }
        });
    }
}

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

export default {
    components: {
        DxDataGrid
    }
}
</script>

import dxDataGrid from "devextreme/ui/data_grid";
import DataGrid from "devextreme-react/data-grid";

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

export default function App() {
    return (
        <div>
            <DataGrid id="dataGrid1" />
            <DataGrid id="dataGrid2" />
        </div>
    )
}

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

• addColumn(columnOptions)
• deleteRow(rowIndex)

View Demo

See Also

• addRow()
• deleteColumn(id)
• Delete Rows API

Depending on the value of the selectAllMode property, 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 property's value or applied filters, call the clearSelection() method.

View Demo

See Also

See Also

• Initial and Runtime Selection
• deselectAll()

See Also

• Editing

See Also

• Editing

View Demo

See Also

• Editing

See Also

Normally, the UI component 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

Main article: beginUpdate()

See Also

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

• isAdaptiveDetailRowExpanded(key)
• collapseAdaptiveDetailRow()
• onAdaptiveDetailRowPreparing
• columnHidingEnabled

See Also

• Expand and Collapse Groups - API
• Master-Detail Interface - API

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.

View Demo

A group row can also be expanded when you navigate to a data row within it. See navigateToRow(key) for more information.

See Also

• Expand and Collapse Groups - API
• Master-Detail Interface - API

See Also

See Also

• getCombinedFilter()

View Demo

The filter passed to this method is not reflected in any of the filtering UI elements and is applied before these elements' filters. To change UI filters in code, use the following properties instead:

To clear all filters applied in code and the UI, call the clearFilter() method.

See Also

• getCombinedFilter()

See Also

See Also

• getCellElement(rowIndex, visibleColumnIndex)

See Also

See Also

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

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

See Also

• getCombinedFilter()

See Also

• Data Layer - Overview
• Data Layer - DataSource Examples

getInstance is a static method that the UI component 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

• 3rd-Party Frameworks Integration API

See Also

• getRowIndexByKey(key)

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

See Also

View Demo

See Also

• getKeyByRowIndex(rowIndex)

For information on API members of the scrollable part, refer to the ScrollView section. The list below shows ScrollView members that are unavailable for this method.

Properties:

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

Methods:

• release(preventScrollBottom)
• refresh()

See Also

View Demo

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

• Initial and Runtime Selection

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

var selectedRowsData = dataGrid.getSelectedRowsData();

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

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

<template>
    <DxDataGrid ...
        :ref="dataGridRef">
    </DxDataGrid>
</template>

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

import React from 'react';

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

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

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

        this.dataGridRef = React.createRef();

        this.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;

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

View Demo

See Also

• Initial and Runtime Selection
• cellValue(rowIndex, dataField)
• cellValue(rowIndex, visibleColumnIndex)
• getSelectedRowKeys()

See Also

See Also

• getVisibleColumns(headerLevel)

See Also

• getVisibleColumns()

View Demo

See Also

See Also

• saveEditData()
• cancelEditData()

See Also

• showColumnChooser()

See Also

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

• expandAdaptiveDetailRow(key)
• collapseAdaptiveDetailRow()
• columnHidingEnabled

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

See Also

• focusedRowEnabled

See Also

See Also

See Also

This method performs the following actions:

1. Switches the UI component to the data page that contains the specified row.
2. Expands groups in which the row is nested (if rows are grouped and the groups are collapsed).
3. Scrolls the UI component to display the row (if the row is outside the viewport).

View Demo

The following requirements apply when you use this method:

• The UI component's keyExpr or the store's key property should be specified.

• Rows should be initially sorted by keys. You can sort them on the server or use a column's sortOrder or the DataSource's sort property to sort the rows on the client.

• Scrolling mode should not be "infinite".

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

See Also

• Focused Row

See Also

See Also

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

See Also

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

See Also

See Also

• Get and Set Properties

See Also

• Get and Set Properties

See Also

• Get and Set Properties

See Also

• Get and Set Properties

View Demo

See Also

• Paging - API

View Demo

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

See Also

• Paging - API

See Also

See Also

See Also

• Paging - API

The UI component cannot track changes a third party makes in the data source. To update data in the UI component 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:

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.refresh()
    .done(function() {
        // ...
    })
    .fail(function(error) {
        // ...
    });

<dx-data-grid #dataGridVar ... >
    <!-- ... -->
</dx-data-grid>

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) {
                // ...
            });
    }
}

<template>
    <DxDataGrid ...
        :ref="dataGridRefKey">
        <!-- ... -->
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

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

const dataGridRefKey = 'my-data-grid';

export default {
    components: {
        DxDataGrid,
        // ...
    },
    data() {
        return {
            dataGridRefKey
        };
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    },
    methods: {
        refreshDataGrid() {
            this.dataGrid.refresh()
                .then(function() {
                    // ...
                })
                .catch(function(error) {
                    // ...
                });
        }
    }
};
</script>

import React from 'react';

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

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

class App extends React.Component {
    render() {
        return (
            <DataGrid ...
                ref={ref => this.dataGrid = ref}>
                {/* ... */}
            </DataGrid>
        );
    }
    refreshDataGrid() {
        this.dataGrid.instance.refresh()
            .then(function() {
                // ...
            })
            .catch(function(error) {
                // ...
            });
    }
}
export default App;

@(Html.DevExtreme().DataGrid()
    .ID("dataGridContainer")
    // ...
)
<script type="text/javascript">
    function refreshDataGrid() {
        var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
        dataGrid.refresh()
            .done(function() {
                // ...
            })
            .fail(function(error) {
                // ...
            });
    }
</script>

See Also

• refresh(changesOnly)

Main article: refresh()

View Demo

The method repaints Toolbar and re-initializes all its items.

See Also

• reload() in DataSource | List
• refresh() in DataGrid | TreeList

This method updates the row objects and their visual representation.

See Also

See Also

See Also

• cancelEditData()
• hasEditData()
• onRowInserted
• onRowUpdated
• onRowRemoved

See Also

• getCombinedFilter()
• searchPanel

Depending on the value of the selectAllMode property, 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.

View Demo

See Also

• Initial and Runtime Selection
• selectRows(keys, preserve)
• selection

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.

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

If you specify DataGrid's key as composite (for example, key: ['id', 'name']), you need to call this method as follows:

widgetInstance.selectRows([ { id: 5, name: 'Alex' }, { id: 10: name: 'Bob' } ], true);

View Demo

See Also

• Initial and Runtime Selection
• selectRowsByIndexes(indexes)

View Demo

This method has the following specifics:

• This method call clears selection of all previously selected rows.
• When calculating row indexes, the UI component 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

• Initial and Runtime Selection

See Also

• hideColumnChooser

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

$(function () {
    const dataGrid = $("#dataGridContainer").dxDataGrid({ 
        // ...
    }).dxDataGrid("instance");
    $("#save").dxButton({
        text: "Save State",
        onClick: function() {
            const state = dataGrid.state();
            // Saves the state in the local storage
            localStorage.setItem("dataGridState", JSON.stringify(state));
        }
    });
    $("#load").dxButton({
        text: "Load State",
        onClick: function() {
            const state = JSON.parse(localStorage.getItem("dataGridState"));
            dataGrid.state(state);
        }
    });
});

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() {
        const state = this.dataGrid.instance.state();
        // Saves the state in the local storage
        localStorage.setItem("dataGridState", JSON.stringify(state));
    }
    loadState() {
        const 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>

<template>
    <DxDataGrid ...
        :ref="dataGridRefKey">
    </DxDataGrid>
    <DxButton
        text="Save State"
        @click="saveState"
    />
    <DxButton
        text="Load State"
        @click="loadState"
    />
</template>

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

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

const dataGridRefKey = "my-data-grid";

export default {
    components: {
        DxDataGrid,
        // ...
        DxButton
    },
    data() {
        return {
            dataGridRefKey
        }
    },
    methods: {
        saveState() {
            const state = this.dataGrid.state();
            // Saves the state in the local storage
            localStorage.setItem("dataGridState", JSON.stringify(state));
        },
        loadState() {
            const state = JSON.parse(localStorage.getItem("dataGridState"));
            this.dataGrid.state(state);
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    const dataGrid = useRef(null);
    const saveState = () => {
        const state = dataGrid.current.instance.state();
        // Saves the state in the local storage
        localStorage.setItem("dataGridState", JSON.stringify(state));
    };
    const loadState = () => {
        const state = JSON.parse(localStorage.getItem("dataGridState"));
        dataGrid.current.instance.state(state);
    };
    return (
        <React.Fragment>
            <DataGrid ...
                ref={dataGrid}>
            </DataGrid>
            <Button
                text="Save State"
                onClick={saveState}
            />
            <Button
                text="Load State"
                onClick={loadState}
            />
        </React.Fragment>
    );
}

See Also

• stateStoring

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 UI component state.

View Demo

See Also

• stateStoring

Please review the following notes:

• If any filter is applied, totalCount() returns the count of records after filtering.

• If paging is disabled in the DataGrid (paging.enabled is false) or in the underlying DataSource (paginate is false), totalCount() returns -1. To get the total record count in this case, you can use the following code:

  jQuery

  index.js

  const dataGrid = $("#dataGridContainer").dxDataGrid("instance");
  const dataSource = dataGrid.getDataSource();
  const recordCount = dataSource.items().length;

  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;
      getRecordCount() {
          const dataSource = this.dataGrid.instance.getDataSource();
          return dataSource.items().length;
      }
  }

  <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
          }
      },
      computed: {
          dataGrid: function() {
              return this.$refs[dataGridRef].instance;
          }
      },
      methods: {
          getRecordCount() {
              const dataSource = this.dataGrid.getDataSource();
              return dataSource.items().length;
          }
      }
  }
  </script>

  React

  App.js

  import React, { useRef, useCallback } from 'react';
  import 'devextreme/dist/css/dx.light.css';
  
  import DataGrid from 'devextreme-react/data-grid';
  
  export default function App() {
      const dataGrid = useRef(null);
      const getRecordCount = useCallback(() => {
          const dataSource = dataGrid.current.instance.getDataSource();
          return dataSource.items().length;
      }, []);
      return (
          <DataGrid ref={dataGrid}>
              {/* ... */}
          </DataGrid>
      );
  }

See Also

See Also

• closeEditCell()
• cancelEditData()

View Demo

See Also