Vue DataGrid API

Specifies the shortcut key that sets focus on the UI component.

Specifies whether the UI component changes its visual state as a result of user interaction.

Specifies whether a user can reorder columns.

Specifies whether a user can resize columns.

Automatically scrolls the component to the focused row when the focusedRowKey is changed. Incompatible with infinite scrolling mode.

Specifies whether data should be cached.

Enables a hint that appears when a user hovers the mouse pointer over a cell with truncated content.

Specifies whether columns should adjust their widths to the content.

Configures the column chooser.

Configures column fixing.

Specifies whether the UI component should hide columns to adapt to the screen or container size. Ignored if allowColumnResizing is true and columnResizingMode is "widget".

Specifies the minimum width of columns.

Specifies how the UI component resizes columns. Applies only if allowColumnResizing is true.

An array of grid columns.

Specifies the width for all data columns. Has a lower priority than the column.width property.

Customizes columns after they are created.

An alias for the dataRowTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

An alias for the dataRowTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

Specifies a custom template for data rows.

Binds the UI component to data.

Specifies the format in which date-time values should be sent to the server.

Specifies whether the UI component responds to user interaction.

Configures editing.

Specifies the global attributes to be attached to the UI component's container element.

Indicates whether to show the error row.

Configures client-side exporting.

Configures the integrated filter builder.

Configures the popup in which the integrated filter builder is shown.

Configures the filter panel.

Configures the filter row.

Specifies whether to synchronize the filter row, header filter, and filter builder. The synchronized filter expression is stored in the filterValue property.

Specifies a filter expression.

The index of the column that contains the focused data cell. This index is taken from the columns array.

Specifies whether the focused row feature is enabled.

Specifies or indicates the focused data row's index.

Specifies initially or currently focused grid row's key.

Configures grouping.

Configures the group panel.

Configures the header filter feature.

Specifies the UI component's height.

Specifies whether to highlight rows and cells with edited data. repaintChangesOnly should be true.

Specifies text for a hint that appears when a user pauses on the UI component.

Specifies whether to highlight rows when a user moves the mouse pointer over them.

Configures keyboard navigation.

Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique. This property applies only if data is a simple array.

Configures the load panel.

Allows you to build a master-detail interface in the grid.

Specifies a text string shown when the DataGrid does not display any data.

A function that is executed before an adaptive detail row is rendered.

A function that is executed when a cell is clicked or tapped. Executed before onRowClick.

A function that is executed when a cell is double-clicked or double-tapped. Executed before onRowDblClick.

A function that is executed after the pointer enters or leaves a cell.

A function that is executed after a grid cell is created.

A function that is executed when the UI component is rendered and each time the component is repainted.

A function that is executed before the context menu is rendered.

A function that is executed when an error occurs in the data source.

A function that is executed before the UI component is disposed of.

A function that is executed after row changes are discarded.

A function that is executed when the edit operation is canceled, but row changes are not yet discarded.

A function that is executed before a cell or row switches to the editing state.

A function that is executed after an editor is created. Not executed for cells with an editCellTemplate.

A function used to customize a cell's editor. Not executed for cells with an editCellTemplate.

A function that is executed before data is exported.

A function that is executed after the focused cell changes. Applies only to cells in data or group rows.

A function that is executed before the focused cell changes. Applies only to cells in data or group rows.

A function that is executed after the focused row changes. Applies only to data or group rows. focusedRowEnabled should be true.

A function that is executed before the focused row changes. Applies only to data or group rows. focusedRowEnabled should be true.

A function used in JavaScript frameworks to save the UI component instance.

A function that is executed before a new row is added to the UI component.

A function that is executed when the UI component is in focus and a key has been pressed down.

A function that is executed after a UI component property is changed.

A function that is executed when a row is clicked or tapped.

A function that is executed after a row is collapsed.

A function that is executed before a row is collapsed.

A function that is executed when a row is double-clicked or double-tapped. Executed after onCellDblClick.

A function that is executed after a row is expanded.

A function that is executed before a row is expanded.

A function that is executed after a new row has been inserted into the data source.

A function that is executed before a new row is inserted into the data source.

A function that is executed after a row is created.

A function that is executed after a row has been removed from the data source.

A function that is executed before a row is removed from the data source.

A function that is executed after a row has been updated in the data source.

A function that is executed before a row is updated in the data source.

A function that is executed after cells in a row are validated against validation rules.

A function that is executed after row changes are saved.

A function that is executed before pending row changes are saved.

A function that is executed after selecting a row or clearing its selection.

A function that is executed before the toolbar is created.

Configures the pager.

Configures paging.

Notifies the DataGrid of the server's data processing operations.

Specifies whether to render the filter row, command columns, and columns with showEditorAlways set to true after other elements.

Specifies whether to repaint only those cells whose data changed.

Specifies whether rows should be shaded differently.

Configures row reordering using drag and drop gestures.

Switches the UI component to a right-to-left representation.

Configures scrolling.

Configures the search panel.

Allows you to select rows or determine which rows are selected. Applies only if selection.deferred is false.

Configures runtime selection.

Specifies filters for the rows that must be selected initially. Applies only if selection.deferred is true.

Specifies whether the outer borders of the UI component are visible.

Specifies whether column headers are visible.

Specifies whether vertical lines that separate one column from another are visible.

Specifies whether horizontal lines that separate one row from another are visible.

Allows you to sort groups according to the values of group summary items.

Configures runtime sorting.

Configures state storing.

Specifies the properties of the grid summary.

Specifies whether to show only relevant values in the header filter and filter row.

Specifies the number of the element when the Tab key is used for navigating.

Configures the toolbar.

Specifies whether to enable two-way data binding.

Specifies whether the UI component is visible.

Specifies the UI component's width.

Specifies whether text that does not fit into a column should be wrapped.

Adds a new column.

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

Shows the load panel.

Postpones rendering that can negatively affect performance until the endUpdate() method is called.

Gets a data object with a specific key.

Discards changes that a user made to data.

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

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

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

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

Clears all filters applied to UI component rows.

Clears all row filters of a specific type.

Ungroups grid records.

Clears selection of all rows on all pages.

Clears sorting settings of all columns at once.

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

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

Collapses master rows or groups of a specific level.

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

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

Gets all properties of a column with a specific identifier.

Gets the value of a single column property.

Updates the value of a single column property.

Updates the values of several column properties.

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

Removes a column.

Removes a row with a specific index.

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

Cancels the selection of rows with specific keys.

Disposes of all the resources allocated to the DataGrid instance.

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

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

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

Gets the root UI component element.

Hides the load panel.

Refreshes the UI component after a call of the beginUpdate() method.

Expands an adaptive detail row.

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

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

Gets a filter expression applied to the UI component's data source using the filter(filterExpr) method and the DataSource's filter property.

Applies a filter to the dataSource.

Sets focus on the UI component.

Sets focus on a specific cell.

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

Gets a cell with specific row and column indexes.

Gets the total filter that combines all the filters applied.

Gets the total filter that combines all the filters applied.

Gets the DataSource instance.

Gets the instance of a UI component found using its DOM node.

Gets the key of a row with a specific index.

Gets the container of a row with a specific index.

Gets the index of a row with a specific key.

Gets the instance of the UI component's scrollable part.

Gets the currently selected rows' keys.

Gets the selected rows' data objects.

Gets the value of a total summary item.

Gets the index of a visible column.

Gets all visible columns.

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

Gets currently rendered rows.

Checks whether the UI component has unsaved changes.

Hides the column chooser.

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

Checks whether an adaptive detail row is expanded or collapsed.

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

Checks whether a row with a specific key is focused.

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

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

Gets a data object's key.

Navigates to a row with the specified key.

Detaches all event handlers from a single event.

Detaches a particular event handler from a single event.

Subscribes to an event.

Subscribes to events.

Gets all UI component properties.

Gets the value of a single property.

Updates the value of a single property.

Updates the values of several properties.

Gets the total page count.

Gets the current page index.

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

Gets the current page size.

Sets the page size.

Reloads data and repaints data rows.

Reloads data and repaints all or only updated data rows.

Renders the component again without reloading data. Use the method to update the component's markup and appearance dynamically.

Repaints specific rows.

Resets a property to its default value.

Saves changes that a user made to data.

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

Selects all rows.

Selects rows with specific keys.

Selects rows with specific indexes.

Shows the column chooser.

Gets the current UI component state.

Sets the UI component state.

Gets the total row count.

Recovers a row deleted in batch editing mode.

Updates the UI component's content after resizing.

Raised before an adaptive detail row is rendered.

Raised when a cell is clicked or tapped.

Raised when a cell is double-clicked or double-tapped.

Raised after the pointer enters or leaves a cell.

Raised after a cell is created.

Raised when the UI component is rendered and each time the component is repainted.

Raised before the context menu is rendered.

Raised when an error occurs in the data source.

Raised before the UI component is disposed of.

Raised after row changes are discarded.

Raised when the edit operation is canceled, but row changes are not yet discarded.

Raised before a cell or row switches to the editing state.

Raised after an editor is created.

Raised before an editor is created.

Raised before data is exported.

Raised after the focused cell changes.

Raised before the focused cell changes.

Raised after the focused row changes. Applies only when focusedRowEnabled is true.

Raised before the focused row changes. Applies only when focusedRowEnabled is true.

Raised only once, after the UI component is initialized.

Raised before a new row is added to the UI component.

Raised when the UI component is in focus and a key has been pressed down.

Raised after a UI component property is changed.

Raised when a row is clicked or tapped.

Raised after a row is collapsed.

Raised before a row is collapsed.

Raised when a row is double-clicked or double-tapped.

Raised after a row is expanded.

Raised before a row is expanded.

Raised after a new row has been inserted into the data source.

Raised before a new row is inserted into the data source.

Raised after a row is created.

Raised after a row has been removed from the data source.

Raised before a row is removed from the data source.

Raised after a row has been updated in the data source.

Raised before a row is updated in the data source.

Raised after cells in a row are validated against validation rules.

Raised after row changes are saved.

Raised before pending row changes are saved.

Raised after selecting a row or clearing its selection.

Raised before the toolbar is created.

The type of the adaptiveDetailRowPreparing event handler's argument.

The type of the cellClick event handler's argument.

The type of the cellDblClick event handler's argument.

The type of the cellHoverChanged event handler's argument.

The type of the cellPrepared event handler's argument.

The type of the contentReady event handler's argument.

The type of the contextMenuPreparing event handler's argument.

The type of the dataErrorOccurred event handler's argument.

Specifies the command column that this object customizes.

Specifies the availability and captions of data export buttons.

The name used to identify a built-in button.

A name used to identify the toolbar item.

Specifies the scrolling mode.

The type of the disposing event handler's argument.

The type of the editCanceled event handler's argument.

The type of the editCanceling event handler's argument.

Configures editing.

The type of the editingStart event handler's argument.

The type of the editorPrepared event handler's argument.

The type of the editorPreparing event handler's argument.

Configures client-side exporting.

The type of the exporting event handler's argument.

Configures the texts of export commands, buttons, and hints.

The type of the focusedCellChanged event handler's argument.

The type of the focusedCellChanging event handler's argument.

The type of the focusedRowChanged event handler's argument.

The type of the focusedRowChanging event handler's argument.

Specifies a group of elements in a template.

Configures grouping.

Defines the texts of grouping-related visual elements.

Configures the group panel.

The type of the initialized event handler's argument.

The type of the initNewRow event handler's argument.

The type of the keyDown event handler's argument.

Allows you to build a master-detail interface in the grid.

The type of the optionChanged event handler's argument.

The type of the rowClick event handler's argument.

The type of the rowCollapsed event handler's argument.

The type of the rowCollapsing event handler's argument.

The type of the rowDblClick event handler's argument.

The type of the rowExpanded event handler's argument.

The type of the rowExpanding event handler's argument.

The type of the rowInserted event handler's argument.

The type of the rowInserting event handler's argument.

The type of the rowPrepared event handler's argument.

The type of the rowRemoved event handler's argument.

The type of the rowRemoving event handler's argument.

The type of the rowUpdated event handler's argument.

The type of the rowUpdating event handler's argument.

The type of the rowValidating event handler's argument.

The type of the saved event handler's argument.

The type of the saving event handler's argument.

Configures scrolling.

The type of the selectionChanged event handler's argument.

Allows you to sort groups according to the values of group summary items.

Specifies the properties of the grid summary.

Specifies items of the group summary.

Contains properties that specify text patterns for summary items.

Specifies items of the total summary.

The type of the toolbarPreparing event handler's argument.