JavaScript/jQuery DataGrid Methods
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
addColumn(columnOptions)
The column's configuration or the data field for which the column should be created.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- columns
addRow()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- editing.allowUpdating
beginCustomLoading(messageText)
Shows the load panel.
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.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
byKey(key)
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.
widgetInstance.byKey(15).done(function(dataObject) { // process "dataObject" }).fail(function(error) { // handle error });
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- instance()
cellValue(rowIndex, dataField)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
The data field, caption, or unique name of the column to which the cell belongs.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
cellValue(rowIndex, dataField, value)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
The data field, caption, or unique name of the column to which the cell belongs.
Call saveEditData() after this method to save the changes:
jQuery
var dataGrid = $("#dataGridContainer").dxDataGrid("instance"); dataGrid.cellValue(0, "Position", "CEO"); dataGrid.saveEditData();
Angular
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
cellValue(rowIndex, visibleColumnIndex)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
cellValue(rowIndex, visibleColumnIndex, value)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
Call saveEditData() after this method to save the changes:
jQuery
var dataGrid = $("#dataGridContainer").dxDataGrid("instance"); dataGrid.cellValue(0, 1, "newValue"); dataGrid.saveEditData();
Angular
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
clearFilter()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
clearFilter(filterName)
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- clearFilter()
clearGrouping()
For more information about grouping, see the Grouping topic.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Clear Grouping
clearSelection()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- deselectAll()
- deselectRows(keys)
clearSorting()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
closeEditCell()
Switches the cell being edited back to the normal state. Takes effect only if editing.mode is batch and showEditorAlways is false.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- cancelEditData()
collapseAdaptiveDetailRow()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- isAdaptiveDetailRowExpanded(key)
- expandAdaptiveDetailRow(key)
- columnHidingEnabled
collapseAll(groupIndex)
See Also
collapseRow(key)
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Expand and Collapse Groups - API
- Master-Detail Interface - API
columnCount()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
columnOption(id)
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
- columns
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
columnOption(id, optionName)
The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- columns
columnOption(id, optionName, optionValue)
The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.
See Also
- columns
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
columnOption(id, options)
The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.
See Also
- columns
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
defaultOptions(rule)
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
DevExpress.ui.dxDataGrid.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the DataGrid options } });
Angular
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)
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- addColumn(columnOptions)
- deleteRow(rowIndex)
deleteRow(rowIndex)
The row's index. Refer to Column and Row Indexes for more information.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- addRow()
- deleteColumn(id)
deselectAll()
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
deselectRows(keys)
Array<any>
A Promise that is resolved after selection is cleared. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Initial and Runtime Selection
- deselectAll()
dispose()
After calling this method, remove the DOM element associated with the widget:
jQuery
$("#myDataGrid").dxDataGrid("dispose"); $("#myDataGrid").remove();
Angular
<dx-data-grid #dataGridVar id="myDataGrid"></dx-data-grid>
import { ..., ViewChild } from "@angular/core"; import { DxDataGridComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild("dataGridVar", { static: false }) dataGrid: DxDataGridComponent; // Prior to Angular 8 // @ViewChild("dataGridVar") dataGrid: DxDataGridComponent; removeDataGrid (e) { this.dataGrid.instance.dispose(); document.getElementById("myDataGrid").remove(); } }
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".
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
See Also
- Editing
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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".
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
See Also
- Editing
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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".
The row's index. Refer to Column and Row Indexes for more information.
See Also
- Editing
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
element()
An HTML element or a jQuery element when you use jQuery.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
endUpdate()
Refreshes the widget after a call of the beginUpdate() method.
Main article: beginUpdate()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
expandAdaptiveDetailRow(key)
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)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Expand and Collapse Groups - API
- Master-Detail Interface - API
expandRow(key)
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Expand and Collapse Groups - API
- Master-Detail Interface - API
exportToExcel(selectionOnly)
For details on exporting, refer to the Client-Side Exporting article.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
filter()
Gets a filter expression applied to the widget's data source using the filter(filterExpr) method and the DataSource's filter option.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- getCombinedFilter()
filter(filterExpr)
Applies a filter to the widget's data source.
Pass an array with the following members to this method:
- The data source field by which data items are filtered.
- The comparison operator. The following operators are available: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".
- 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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- getCombinedFilter()
- filterValue
focus()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
focus(element)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- getCellElement(rowIndex, visibleColumnIndex)
getCellElement(rowIndex, dataField)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
The data field, caption, or unique name of the column to which the cell belongs.
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
getCellElement(rowIndex, visibleColumnIndex)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
getCombinedFilter()
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
getCombinedFilter(returnDataField)
Use this method to get the total filter. This filter combines filters applied using filtering UI elements and the filter(filterExpr) method.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- getCombinedFilter()
getDataSource()
Gets the DataSource instance.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Data Layer - Overview
- Data Layer - DataSource Examples
getInstance(element)
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)
The row's visible index. Refer to Column and Row Indexes for more information.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- getRowIndexByKey(key)
getRowElement(rowIndex)
The row's visible index. Refer to Column and Row Indexes for more information.
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
getRowIndexByKey(key)
The row's index; -1 if nothing found. Refer to Column and Row Indexes for more information.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- getKeyByRowIndex(rowIndex)
getScrollable()
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
getSelectedRowKeys()
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
getSelectedRowsData()
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
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
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
<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
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
@(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>
See Also
getTotalSummaryValue(summaryItemName)
Gets the value of a total summary item.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
getVisibleColumns()
Visible columns; may include command columns.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- getVisibleColumns(headerLevel)
getVisibleColumns(headerLevel)
Gets all visible columns at a specific hierarchical level of column headers. Use it to access banded columns.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- getVisibleColumns()
getVisibleRows()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
hasEditData()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- saveEditData()
- cancelEditData()
hideColumnChooser()
Hides the column chooser.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- showColumnChooser()
insertRow()
Use the addRow() method instead.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Editing - Add
instance()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
isAdaptiveDetailRowExpanded(key)
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- expandAdaptiveDetailRow(key)
- collapseAdaptiveDetailRow()
- columnHidingEnabled
isRowExpanded(key)
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
isRowFocused(key)
See Also
- focusedRowEnabled
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
isRowSelected(data)
Checks whether a row found using its data object is selected. Takes effect only if selection.deferred is true.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
isRowSelected(key)
Checks whether a row with a specific key is selected. Takes effect only if selection.deferred is false.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
keyOf(obj)
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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.
The following requirements apply when you use this method:
- The widget's keyExpr or the store's key option should be specified.
- Rows should be initially sorted by keys. They can be sorted on the client using a column's sortOrder or the DataSource's sort option, or come already sorted from the server.
See Also
off(eventName)
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
off(eventName, eventHandler)
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
on(eventName, eventHandler)
Use this method to subscribe to one of the events listed in the Events section.
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
on(events)
Use this method to subscribe to several events with one method call. Available events are listed in the Events section.
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
option()
Gets all widget options.
See Also
- Get and Set Options
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
option(optionName)
See Also
- Get and Set Options
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
option(optionName, optionValue)
See Also
- Get and Set Options
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
option(options)
See Also
- Get and Set Options
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
pageCount()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Paging - API
pageIndex()
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Paging - API
pageIndex(newIndex)
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
pageSize()
Gets the current page size.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
pageSize(value)
Sets the page size.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Paging - API
refresh()
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
var dataGrid = $("#dataGridContainer").dxDataGrid("instance"); dataGrid.refresh() .done(function() { // ... }) .fail(function(error) { // ... });
Angular
<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) { // ... }); } }
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
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
@(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)
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
refresh(changesOnly)
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)
Use the deleteRow(rowIndex) method instead.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Editing - Delete
repaint()
See Also
- reload() in DataSource | List
- refresh() in DataGrid | TreeList
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
repaintRows(rowIndexes)
Row indexes. Refer to Column and Row Indexes for more information.
This method updates the row objects and their visual representation.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
saveEditData()
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.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- cancelEditData()
- hasEditData()
- onRowInserted
- onRowUpdated
- onRowRemoved
searchByText(text)
Seeks a search string in the columns whose allowSearch option is true.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- getCombinedFilter()
- searchPanel
selectAll()
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Initial and Runtime Selection
- selectRows(keys, preserve)
- selection
selectRows(keys, preserve)
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.
widgetInstance.selectRows([5, 10, 12], true);
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Initial and Runtime Selection
- selectRowsByIndexes(indexes)
selectRowsByIndexes(indexes)
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Initial and Runtime Selection
showColumnChooser()
Shows the column chooser.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- hideColumnChooser
state()
The following example shows how to save the widget state in the local storage and load it from there:
jQuery
$(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
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- stateStoring
state(state)
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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- stateStoring
totalCount()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
undeleteRow(rowIndex)
Recovers a row deleted in batch editing mode.
The row's index. Refer to Column and Row Indexes for more information.
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- closeEditCell()
- cancelEditData()
updateDimensions()
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
If you have technical questions, please create a support ticket in the DevExpress Support Center.