devextreme-angular
Version:
DevExtreme UI and Visualization Components for Angular
1,157 lines (1,076 loc) • 105 kB
JavaScript
import * as i0 from '@angular/core';
import { PLATFORM_ID, Output, Input, ContentChildren, Inject, Component, NgModule } from '@angular/core';
import DxDataGrid from 'devextreme/ui/data_grid';
import * as i1 from 'devextreme-angular/core';
import { DxComponent, DxIntegrationModule, DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper, DxTemplateModule } from 'devextreme-angular/core';
import { DxoColumnChooserModule, DxoPositionModule, DxoAtModule, DxoBoundaryOffsetModule, DxoCollisionModule, DxoMyModule, DxoOffsetModule, DxoSearchModule, DxoSelectionModule, DxoColumnFixingModule, DxoIconsModule, DxoTextsModule, DxiColumnModule, DxiButtonModule, DxoLookupModule, DxoFormatModule, DxoFormItemModule, DxoLabelModule, DxiValidationRuleModule, DxoHeaderFilterModule, DxoEditingModule, DxiChangeModule, DxoFormModule, DxoColCountByScreenModule, DxiItemModule, DxoTabPanelOptionsModule, DxiTabModule, DxoButtonOptionsModule, DxoPopupModule, DxoAnimationModule, DxoHideModule, DxoFromModule, DxoToModule, DxoShowModule, DxoExportModule, DxoFilterBuilderModule, DxiCustomOperationModule, DxiFieldModule, DxoFilterOperationDescriptionsModule, DxoGroupOperationDescriptionsModule, DxoFilterBuilderPopupModule, DxoFilterPanelModule, DxoFilterRowModule, DxoOperationDescriptionsModule, DxoGroupingModule, DxoGroupPanelModule, DxoKeyboardNavigationModule, DxoLoadPanelModule, DxoMasterDetailModule, DxoPagerModule, DxoPagingModule, DxoRemoteOperationsModule, DxoRowDraggingModule, DxoCursorOffsetModule, DxoScrollingModule, DxoSearchPanelModule, DxiSortByGroupSummaryInfoModule, DxoSortingModule, DxoStateStoringModule, DxoSummaryModule, DxiGroupItemModule, DxoValueFormatModule, DxiTotalItemModule, DxoToolbarModule } from 'devextreme-angular/ui/nested';
import { DxoDataGridAIModule, DxoDataGridAIAssistantModule, DxoDataGridAIOptionsModule, DxoDataGridAnimationModule, DxiDataGridAsyncRuleModule, DxoDataGridAtModule, DxoDataGridBoundaryOffsetModule, DxiDataGridButtonModule, DxiDataGridButtonItemModule, DxoDataGridButtonOptionsModule, DxiDataGridChangeModule, DxoDataGridColCountByScreenModule, DxoDataGridCollisionModule, DxiDataGridColumnModule, DxiDataGridColumnButtonModule, DxoDataGridColumnChooserModule, DxoDataGridColumnChooserSearchModule, DxoDataGridColumnChooserSelectionModule, DxoDataGridColumnFixingModule, DxoDataGridColumnFixingTextsModule, DxoDataGridColumnHeaderFilterModule, DxoDataGridColumnHeaderFilterSearchModule, DxoDataGridColumnLookupModule, DxiDataGridCompareRuleModule, DxoDataGridCursorOffsetModule, DxiDataGridCustomOperationModule, DxiDataGridCustomRuleModule, DxoDataGridDataGridHeaderFilterModule, DxoDataGridDataGridHeaderFilterSearchModule, DxoDataGridDataGridHeaderFilterTextsModule, DxoDataGridDataGridSelectionModule, DxiDataGridDataGridToolbarItemModule, DxoDataGridEditingModule, DxoDataGridEditingTextsModule, DxoDataGridEditorOptionsModule, DxiDataGridEditorOptionsButtonModule, DxiDataGridEmailRuleModule, DxiDataGridEmptyItemModule, DxoDataGridExportModule, DxoDataGridExportTextsModule, DxiDataGridFieldModule, DxoDataGridFieldLookupModule, DxoDataGridFilterBuilderModule, DxoDataGridFilterBuilderPopupModule, DxoDataGridFilterOperationDescriptionsModule, DxoDataGridFilterPanelModule, DxoDataGridFilterPanelTextsModule, DxoDataGridFilterRowModule, DxoDataGridFormModule, DxoDataGridFormatModule, DxiDataGridFormGroupItemModule, DxoDataGridFormItemModule, DxoDataGridFromModule, DxoDataGridGroupingModule, DxoDataGridGroupingTextsModule, DxiDataGridGroupItemModule, DxoDataGridGroupOperationDescriptionsModule, DxoDataGridGroupPanelModule, DxoDataGridHeaderFilterModule, DxoDataGridHideModule, DxoDataGridIconsModule, DxoDataGridIndicatorOptionsModule, DxiDataGridItemModule, DxoDataGridKeyboardNavigationModule, DxoDataGridLabelModule, DxoDataGridLoadPanelModule, DxoDataGridLookupModule, DxoDataGridMasterDetailModule, DxoDataGridMyModule, DxiDataGridNumericRuleModule, DxoDataGridOffsetModule, DxoDataGridOperationDescriptionsModule, DxoDataGridOptionsModule, DxoDataGridPagerModule, DxoDataGridPagingModule, DxiDataGridPatternRuleModule, DxoDataGridPopupModule, DxoDataGridPositionModule, DxiDataGridRangeRuleModule, DxoDataGridRemoteOperationsModule, DxiDataGridRequiredRuleModule, DxoDataGridRowDraggingModule, DxoDataGridScrollingModule, DxoDataGridSearchModule, DxoDataGridSearchPanelModule, DxoDataGridSelectionModule, DxoDataGridShowModule, DxiDataGridSimpleItemModule, DxiDataGridSortByGroupSummaryInfoModule, DxoDataGridSortingModule, DxoDataGridStateStoringModule, DxiDataGridStringLengthRuleModule, DxoDataGridSummaryModule, DxoDataGridSummaryTextsModule, DxiDataGridTabModule, DxiDataGridTabbedItemModule, DxoDataGridTabPanelOptionsModule, DxiDataGridTabPanelOptionsItemModule, DxoDataGridTextsModule, DxoDataGridToModule, DxoDataGridToolbarModule, DxiDataGridToolbarItemModule, DxiDataGridTotalItemModule, DxiDataGridValidationRuleModule, DxoDataGridValueFormatModule } from 'devextreme-angular/ui/data-grid/nested';
export * from 'devextreme-angular/ui/data-grid/nested';
import { PROPERTY_TOKEN_validationRules, PROPERTY_TOKEN_buttons, PROPERTY_TOKEN_items, PROPERTY_TOKEN_changes, PROPERTY_TOKEN_columns, PROPERTY_TOKEN_customOperations, PROPERTY_TOKEN_fields, PROPERTY_TOKEN_groupItems, PROPERTY_TOKEN_sortByGroupSummaryInfo, PROPERTY_TOKEN_tabs, PROPERTY_TOKEN_toolbarItems, PROPERTY_TOKEN_totalItems } from 'devextreme-angular/core/tokens';
/*!
* devextreme-angular
* Version: 26.1.3
* Build date: Wed Jun 10 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file in the root of the project for details.
*
* https://github.com/DevExpress/DevExtreme
*/
/* tslint:disable:max-line-length */
/**
* The DataGrid is a UI component that represents data from a local or remote source in the form of a grid. This UI component offers such basic features as sorting, grouping, filtering, as well as more advanced capabilities, like state storing, client-side exporting, master-detail interface, and many others.
*/
class DxDataGridComponent extends DxComponent {
set _validationRulesContentChildren(value) {
this.setChildren('validationRules', value);
}
set _buttonsContentChildren(value) {
this.setChildren('buttons', value);
}
set _itemsContentChildren(value) {
this.setChildren('items', value);
}
set _changesContentChildren(value) {
this.setChildren('changes', value);
}
set _columnsContentChildren(value) {
this.setChildren('columns', value);
}
set _customOperationsContentChildren(value) {
this.setChildren('customOperations', value);
}
set _fieldsContentChildren(value) {
this.setChildren('fields', value);
}
set _groupItemsContentChildren(value) {
this.setChildren('groupItems', value);
}
set _sortByGroupSummaryInfoContentChildren(value) {
this.setChildren('sortByGroupSummaryInfo', value);
}
set _tabsContentChildren(value) {
this.setChildren('tabs', value);
}
set _toolbarItemsContentChildren(value) {
this.setChildren('toolbarItems', value);
}
set _totalItemsContentChildren(value) {
this.setChildren('totalItems', value);
}
/**
* Specifies the shortcut key that sets focus on the UI component.
*/
get accessKey() {
return this._getOption('accessKey');
}
set accessKey(value) {
this._setOption('accessKey', value);
}
/**
* Specifies whether the UI component changes its visual state as a result of user interaction.
*/
get activeStateEnabled() {
return this._getOption('activeStateEnabled');
}
set activeStateEnabled(value) {
this._setOption('activeStateEnabled', value);
}
/**
* Configures the widget AI Assistant.
*/
get aiAssistant() {
return this._getOption('aiAssistant');
}
set aiAssistant(value) {
this._setOption('aiAssistant', value);
}
/**
* Binds the widget to an AI service.
*/
get aiIntegration() {
return this._getOption('aiIntegration');
}
set aiIntegration(value) {
this._setOption('aiIntegration', value);
}
/**
* Specifies whether a user can reorder columns.
*/
get allowColumnReordering() {
return this._getOption('allowColumnReordering');
}
set allowColumnReordering(value) {
this._setOption('allowColumnReordering', value);
}
/**
* Enables column resizing.
*/
get allowColumnResizing() {
return this._getOption('allowColumnResizing');
}
set allowColumnResizing(value) {
this._setOption('allowColumnResizing', value);
}
/**
* Automatically scrolls the component to the focused row when the focusedRowKey is changed.
*/
get autoNavigateToFocusedRow() {
return this._getOption('autoNavigateToFocusedRow');
}
set autoNavigateToFocusedRow(value) {
this._setOption('autoNavigateToFocusedRow', value);
}
/**
* Specifies whether data should be cached.
*/
get cacheEnabled() {
return this._getOption('cacheEnabled');
}
set cacheEnabled(value) {
this._setOption('cacheEnabled', value);
}
/**
* Enables a hint that appears when a user hovers the mouse pointer over a cell with truncated content.
*/
get cellHintEnabled() {
return this._getOption('cellHintEnabled');
}
set cellHintEnabled(value) {
this._setOption('cellHintEnabled', value);
}
/**
* Specifies if the component adjusts column widths to fit content.
*/
get columnAutoWidth() {
return this._getOption('columnAutoWidth');
}
set columnAutoWidth(value) {
this._setOption('columnAutoWidth', value);
}
/**
* Configures the column chooser.
*/
get columnChooser() {
return this._getOption('columnChooser');
}
set columnChooser(value) {
this._setOption('columnChooser', value);
}
/**
* Configures column fixing.
*/
get columnFixing() {
return this._getOption('columnFixing');
}
set columnFixing(value) {
this._setOption('columnFixing', value);
}
/**
* Specifies whether the UI component hides columns to adapt to the screen or container size. Ignored if allowColumnResizing is `true` and columnResizingMode is 'widget'.
*/
get columnHidingEnabled() {
return this._getOption('columnHidingEnabled');
}
set columnHidingEnabled(value) {
this._setOption('columnHidingEnabled', value);
}
/**
* Specifies the minimum width of columns.
*/
get columnMinWidth() {
return this._getOption('columnMinWidth');
}
set columnMinWidth(value) {
this._setOption('columnMinWidth', value);
}
/**
* Specifies how the UI component resizes columns. Applies only if allowColumnResizing is true.
*/
get columnResizingMode() {
return this._getOption('columnResizingMode');
}
set columnResizingMode(value) {
this._setOption('columnResizingMode', value);
}
/**
* An array of grid columns.
*/
get columns() {
return this._getOption('columns');
}
set columns(value) {
this._setOption('columns', value);
}
/**
* Specifies the width for all data columns. Has a lower priority than the column.width property.
*/
get columnWidth() {
return this._getOption('columnWidth');
}
set columnWidth(value) {
this._setOption('columnWidth', value);
}
/**
* Customizes columns after they are created.
*/
get customizeColumns() {
return this._getOption('customizeColumns');
}
set customizeColumns(value) {
this._setOption('customizeColumns', value);
}
/**
* Specifies a custom template for data rows.
*/
get dataRowTemplate() {
return this._getOption('dataRowTemplate');
}
set dataRowTemplate(value) {
this._setOption('dataRowTemplate', value);
}
/**
* Binds the UI component to data.
*/
get dataSource() {
return this._getOption('dataSource');
}
set dataSource(value) {
this._setOption('dataSource', value);
}
/**
* Specifies the format in which date-time values should be sent to the server.
*/
get dateSerializationFormat() {
return this._getOption('dateSerializationFormat');
}
set dateSerializationFormat(value) {
this._setOption('dateSerializationFormat', value);
}
/**
* Specifies whether the UI component responds to user interaction.
*/
get disabled() {
return this._getOption('disabled');
}
set disabled(value) {
this._setOption('disabled', value);
}
/**
* Configures editing.
*/
get editing() {
return this._getOption('editing');
}
set editing(value) {
this._setOption('editing', value);
}
/**
* Specifies the global attributes to be attached to the UI component's container element.
*/
get elementAttr() {
return this._getOption('elementAttr');
}
set elementAttr(value) {
this._setOption('elementAttr', value);
}
/**
* Indicates whether to show the error row.
*/
get errorRowEnabled() {
return this._getOption('errorRowEnabled');
}
set errorRowEnabled(value) {
this._setOption('errorRowEnabled', value);
}
/**
* Configures client-side exporting.
*/
get export() {
return this._getOption('export');
}
set export(value) {
this._setOption('export', value);
}
/**
* Configures the integrated filter builder.
*/
get filterBuilder() {
return this._getOption('filterBuilder');
}
set filterBuilder(value) {
this._setOption('filterBuilder', value);
}
/**
* Configures the popup in which the integrated filter builder is shown.
*/
get filterBuilderPopup() {
return this._getOption('filterBuilderPopup');
}
set filterBuilderPopup(value) {
this._setOption('filterBuilderPopup', value);
}
/**
* Configures the filter panel.
*/
get filterPanel() {
return this._getOption('filterPanel');
}
set filterPanel(value) {
this._setOption('filterPanel', value);
}
/**
* Configures the filter row.
*/
get filterRow() {
return this._getOption('filterRow');
}
set filterRow(value) {
this._setOption('filterRow', value);
}
/**
* Specifies whether to synchronize the filter row, header filter, and filter builder. The synchronized filter expression is stored in the filterValue property.
*/
get filterSyncEnabled() {
return this._getOption('filterSyncEnabled');
}
set filterSyncEnabled(value) {
this._setOption('filterSyncEnabled', value);
}
/**
* Specifies a filter expression.
*/
get filterValue() {
return this._getOption('filterValue');
}
set filterValue(value) {
this._setOption('filterValue', value);
}
/**
* The index of the column that contains the focused data cell. This index is taken from the columns array.
*/
get focusedColumnIndex() {
return this._getOption('focusedColumnIndex');
}
set focusedColumnIndex(value) {
this._setOption('focusedColumnIndex', value);
}
/**
* Specifies whether the focused row feature is enabled.
*/
get focusedRowEnabled() {
return this._getOption('focusedRowEnabled');
}
set focusedRowEnabled(value) {
this._setOption('focusedRowEnabled', value);
}
/**
* Specifies or indicates the focused data row's index.
*/
get focusedRowIndex() {
return this._getOption('focusedRowIndex');
}
set focusedRowIndex(value) {
this._setOption('focusedRowIndex', value);
}
/**
* Specifies initially or currently focused grid row's key.
*/
get focusedRowKey() {
return this._getOption('focusedRowKey');
}
set focusedRowKey(value) {
this._setOption('focusedRowKey', value);
}
/**
* Configures grouping.
*/
get grouping() {
return this._getOption('grouping');
}
set grouping(value) {
this._setOption('grouping', value);
}
/**
* Configures the group panel.
*/
get groupPanel() {
return this._getOption('groupPanel');
}
set groupPanel(value) {
this._setOption('groupPanel', value);
}
/**
* Configures the header filter feature.
*/
get headerFilter() {
return this._getOption('headerFilter');
}
set headerFilter(value) {
this._setOption('headerFilter', value);
}
/**
* Specifies the UI component's height.
*/
get height() {
return this._getOption('height');
}
set height(value) {
this._setOption('height', value);
}
/**
* Specifies whether to highlight rows and cells with edited data. repaintChangesOnly should be true.
*/
get highlightChanges() {
return this._getOption('highlightChanges');
}
set highlightChanges(value) {
this._setOption('highlightChanges', value);
}
/**
* Specifies text for a hint that appears when a user pauses on the UI component.
*/
get hint() {
return this._getOption('hint');
}
set hint(value) {
this._setOption('hint', value);
}
/**
* Specifies whether the UI component changes its state when a user pauses on it.
*/
get hoverStateEnabled() {
return this._getOption('hoverStateEnabled');
}
set hoverStateEnabled(value) {
this._setOption('hoverStateEnabled', value);
}
/**
* Configures keyboard navigation.
*/
get keyboardNavigation() {
return this._getOption('keyboardNavigation');
}
set keyboardNavigation(value) {
this._setOption('keyboardNavigation', value);
}
/**
* 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.
*/
get keyExpr() {
return this._getOption('keyExpr');
}
set keyExpr(value) {
this._setOption('keyExpr', value);
}
/**
* Configures the load panel.
*/
get loadPanel() {
return this._getOption('loadPanel');
}
set loadPanel(value) {
this._setOption('loadPanel', value);
}
/**
* Allows you to build a master-detail interface in the grid.
*/
get masterDetail() {
return this._getOption('masterDetail');
}
set masterDetail(value) {
this._setOption('masterDetail', value);
}
/**
* Specifies a text string shown when the widget does not display any data.
*/
get noDataText() {
return this._getOption('noDataText');
}
set noDataText(value) {
this._setOption('noDataText', value);
}
/**
* Configures the pager.
*/
get pager() {
return this._getOption('pager');
}
set pager(value) {
this._setOption('pager', value);
}
/**
* Configures paging.
*/
get paging() {
return this._getOption('paging');
}
set paging(value) {
this._setOption('paging', value);
}
/**
* Specifies DataGrid operations to be executed on the server side.
*/
get remoteOperations() {
return this._getOption('remoteOperations');
}
set remoteOperations(value) {
this._setOption('remoteOperations', value);
}
/**
* Specifies whether to render the filter row, command columns, and columns with showEditorAlways set to true after other elements.
*/
get renderAsync() {
return this._getOption('renderAsync');
}
set renderAsync(value) {
this._setOption('renderAsync', value);
}
/**
* Specifies whether to repaint only those cells whose data changed.
*/
get repaintChangesOnly() {
return this._getOption('repaintChangesOnly');
}
set repaintChangesOnly(value) {
this._setOption('repaintChangesOnly', value);
}
/**
* Specifies whether rows should be shaded differently.
*/
get rowAlternationEnabled() {
return this._getOption('rowAlternationEnabled');
}
set rowAlternationEnabled(value) {
this._setOption('rowAlternationEnabled', value);
}
/**
* Configures row reordering using drag and drop gestures.
*/
get rowDragging() {
return this._getOption('rowDragging');
}
set rowDragging(value) {
this._setOption('rowDragging', value);
}
/**
* Specifies a custom template for rows.
* @deprecated Use the dataRowTemplate option instead.
*/
get rowTemplate() {
return this._getOption('rowTemplate');
}
set rowTemplate(value) {
this._setOption('rowTemplate', value);
}
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled() {
return this._getOption('rtlEnabled');
}
set rtlEnabled(value) {
this._setOption('rtlEnabled', value);
}
/**
* Configures scrolling.
*/
get scrolling() {
return this._getOption('scrolling');
}
set scrolling(value) {
this._setOption('scrolling', value);
}
/**
* Configures the search panel.
*/
get searchPanel() {
return this._getOption('searchPanel');
}
set searchPanel(value) {
this._setOption('searchPanel', value);
}
/**
* Allows you to select rows or determine which rows are selected.
*/
get selectedRowKeys() {
return this._getOption('selectedRowKeys');
}
set selectedRowKeys(value) {
this._setOption('selectedRowKeys', value);
}
/**
* Configures runtime selection.
*/
get selection() {
return this._getOption('selection');
}
set selection(value) {
this._setOption('selection', value);
}
/**
* Specifies filters for the rows that must be selected initially. Applies only if selection.deferred is true.
*/
get selectionFilter() {
return this._getOption('selectionFilter');
}
set selectionFilter(value) {
this._setOption('selectionFilter', value);
}
/**
* Specifies whether the outer borders of the UI component are visible.
*/
get showBorders() {
return this._getOption('showBorders');
}
set showBorders(value) {
this._setOption('showBorders', value);
}
/**
* Specifies whether column headers are visible.
*/
get showColumnHeaders() {
return this._getOption('showColumnHeaders');
}
set showColumnHeaders(value) {
this._setOption('showColumnHeaders', value);
}
/**
* Specifies whether vertical lines that separate one column from another are visible.
*/
get showColumnLines() {
return this._getOption('showColumnLines');
}
set showColumnLines(value) {
this._setOption('showColumnLines', value);
}
/**
* Specifies whether horizontal lines that separate one row from another are visible.
*/
get showRowLines() {
return this._getOption('showRowLines');
}
set showRowLines(value) {
this._setOption('showRowLines', value);
}
/**
* Allows you to sort groups according to the values of group summary items.
*/
get sortByGroupSummaryInfo() {
return this._getOption('sortByGroupSummaryInfo');
}
set sortByGroupSummaryInfo(value) {
this._setOption('sortByGroupSummaryInfo', value);
}
/**
* Configures runtime sorting.
*/
get sorting() {
return this._getOption('sorting');
}
set sorting(value) {
this._setOption('sorting', value);
}
/**
* Configures state storing.
*/
get stateStoring() {
return this._getOption('stateStoring');
}
set stateStoring(value) {
this._setOption('stateStoring', value);
}
/**
* Specifies the properties of the grid summary.
*/
get summary() {
return this._getOption('summary');
}
set summary(value) {
this._setOption('summary', value);
}
/**
* Specifies whether to show only relevant values in the header filter and filter row.
*/
get syncLookupFilterValues() {
return this._getOption('syncLookupFilterValues');
}
set syncLookupFilterValues(value) {
this._setOption('syncLookupFilterValues', value);
}
/**
* Specifies the number of the element when the Tab key is used for navigating.
*/
get tabIndex() {
return this._getOption('tabIndex');
}
set tabIndex(value) {
this._setOption('tabIndex', value);
}
/**
* Configures the toolbar.
*/
get toolbar() {
return this._getOption('toolbar');
}
set toolbar(value) {
this._setOption('toolbar', value);
}
/**
* Specifies whether to enable two-way data binding.
*/
get twoWayBindingEnabled() {
return this._getOption('twoWayBindingEnabled');
}
set twoWayBindingEnabled(value) {
this._setOption('twoWayBindingEnabled', value);
}
/**
* Specifies whether the UI component is visible.
*/
get visible() {
return this._getOption('visible');
}
set visible(value) {
this._setOption('visible', value);
}
/**
* Specifies the UI component's width.
*/
get width() {
return this._getOption('width');
}
set width(value) {
this._setOption('width', value);
}
/**
* Specifies whether text that does not fit into a column should be wrapped.
*/
get wordWrapEnabled() {
return this._getOption('wordWrapEnabled');
}
set wordWrapEnabled(value) {
this._setOption('wordWrapEnabled', value);
}
constructor(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) {
super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
this._watcherHelper = _watcherHelper;
this._idh = _idh;
this.instance = null;
this._createEventEmitters([
{ subscribe: 'adaptiveDetailRowPreparing', emit: 'onAdaptiveDetailRowPreparing' },
{ subscribe: 'aIAssistantRequestCreating', emit: 'onAIAssistantRequestCreating' },
{ subscribe: 'aIColumnRequestCreating', emit: 'onAIColumnRequestCreating' },
{ subscribe: 'cellClick', emit: 'onCellClick' },
{ subscribe: 'cellDblClick', emit: 'onCellDblClick' },
{ subscribe: 'cellHoverChanged', emit: 'onCellHoverChanged' },
{ subscribe: 'cellPrepared', emit: 'onCellPrepared' },
{ subscribe: 'contentReady', emit: 'onContentReady' },
{ subscribe: 'contextMenuPreparing', emit: 'onContextMenuPreparing' },
{ subscribe: 'dataErrorOccurred', emit: 'onDataErrorOccurred' },
{ subscribe: 'disposing', emit: 'onDisposing' },
{ subscribe: 'editCanceled', emit: 'onEditCanceled' },
{ subscribe: 'editCanceling', emit: 'onEditCanceling' },
{ subscribe: 'editingStart', emit: 'onEditingStart' },
{ subscribe: 'editorPrepared', emit: 'onEditorPrepared' },
{ subscribe: 'editorPreparing', emit: 'onEditorPreparing' },
{ subscribe: 'exporting', emit: 'onExporting' },
{ subscribe: 'focusedCellChanged', emit: 'onFocusedCellChanged' },
{ subscribe: 'focusedCellChanging', emit: 'onFocusedCellChanging' },
{ subscribe: 'focusedRowChanged', emit: 'onFocusedRowChanged' },
{ subscribe: 'focusedRowChanging', emit: 'onFocusedRowChanging' },
{ subscribe: 'initialized', emit: 'onInitialized' },
{ subscribe: 'initNewRow', emit: 'onInitNewRow' },
{ subscribe: 'keyDown', emit: 'onKeyDown' },
{ subscribe: 'optionChanged', emit: 'onOptionChanged' },
{ subscribe: 'rowClick', emit: 'onRowClick' },
{ subscribe: 'rowCollapsed', emit: 'onRowCollapsed' },
{ subscribe: 'rowCollapsing', emit: 'onRowCollapsing' },
{ subscribe: 'rowDblClick', emit: 'onRowDblClick' },
{ subscribe: 'rowExpanded', emit: 'onRowExpanded' },
{ subscribe: 'rowExpanding', emit: 'onRowExpanding' },
{ subscribe: 'rowInserted', emit: 'onRowInserted' },
{ subscribe: 'rowInserting', emit: 'onRowInserting' },
{ subscribe: 'rowPrepared', emit: 'onRowPrepared' },
{ subscribe: 'rowRemoved', emit: 'onRowRemoved' },
{ subscribe: 'rowRemoving', emit: 'onRowRemoving' },
{ subscribe: 'rowUpdated', emit: 'onRowUpdated' },
{ subscribe: 'rowUpdating', emit: 'onRowUpdating' },
{ subscribe: 'rowValidating', emit: 'onRowValidating' },
{ subscribe: 'saved', emit: 'onSaved' },
{ subscribe: 'saving', emit: 'onSaving' },
{ subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
{ subscribe: 'toolbarPreparing', emit: 'onToolbarPreparing' },
{ emit: 'accessKeyChange' },
{ emit: 'activeStateEnabledChange' },
{ emit: 'aiAssistantChange' },
{ emit: 'aiIntegrationChange' },
{ emit: 'allowColumnReorderingChange' },
{ emit: 'allowColumnResizingChange' },
{ emit: 'autoNavigateToFocusedRowChange' },
{ emit: 'cacheEnabledChange' },
{ emit: 'cellHintEnabledChange' },
{ emit: 'columnAutoWidthChange' },
{ emit: 'columnChooserChange' },
{ emit: 'columnFixingChange' },
{ emit: 'columnHidingEnabledChange' },
{ emit: 'columnMinWidthChange' },
{ emit: 'columnResizingModeChange' },
{ emit: 'columnsChange' },
{ emit: 'columnWidthChange' },
{ emit: 'customizeColumnsChange' },
{ emit: 'dataRowTemplateChange' },
{ emit: 'dataSourceChange' },
{ emit: 'dateSerializationFormatChange' },
{ emit: 'disabledChange' },
{ emit: 'editingChange' },
{ emit: 'elementAttrChange' },
{ emit: 'errorRowEnabledChange' },
{ emit: 'exportChange' },
{ emit: 'filterBuilderChange' },
{ emit: 'filterBuilderPopupChange' },
{ emit: 'filterPanelChange' },
{ emit: 'filterRowChange' },
{ emit: 'filterSyncEnabledChange' },
{ emit: 'filterValueChange' },
{ emit: 'focusedColumnIndexChange' },
{ emit: 'focusedRowEnabledChange' },
{ emit: 'focusedRowIndexChange' },
{ emit: 'focusedRowKeyChange' },
{ emit: 'groupingChange' },
{ emit: 'groupPanelChange' },
{ emit: 'headerFilterChange' },
{ emit: 'heightChange' },
{ emit: 'highlightChangesChange' },
{ emit: 'hintChange' },
{ emit: 'hoverStateEnabledChange' },
{ emit: 'keyboardNavigationChange' },
{ emit: 'keyExprChange' },
{ emit: 'loadPanelChange' },
{ emit: 'masterDetailChange' },
{ emit: 'noDataTextChange' },
{ emit: 'pagerChange' },
{ emit: 'pagingChange' },
{ emit: 'remoteOperationsChange' },
{ emit: 'renderAsyncChange' },
{ emit: 'repaintChangesOnlyChange' },
{ emit: 'rowAlternationEnabledChange' },
{ emit: 'rowDraggingChange' },
{ emit: 'rowTemplateChange' },
{ emit: 'rtlEnabledChange' },
{ emit: 'scrollingChange' },
{ emit: 'searchPanelChange' },
{ emit: 'selectedRowKeysChange' },
{ emit: 'selectionChange' },
{ emit: 'selectionFilterChange' },
{ emit: 'showBordersChange' },
{ emit: 'showColumnHeadersChange' },
{ emit: 'showColumnLinesChange' },
{ emit: 'showRowLinesChange' },
{ emit: 'sortByGroupSummaryInfoChange' },
{ emit: 'sortingChange' },
{ emit: 'stateStoringChange' },
{ emit: 'summaryChange' },
{ emit: 'syncLookupFilterValuesChange' },
{ emit: 'tabIndexChange' },
{ emit: 'toolbarChange' },
{ emit: 'twoWayBindingEnabledChange' },
{ emit: 'visibleChange' },
{ emit: 'widthChange' },
{ emit: 'wordWrapEnabledChange' }
]);
this._idh.setHost(this);
optionHost.setHost(this);
}
_createInstance(element, options) {
return new DxDataGrid(element, options);
}
ngOnDestroy() {
this._destroyWidget();
}
ngOnChanges(changes) {
super.ngOnChanges(changes);
this.setupChanges('columns', changes);
this.setupChanges('dataSource', changes);
this.setupChanges('filterValue', changes);
this.setupChanges('keyExpr', changes);
this.setupChanges('selectedRowKeys', changes);
this.setupChanges('selectionFilter', changes);
this.setupChanges('sortByGroupSummaryInfo', changes);
}
setupChanges(prop, changes) {
if (!(prop in this._optionsToUpdate)) {
this._idh.setup(prop, changes);
}
}
ngDoCheck() {
this._idh.doCheck('columns');
this._idh.doCheck('dataSource');
this._idh.doCheck('filterValue');
this._idh.doCheck('keyExpr');
this._idh.doCheck('selectedRowKeys');
this._idh.doCheck('selectionFilter');
this._idh.doCheck('sortByGroupSummaryInfo');
this._watcherHelper.checkWatchers();
super.ngDoCheck();
super.clearChangedOptions();
}
_setOption(name, value) {
let isSetup = this._idh.setupSingle(name, value);
let isChanged = this._idh.getChanges(name, value) !== null;
if (isSetup || isChanged) {
super._setOption(name, value);
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: DxDataGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.DxTemplateHost }, { token: i1.WatcherHelper }, { token: i1.IterableDifferHelper }, { token: i1.NestedOptionHost }, { token: i0.TransferState }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: DxDataGridComponent, isStandalone: true, selector: "dx-data-grid", inputs: { accessKey: "accessKey", activeStateEnabled: "activeStateEnabled", aiAssistant: "aiAssistant", aiIntegration: "aiIntegration", allowColumnReordering: "allowColumnReordering", allowColumnResizing: "allowColumnResizing", autoNavigateToFocusedRow: "autoNavigateToFocusedRow", cacheEnabled: "cacheEnabled", cellHintEnabled: "cellHintEnabled", columnAutoWidth: "columnAutoWidth", columnChooser: "columnChooser", columnFixing: "columnFixing", columnHidingEnabled: "columnHidingEnabled", columnMinWidth: "columnMinWidth", columnResizingMode: "columnResizingMode", columns: "columns", columnWidth: "columnWidth", customizeColumns: "customizeColumns", dataRowTemplate: "dataRowTemplate", dataSource: "dataSource", dateSerializationFormat: "dateSerializationFormat", disabled: "disabled", editing: "editing", elementAttr: "elementAttr", errorRowEnabled: "errorRowEnabled", export: "export", filterBuilder: "filterBuilder", filterBuilderPopup: "filterBuilderPopup", filterPanel: "filterPanel", filterRow: "filterRow", filterSyncEnabled: "filterSyncEnabled", filterValue: "filterValue", focusedColumnIndex: "focusedColumnIndex", focusedRowEnabled: "focusedRowEnabled", focusedRowIndex: "focusedRowIndex", focusedRowKey: "focusedRowKey", grouping: "grouping", groupPanel: "groupPanel", headerFilter: "headerFilter", height: "height", highlightChanges: "highlightChanges", hint: "hint", hoverStateEnabled: "hoverStateEnabled", keyboardNavigation: "keyboardNavigation", keyExpr: "keyExpr", loadPanel: "loadPanel", masterDetail: "masterDetail", noDataText: "noDataText", pager: "pager", paging: "paging", remoteOperations: "remoteOperations", renderAsync: "renderAsync", repaintChangesOnly: "repaintChangesOnly", rowAlternationEnabled: "rowAlternationEnabled", rowDragging: "rowDragging", rowTemplate: "rowTemplate", rtlEnabled: "rtlEnabled", scrolling: "scrolling", searchPanel: "searchPanel", selectedRowKeys: "selectedRowKeys", selection: "selection", selectionFilter: "selectionFilter", showBorders: "showBorders", showColumnHeaders: "showColumnHeaders", showColumnLines: "showColumnLines", showRowLines: "showRowLines", sortByGroupSummaryInfo: "sortByGroupSummaryInfo", sorting: "sorting", stateStoring: "stateStoring", summary: "summary", syncLookupFilterValues: "syncLookupFilterValues", tabIndex: "tabIndex", toolbar: "toolbar", twoWayBindingEnabled: "twoWayBindingEnabled", visible: "visible", width: "width", wordWrapEnabled: "wordWrapEnabled" }, outputs: { onAdaptiveDetailRowPreparing: "onAdaptiveDetailRowPreparing", onAIAssistantRequestCreating: "onAIAssistantRequestCreating", onAIColumnRequestCreating: "onAIColumnRequestCreating", onCellClick: "onCellClick", onCellDblClick: "onCellDblClick", onCellHoverChanged: "onCellHoverChanged", onCellPrepared: "onCellPrepared", onContentReady: "onContentReady", onContextMenuPreparing: "onContextMenuPreparing", onDataErrorOccurred: "onDataErrorOccurred", onDisposing: "onDisposing", onEditCanceled: "onEditCanceled", onEditCanceling: "onEditCanceling", onEditingStart: "onEditingStart", onEditorPrepared: "onEditorPrepared", onEditorPreparing: "onEditorPreparing", onExporting: "onExporting", onFocusedCellChanged: "onFocusedCellChanged", onFocusedCellChanging: "onFocusedCellChanging", onFocusedRowChanged: "onFocusedRowChanged", onFocusedRowChanging: "onFocusedRowChanging", onInitialized: "onInitialized", onInitNewRow: "onInitNewRow", onKeyDown: "onKeyDown", onOptionChanged: "onOptionChanged", onRowClick: "onRowClick", onRowCollapsed: "onRowCollapsed", onRowCollapsing: "onRowCollapsing", onRowDblClick: "onRowDblClick", onRowExpanded: "onRowExpanded", onRowExpanding: "onRowExpanding", onRowInserted: "onRowInserted", onRowInserting: "onRowInserting", onRowPrepared: "onRowPrepared", onRowRemoved: "onRowRemoved", onRowRemoving: "onRowRemoving", onRowUpdated: "onRowUpdated", onRowUpdating: "onRowUpdating", onRowValidating: "onRowValidating", onSaved: "onSaved", onSaving: "onSaving", onSelectionChanged: "onSelectionChanged", onToolbarPreparing: "onToolbarPreparing", accessKeyChange: "accessKeyChange", activeStateEnabledChange: "activeStateEnabledChange", aiAssistantChange: "aiAssistantChange", aiIntegrationChange: "aiIntegrationChange", allowColumnReorderingChange: "allowColumnReorderingChange", allowColumnResizingChange: "allowColumnResizingChange", autoNavigateToFocusedRowChange: "autoNavigateToFocusedRowChange", cacheEnabledChange: "cacheEnabledChange", cellHintEnabledChange: "cellHintEnabledChange", columnAutoWidthChange: "columnAutoWidthChange", columnChooserChange: "columnChooserChange", columnFixingChange: "columnFixingChange", columnHidingEnabledChange: "columnHidingEnabledChange", columnMinWidthChange: "columnMinWidthChange", columnResizingModeChange: "columnResizingModeChange", columnsChange: "columnsChange", columnWidthChange: "columnWidthChange", customizeColumnsChange: "customizeColumnsChange", dataRowTemplateChange: "dataRowTemplateChange", dataSourceChange: "dataSourceChange", dateSerializationFormatChange: "dateSerializationFormatChange", disabledChange: "disabledChange", editingChange: "editingChange", elementAttrChange: "elementAttrChange", errorRowEnabledChange: "errorRowEnabledChange", exportChange: "exportChange", filterBuilderChange: "filterBuilderChange", filterBuilderPopupChange: "filterBuilderPopupChange", filterPanelChange: "filterPanelChange", filterRowChange: "filterRowChange", filterSyncEnabledChange: "filterSyncEnabledChange", filterValueChange: "filterValueChange", focusedColumnIndexChange: "focusedColumnIndexChange", focusedRowEnabledChange: "focusedRowEnabledChange", focusedRowIndexChange: "focusedRowIndexChange", focusedRowKeyChange: "focusedRowKeyChange", groupingChange: "groupingChange", groupPanelChange: "groupPanelChange", headerFilterChange: "headerFilterChange", heightChange: "heightChange", highlightChangesChange: "highlightChangesChange", hintChange: "hintChange", hoverStateEnabledChange: "hoverStateEnabledChange", keyboardNavigationChange: "keyboardNavigationChange", keyExprChange: "keyExprChange", loadPanelChange: "loadPanelChange", masterDetailChange: "masterDetailChange", noDataTextChange: "noDataTextChange", pagerChange: "pagerChange", pagingChange: "pagingChange", remoteOperationsChange: "remoteOperationsChange", renderAsyncChange: "renderAsyncChange", repaintChangesOnlyChange: "repaintChangesOnlyChange", rowAlternationEnabledChange: "rowAlternationEnabledChange", rowDraggingChange: "rowDraggingChange", rowTemplateChange: "rowTemplateChange", rtlEnabledChange: "rtlEnabledChange", scrollingChange: "scrollingChange", searchPanelChange: "searchPanelChange", selectedRowKeysChange: "selectedRowKeysChange", selectionChange: "selectionChange", selectionFilterChange: "selectionFilterChange", showBordersChange: "showBordersChange", showColumnHeadersChange: "showColumnHeadersChange", showColumnLinesChange: "showColumnLinesChange", showRowLinesChange: "showRowLinesChange", sortByGroupSummaryInfoChange: "sortByGroupSummaryInfoChange", sortingChange: "sortingChange", stateStoringChange: "stateStoringChange", summaryChange: "summaryChange", syncLookupFilterValuesChange: "syncLookupFilterValuesChange", tabIndexChange: "tabIndexChange", toolbarChange: "toolbarChange", twoWayBindingEnabledChange: "twoWayBindingEnabledChange", visibleChange: "visibleChange", widthChange: "widthChange", wordWrapEnabledChange: "wordWrapEnabledChange" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
DxTemplateHost,
WatcherHelper,
NestedOptionHost,
IterableDifferHelper
], queries: [{ propertyName: "_validationRulesContentChildren", predicate: PROPERTY_TOKEN_validationRules }, { propertyName: "_buttonsContentChildren", predicate: PROPERTY_TOKEN_buttons }, { propertyName: "_itemsContentChildren", predicate: PROPERTY_TOKEN_items }, { propertyName: "_changesContentChildren", predicate: PROPERTY_TOKEN_changes }, { propertyName: "_columnsContentChildren", predicate: PROPERTY_TOKEN_columns }, { propertyName: "_customOperationsContentChildren", predicate: PROPERTY_TOKEN_customOperations }, { propertyName: "_fieldsContentChildren", predicate: PROPERTY_TOKEN_fields }, { propertyName: "_groupItemsContentChildren", predicate: PROPERTY_TOKEN_groupItems }, { propertyName: "_sortByGroupSummaryInfoContentChildren", predicate: PROPERTY_TOKEN_sortByGroupSummaryInfo }, { propertyName: "_tabsContentChildren", predicate: PROPERTY_TOKEN_tabs }, { propertyName: "_toolbarItemsContentChildren", predicate: PROPERTY_TOKEN_toolbarItems }, { propertyName: "_totalItemsContentChildren", predicate: PROPERTY_TOKEN_totalItems }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: DxIntegrationModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: DxDataGridComponent, decorators: [{
type: Component,
args: [{
selector: 'dx-data-grid',
template: '',
host: { ngSkipHydration: 'true' },
imports: [DxIntegrationModule],
providers: [
DxTemplateHost,
WatcherHelper,
NestedOptionHost,
IterableDifferHelper
]
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.DxTemplateHost }, { type: i1.WatcherHelper }, { type: i1.IterableDifferHelper }, { type: i1.NestedOptionHost }, { type: i0.TransferState }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }], propDecorators: { _validationRulesContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_validationRules]
}], _buttonsContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_buttons]
}], _itemsContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_items]
}], _changesContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_changes]
}], _columnsContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_columns]
}], _customOperationsContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_customOperations]
}], _fieldsContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_fields]
}], _groupItemsContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_groupItems]
}], _sortByGroupSummaryInfoContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_sortByGroupSummaryInfo]
}], _tabsContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_tabs]
}], _toolbarItemsContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_toolbarItems]
}], _totalItemsContentChildren: [{
type: ContentChildren,
args: [PROPERTY_TOKEN_totalItems]
}], accessKey: [{
type: Input
}], activeStateEnabled: [{
type: Input
}], aiAssistant: [{
type: Input
}], aiIntegration: [{
type: Input
}], allowColumnReordering: [{
type: Input
}], allowColumnResizing: [{
type: Input
}], autoNavigateToFocusedRow: [{
type: Input
}], cacheEnabled: [{
type: Input
}], cellHintEnabled: [{
type: Input
}], columnAutoWidth: [{
type: Input
}], columnChooser: [{
type: Input
}], columnFixing: [{
type: Input
}], columnHidingEnabled: [{
type: Input
}], columnMinWidth: [{
type: Input
}], columnResizingMode: [{
type: Input
}], columns: [{
type: Input
}], columnWidth: [{
type: Input
}], customizeColumns: [{
type: Input
}], dataRowTemplate: [{
type: Input
}], dataSource: [{
type: Input
}], dateSerializationFormat: [{
type: Input
}], disabled: [{
type: Input
}], editing: [{
type: Input
}], elementAttr: [{
type: Input
}], errorRowEnabled: [{
type: Input
}], export: [{
type: Input
}], filterBuilder: [{
type: Input
}], filterBuilderPopup: [{
type: Input
}], filterPanel: [{
type: Input
}], filterRow: [{
type: Input
}], filterSyncEnabled: [{
type: Input
}], filterValue: [{
type: Input
}], focusedColumnIndex: [{
type: Input
}], focusedRowEnabled: [{
type: Input
}], focusedRowIndex: [{
type: Input
}], focusedRowKey: [{
type: Input
}], grouping: [{
type: Input
}], groupPanel: [{
type: Input
}], headerFilter: [{
type: Input
}], height: [{
type: Input
}], highlightChanges: [{
type: Input
}], hint: [{
type: Input
}], hoverStateEnabled: [{
type: Input
}], keyboardNavigation: [{
type: Input
}], keyExpr: [{