devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
1,675 lines (1,388 loc) • 75 kB
TypeScript
import { TransferState } from '@angular/platform-browser';
import { ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core';
import DevExpress from 'devextreme/bundles/dx.all';
import { UserDefinedElement } from 'devextreme/core/element';
import Store from 'devextreme/data/abstract_store';
import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
import { Format } from 'devextreme/localization';
import { dxFilterBuilderOptions } from 'devextreme/ui/filter_builder';
import { dxFormOptions } from 'devextreme/ui/form';
import { Properties as dxPopupOptions } from 'devextreme/ui/popup';
import DxDataGrid from 'devextreme/ui/data_grid';
import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core';
import { DxiColumnComponent } from 'devextreme-angular/ui/nested';
import { DxiSortByGroupSummaryInfoComponent } from 'devextreme-angular/ui/nested';
import * as i0 from "@angular/core";
import * as i1 from "devextreme-angular/ui/nested";
import * as i2 from "devextreme-angular/core";
import * as i3 from "@angular/platform-browser";
export { ExplicitTypes } from 'devextreme/ui/data_grid';
/**
* 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.
*/
export declare class DxDataGridComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {
private _watcherHelper;
private _idh;
instance: DxDataGrid;
/**
* Specifies the shortcut key that sets focus on the UI component.
*/
get accessKey(): string | undefined;
set accessKey(value: string | undefined);
/**
* Specifies whether the UI component changes its visual state as a result of user interaction.
*/
get activeStateEnabled(): boolean;
set activeStateEnabled(value: boolean);
/**
* Specifies whether a user can reorder columns.
*/
get allowColumnReordering(): boolean;
set allowColumnReordering(value: boolean);
/**
* Specifies whether a user can resize columns.
*/
get allowColumnResizing(): boolean;
set allowColumnResizing(value: boolean);
/**
* Automatically scrolls the component to the focused row when the focusedRowKey is changed.
*/
get autoNavigateToFocusedRow(): boolean;
set autoNavigateToFocusedRow(value: boolean);
/**
* Specifies whether data should be cached.
*/
get cacheEnabled(): boolean;
set cacheEnabled(value: boolean);
/**
* Enables a hint that appears when a user hovers the mouse pointer over a cell with truncated content.
*/
get cellHintEnabled(): boolean;
set cellHintEnabled(value: boolean);
/**
* Specifies whether columns should adjust their widths to the content.
*/
get columnAutoWidth(): boolean;
set columnAutoWidth(value: boolean);
/**
* Configures the column chooser.
*/
get columnChooser(): {
allowSearch?: boolean;
emptyPanelText?: string;
enabled?: boolean;
height?: number;
mode?: string;
searchTimeout?: number;
sortOrder?: string | undefined;
title?: string;
width?: number;
};
set columnChooser(value: {
allowSearch?: boolean;
emptyPanelText?: string;
enabled?: boolean;
height?: number;
mode?: string;
searchTimeout?: number;
sortOrder?: string | undefined;
title?: string;
width?: number;
});
/**
* Configures column fixing.
*/
get columnFixing(): {
enabled?: boolean;
texts?: {
fix?: string;
leftPosition?: string;
rightPosition?: string;
unfix?: string;
};
};
set columnFixing(value: {
enabled?: boolean;
texts?: {
fix?: string;
leftPosition?: string;
rightPosition?: string;
unfix?: string;
};
});
/**
* 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'.
*/
get columnHidingEnabled(): boolean;
set columnHidingEnabled(value: boolean);
/**
* Specifies the minimum width of columns.
*/
get columnMinWidth(): number | undefined;
set columnMinWidth(value: number | undefined);
/**
* Specifies how the UI component resizes columns. Applies only if allowColumnResizing is true.
*/
get columnResizingMode(): string;
set columnResizingMode(value: string);
/**
* An array of grid columns.
*/
get columns(): Array<DevExpress.ui.dxDataGridColumn | string>;
set columns(value: Array<DevExpress.ui.dxDataGridColumn | string>);
/**
* Specifies the width for all data columns. Has a lower priority than the column.width property.
*/
get columnWidth(): number | string | undefined;
set columnWidth(value: number | string | undefined);
/**
* Customizes columns after they are created.
*/
get customizeColumns(): Function;
set customizeColumns(value: Function);
/**
* Customizes data before export.
* @deprecated Since v20.1, we recommend ExcelJS-based export which does not use this property.
*/
get customizeExportData(): Function;
set customizeExportData(value: Function);
/**
* Specifies a custom template for data rows.
*/
get dataRowTemplate(): any;
set dataRowTemplate(value: any);
/**
* Binds the UI component to data.
*/
get dataSource(): DataSource | DataSourceOptions | Store | null | string | Array<any>;
set dataSource(value: DataSource | DataSourceOptions | Store | null | string | Array<any>);
/**
* Specifies the format in which date-time values should be sent to the server.
*/
get dateSerializationFormat(): string;
set dateSerializationFormat(value: string);
/**
* Specifies whether the UI component responds to user interaction.
*/
get disabled(): boolean;
set disabled(value: boolean);
/**
* Configures editing.
*/
get editing(): {
allowAdding?: boolean;
allowDeleting?: boolean | Function;
allowUpdating?: boolean | Function;
changes?: Array<DevExpress.common.grids.DataChange>;
confirmDelete?: boolean;
editColumnName?: string;
editRowKey?: any;
form?: dxFormOptions;
mode?: string;
newRowPosition?: string;
popup?: dxPopupOptions;
refreshMode?: string;
selectTextOnEditStart?: boolean;
startEditAction?: string;
texts?: {
addRow?: string;
cancelAllChanges?: string;
cancelRowChanges?: string;
confirmDeleteMessage?: string;
confirmDeleteTitle?: string;
deleteRow?: string;
editRow?: string;
saveAllChanges?: string;
saveRowChanges?: string;
undeleteRow?: string;
validationCancelChanges?: string;
};
useIcons?: boolean;
};
set editing(value: {
allowAdding?: boolean;
allowDeleting?: boolean | Function;
allowUpdating?: boolean | Function;
changes?: Array<DevExpress.common.grids.DataChange>;
confirmDelete?: boolean;
editColumnName?: string;
editRowKey?: any;
form?: dxFormOptions;
mode?: string;
newRowPosition?: string;
popup?: dxPopupOptions;
refreshMode?: string;
selectTextOnEditStart?: boolean;
startEditAction?: string;
texts?: {
addRow?: string;
cancelAllChanges?: string;
cancelRowChanges?: string;
confirmDeleteMessage?: string;
confirmDeleteTitle?: string;
deleteRow?: string;
editRow?: string;
saveAllChanges?: string;
saveRowChanges?: string;
undeleteRow?: string;
validationCancelChanges?: string;
};
useIcons?: boolean;
});
/**
* Specifies the global attributes to be attached to the UI component's container element.
*/
get elementAttr(): any;
set elementAttr(value: any);
/**
* Indicates whether to show the error row.
*/
get errorRowEnabled(): boolean;
set errorRowEnabled(value: boolean);
/**
* Configures client-side exporting.
*/
get export(): {
allowExportSelectedData?: boolean;
customizeExcelCell?: Function;
enabled?: boolean;
excelFilterEnabled?: boolean;
excelWrapTextEnabled?: boolean | undefined;
fileName?: string;
formats?: Array<string>;
ignoreExcelErrors?: boolean;
proxyUrl?: string | undefined;
texts?: {
exportAll?: string;
exportSelectedRows?: string;
exportTo?: string;
};
};
set export(value: {
allowExportSelectedData?: boolean;
customizeExcelCell?: Function;
enabled?: boolean;
excelFilterEnabled?: boolean;
excelWrapTextEnabled?: boolean | undefined;
fileName?: string;
formats?: Array<string>;
ignoreExcelErrors?: boolean;
proxyUrl?: string | undefined;
texts?: {
exportAll?: string;
exportSelectedRows?: string;
exportTo?: string;
};
});
/**
* Configures the integrated filter builder.
*/
get filterBuilder(): dxFilterBuilderOptions;
set filterBuilder(value: dxFilterBuilderOptions);
/**
* Configures the popup in which the integrated filter builder is shown.
*/
get filterBuilderPopup(): dxPopupOptions;
set filterBuilderPopup(value: dxPopupOptions);
/**
* Configures the filter panel.
*/
get filterPanel(): {
customizeText?: Function;
filterEnabled?: boolean;
texts?: {
clearFilter?: string;
createFilter?: string;
filterEnabledHint?: string;
};
visible?: boolean;
};
set filterPanel(value: {
customizeText?: Function;
filterEnabled?: boolean;
texts?: {
clearFilter?: string;
createFilter?: string;
filterEnabledHint?: string;
};
visible?: boolean;
});
/**
* Configures the filter row.
*/
get filterRow(): {
applyFilter?: string;
applyFilterText?: string;
betweenEndText?: string;
betweenStartText?: string;
operationDescriptions?: {
between?: string;
contains?: string;
endsWith?: string;
equal?: string;
greaterThan?: string;
greaterThanOrEqual?: string;
lessThan?: string;
lessThanOrEqual?: string;
notContains?: string;
notEqual?: string;
startsWith?: string;
};
resetOperationText?: string;
showAllText?: string;
showOperationChooser?: boolean;
visible?: boolean;
};
set filterRow(value: {
applyFilter?: string;
applyFilterText?: string;
betweenEndText?: string;
betweenStartText?: string;
operationDescriptions?: {
between?: string;
contains?: string;
endsWith?: string;
equal?: string;
greaterThan?: string;
greaterThanOrEqual?: string;
lessThan?: string;
lessThanOrEqual?: string;
notContains?: string;
notEqual?: string;
startsWith?: string;
};
resetOperationText?: string;
showAllText?: string;
showOperationChooser?: boolean;
visible?: boolean;
});
/**
* Specifies whether to synchronize the filter row, header filter, and filter builder. The synchronized filter expression is stored in the filterValue property.
*/
get filterSyncEnabled(): boolean | string;
set filterSyncEnabled(value: boolean | string);
/**
* Specifies a filter expression.
*/
get filterValue(): any;
set filterValue(value: any);
/**
* The index of the column that contains the focused data cell. This index is taken from the columns array.
*/
get focusedColumnIndex(): number;
set focusedColumnIndex(value: number);
/**
* Specifies whether the focused row feature is enabled.
*/
get focusedRowEnabled(): boolean;
set focusedRowEnabled(value: boolean);
/**
* Specifies or indicates the focused data row's index.
*/
get focusedRowIndex(): number;
set focusedRowIndex(value: number);
/**
* Specifies initially or currently focused grid row's key.
*/
get focusedRowKey(): any | undefined;
set focusedRowKey(value: any | undefined);
/**
* Configures grouping.
*/
get grouping(): {
allowCollapsing?: boolean;
autoExpandAll?: boolean;
contextMenuEnabled?: boolean;
expandMode?: string;
texts?: {
groupByThisColumn?: string;
groupContinuedMessage?: string;
groupContinuesMessage?: string;
ungroup?: string;
ungroupAll?: string;
};
};
set grouping(value: {
allowCollapsing?: boolean;
autoExpandAll?: boolean;
contextMenuEnabled?: boolean;
expandMode?: string;
texts?: {
groupByThisColumn?: string;
groupContinuedMessage?: string;
groupContinuesMessage?: string;
ungroup?: string;
ungroupAll?: string;
};
});
/**
* Configures the group panel.
*/
get groupPanel(): {
allowColumnDragging?: boolean;
emptyPanelText?: string;
visible?: boolean | string;
};
set groupPanel(value: {
allowColumnDragging?: boolean;
emptyPanelText?: string;
visible?: boolean | string;
});
/**
* Configures the header filter feature.
*/
get headerFilter(): {
allowSearch?: boolean;
height?: number;
searchTimeout?: number;
texts?: {
cancel?: string;
emptyValue?: string;
ok?: string;
};
visible?: boolean;
width?: number;
};
set headerFilter(value: {
allowSearch?: boolean;
height?: number;
searchTimeout?: number;
texts?: {
cancel?: string;
emptyValue?: string;
ok?: string;
};
visible?: boolean;
width?: number;
});
/**
* Specifies the UI component's height.
*/
get height(): number | Function | string | undefined;
set height(value: number | Function | string | undefined);
/**
* Specifies whether to highlight rows and cells with edited data. repaintChangesOnly should be true.
*/
get highlightChanges(): boolean;
set highlightChanges(value: boolean);
/**
* Specifies text for a hint that appears when a user pauses on the UI component.
*/
get hint(): string | undefined;
set hint(value: string | undefined);
/**
* Specifies whether the UI component changes its state when a user pauses on it.
*/
get hoverStateEnabled(): boolean;
set hoverStateEnabled(value: boolean);
/**
* Configures keyboard navigation.
*/
get keyboardNavigation(): {
editOnKeyPress?: boolean;
enabled?: boolean;
enterKeyAction?: string;
enterKeyDirection?: string;
};
set keyboardNavigation(value: {
editOnKeyPress?: boolean;
enabled?: boolean;
enterKeyAction?: string;
enterKeyDirection?: string;
});
/**
* 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(): string | undefined | Array<string>;
set keyExpr(value: string | undefined | Array<string>);
/**
* Configures the load panel.
*/
get loadPanel(): {
enabled?: boolean | string;
height?: number;
indicatorSrc?: string;
shading?: boolean;
shadingColor?: string;
showIndicator?: boolean;
showPane?: boolean;
text?: string;
width?: number;
};
set loadPanel(value: {
enabled?: boolean | string;
height?: number;
indicatorSrc?: string;
shading?: boolean;
shadingColor?: string;
showIndicator?: boolean;
showPane?: boolean;
text?: string;
width?: number;
});
/**
* Allows you to build a master-detail interface in the grid.
*/
get masterDetail(): {
autoExpandAll?: boolean;
enabled?: boolean;
template?: any;
};
set masterDetail(value: {
autoExpandAll?: boolean;
enabled?: boolean;
template?: any;
});
/**
* Specifies a text string shown when the widget does not display any data.
*/
get noDataText(): string;
set noDataText(value: string);
/**
* Configures the pager.
*/
get pager(): {
allowedPageSizes?: string | Array<number | string>;
displayMode?: string;
infoText?: string;
label?: string;
showInfo?: boolean;
showNavigationButtons?: boolean;
showPageSizeSelector?: boolean;
visible?: boolean | string;
};
set pager(value: {
allowedPageSizes?: string | Array<number | string>;
displayMode?: string;
infoText?: string;
label?: string;
showInfo?: boolean;
showNavigationButtons?: boolean;
showPageSizeSelector?: boolean;
visible?: boolean | string;
});
/**
* Configures paging.
*/
get paging(): {
enabled?: boolean;
pageIndex?: number;
pageSize?: number;
};
set paging(value: {
enabled?: boolean;
pageIndex?: number;
pageSize?: number;
});
/**
* Notifies the DataGrid of the server's data processing operations.
*/
get remoteOperations(): boolean | string | {
filtering?: boolean;
grouping?: boolean;
groupPaging?: boolean;
paging?: boolean;
sorting?: boolean;
summary?: boolean;
};
set remoteOperations(value: boolean | string | {
filtering?: boolean;
grouping?: boolean;
groupPaging?: boolean;
paging?: boolean;
sorting?: boolean;
summary?: boolean;
});
/**
* Specifies whether to render the filter row, command columns, and columns with showEditorAlways set to true after other elements.
*/
get renderAsync(): boolean | undefined;
set renderAsync(value: boolean | undefined);
/**
* Specifies whether to repaint only those cells whose data changed.
*/
get repaintChangesOnly(): boolean;
set repaintChangesOnly(value: boolean);
/**
* Specifies whether rows should be shaded differently.
*/
get rowAlternationEnabled(): boolean;
set rowAlternationEnabled(value: boolean);
/**
* Configures row reordering using drag and drop gestures.
*/
get rowDragging(): {
allowDropInsideItem?: boolean;
allowReordering?: boolean;
autoScroll?: boolean;
boundary?: string | UserDefinedElement | undefined;
container?: string | UserDefinedElement | undefined;
cursorOffset?: string | {
x?: number;
y?: number;
};
data?: any | undefined;
dragDirection?: string;
dragTemplate?: any | undefined;
dropFeedbackMode?: string;
filter?: string;
group?: string | undefined;
handle?: string;
onAdd?: Function;
onDragChange?: Function;
onDragEnd?: Function;
onDragMove?: Function;
onDragStart?: Function;
onRemove?: Function;
onReorder?: Function;
scrollSensitivity?: number;
scrollSpeed?: number;
showDragIcons?: boolean;
};
set rowDragging(value: {
allowDropInsideItem?: boolean;
allowReordering?: boolean;
autoScroll?: boolean;
boundary?: string | UserDefinedElement | undefined;
container?: string | UserDefinedElement | undefined;
cursorOffset?: string | {
x?: number;
y?: number;
};
data?: any | undefined;
dragDirection?: string;
dragTemplate?: any | undefined;
dropFeedbackMode?: string;
filter?: string;
group?: string | undefined;
handle?: string;
onAdd?: Function;
onDragChange?: Function;
onDragEnd?: Function;
onDragMove?: Function;
onDragStart?: Function;
onRemove?: Function;
onReorder?: Function;
scrollSensitivity?: number;
scrollSpeed?: number;
showDragIcons?: boolean;
});
/**
* Specifies a custom template for rows.
* @deprecated Use the dataRowTemplate option instead.
*/
get rowTemplate(): any;
set rowTemplate(value: any);
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled(): boolean;
set rtlEnabled(value: boolean);
/**
* Configures scrolling.
*/
get scrolling(): {
columnRenderingMode?: string;
mode?: string;
preloadEnabled?: boolean;
renderAsync?: boolean | undefined;
rowRenderingMode?: string;
scrollByContent?: boolean;
scrollByThumb?: boolean;
showScrollbar?: string;
useNative?: boolean | string;
};
set scrolling(value: {
columnRenderingMode?: string;
mode?: string;
preloadEnabled?: boolean;
renderAsync?: boolean | undefined;
rowRenderingMode?: string;
scrollByContent?: boolean;
scrollByThumb?: boolean;
showScrollbar?: string;
useNative?: boolean | string;
});
/**
* Configures the search panel.
*/
get searchPanel(): {
highlightCaseSensitive?: boolean;
highlightSearchText?: boolean;
placeholder?: string;
searchVisibleColumnsOnly?: boolean;
text?: string;
visible?: boolean;
width?: number;
};
set searchPanel(value: {
highlightCaseSensitive?: boolean;
highlightSearchText?: boolean;
placeholder?: string;
searchVisibleColumnsOnly?: boolean;
text?: string;
visible?: boolean;
width?: number;
});
/**
* Allows you to select rows or determine which rows are selected.
*/
get selectedRowKeys(): Array<any>;
set selectedRowKeys(value: Array<any>);
/**
* Configures runtime selection.
*/
get selection(): {
allowSelectAll?: boolean;
deferred?: boolean;
mode?: string;
selectAllMode?: string;
showCheckBoxesMode?: string;
};
set selection(value: {
allowSelectAll?: boolean;
deferred?: boolean;
mode?: string;
selectAllMode?: string;
showCheckBoxesMode?: string;
});
/**
* Specifies filters for the rows that must be selected initially. Applies only if selection.deferred is true.
*/
get selectionFilter(): any;
set selectionFilter(value: any);
/**
* Specifies whether the outer borders of the UI component are visible.
*/
get showBorders(): boolean;
set showBorders(value: boolean);
/**
* Specifies whether column headers are visible.
*/
get showColumnHeaders(): boolean;
set showColumnHeaders(value: boolean);
/**
* Specifies whether vertical lines that separate one column from another are visible.
*/
get showColumnLines(): boolean;
set showColumnLines(value: boolean);
/**
* Specifies whether horizontal lines that separate one row from another are visible.
*/
get showRowLines(): boolean;
set showRowLines(value: boolean);
/**
* Allows you to sort groups according to the values of group summary items.
*/
get sortByGroupSummaryInfo(): Array<any | {
groupColumn?: string | undefined;
sortOrder?: string | undefined;
summaryItem?: number | string | undefined;
}>;
set sortByGroupSummaryInfo(value: Array<any | {
groupColumn?: string | undefined;
sortOrder?: string | undefined;
summaryItem?: number | string | undefined;
}>);
/**
* Configures runtime sorting.
*/
get sorting(): {
ascendingText?: string;
clearText?: string;
descendingText?: string;
mode?: string;
showSortIndexes?: boolean;
};
set sorting(value: {
ascendingText?: string;
clearText?: string;
descendingText?: string;
mode?: string;
showSortIndexes?: boolean;
});
/**
* Configures state storing.
*/
get stateStoring(): {
customLoad?: Function;
customSave?: Function;
enabled?: boolean;
savingTimeout?: number;
storageKey?: string;
type?: string;
};
set stateStoring(value: {
customLoad?: Function;
customSave?: Function;
enabled?: boolean;
savingTimeout?: number;
storageKey?: string;
type?: string;
});
/**
* Specifies the properties of the grid summary.
*/
get summary(): {
calculateCustomSummary?: Function;
groupItems?: Array<any | {
alignByColumn?: boolean;
column?: string | undefined;
customizeText?: Function;
displayFormat?: string | undefined;
name?: string | undefined;
showInColumn?: string | undefined;
showInGroupFooter?: boolean;
skipEmptyValues?: boolean;
summaryType?: string | undefined;
valueFormat?: Format | string | undefined;
}>;
recalculateWhileEditing?: boolean;
skipEmptyValues?: boolean;
texts?: {
avg?: string;
avgOtherColumn?: string;
count?: string;
max?: string;
maxOtherColumn?: string;
min?: string;
minOtherColumn?: string;
sum?: string;
sumOtherColumn?: string;
};
totalItems?: Array<any | {
alignment?: string | undefined;
column?: string | undefined;
cssClass?: string | undefined;
customizeText?: Function;
displayFormat?: string | undefined;
name?: string | undefined;
showInColumn?: string | undefined;
skipEmptyValues?: boolean;
summaryType?: string | undefined;
valueFormat?: Format | string | undefined;
}>;
};
set summary(value: {
calculateCustomSummary?: Function;
groupItems?: Array<any | {
alignByColumn?: boolean;
column?: string | undefined;
customizeText?: Function;
displayFormat?: string | undefined;
name?: string | undefined;
showInColumn?: string | undefined;
showInGroupFooter?: boolean;
skipEmptyValues?: boolean;
summaryType?: string | undefined;
valueFormat?: Format | string | undefined;
}>;
recalculateWhileEditing?: boolean;
skipEmptyValues?: boolean;
texts?: {
avg?: string;
avgOtherColumn?: string;
count?: string;
max?: string;
maxOtherColumn?: string;
min?: string;
minOtherColumn?: string;
sum?: string;
sumOtherColumn?: string;
};
totalItems?: Array<any | {
alignment?: string | undefined;
column?: string | undefined;
cssClass?: string | undefined;
customizeText?: Function;
displayFormat?: string | undefined;
name?: string | undefined;
showInColumn?: string | undefined;
skipEmptyValues?: boolean;
summaryType?: string | undefined;
valueFormat?: Format | string | undefined;
}>;
});
/**
* Specifies whether to show only relevant values in the header filter and filter row.
*/
get syncLookupFilterValues(): boolean;
set syncLookupFilterValues(value: boolean);
/**
* Specifies the number of the element when the Tab key is used for navigating.
*/
get tabIndex(): number;
set tabIndex(value: number);
/**
* Configures the toolbar.
*/
get toolbar(): DevExpress.ui.dxDataGrid.dxDataGridToolbar | undefined;
set toolbar(value: DevExpress.ui.dxDataGrid.dxDataGridToolbar | undefined);
/**
* Specifies whether to enable two-way data binding.
*/
get twoWayBindingEnabled(): boolean;
set twoWayBindingEnabled(value: boolean);
/**
* Specifies whether the UI component is visible.
*/
get visible(): boolean;
set visible(value: boolean);
/**
* Specifies the UI component's width.
*/
get width(): number | Function | string | undefined;
set width(value: number | Function | string | undefined);
/**
* Specifies whether text that does not fit into a column should be wrapped.
*/
get wordWrapEnabled(): boolean;
set wordWrapEnabled(value: boolean);
/**
* A function that is executed before an adaptive detail row is rendered.
*/
onAdaptiveDetailRowPreparing: EventEmitter<any>;
/**
* A function that is executed when a cell is clicked or tapped. Executed before onRowClick.
*/
onCellClick: EventEmitter<any>;
/**
* A function that is executed when a cell is double-clicked or double-tapped. Executed before onRowDblClick.
*/
onCellDblClick: EventEmitter<any>;
/**
* A function that is executed after the pointer enters or leaves a cell.
*/
onCellHoverChanged: EventEmitter<any>;
/**
* A function that is executed after a grid cell is created.
*/
onCellPrepared: EventEmitter<any>;
/**
* A function that is executed when the UI component is rendered and each time the component is repainted.
*/
onContentReady: EventEmitter<any>;
/**
* A function that is executed before the context menu is rendered.
*/
onContextMenuPreparing: EventEmitter<any>;
/**
* A function that is executed when an error occurs in the data source.
*/
onDataErrorOccurred: EventEmitter<any>;
/**
* A function that is executed before the UI component is disposed of.
*/
onDisposing: EventEmitter<any>;
/**
* A function that is executed after row changes are discarded.
*/
onEditCanceled: EventEmitter<any>;
/**
* A function that is executed when the edit operation is canceled, but row changes are not yet discarded.
*/
onEditCanceling: EventEmitter<any>;
/**
* A function that is executed before a cell or row switches to the editing state.
*/
onEditingStart: EventEmitter<any>;
/**
* A function that is executed after an editor is created. Not executed for cells with an editCellTemplate.
*/
onEditorPrepared: EventEmitter<any>;
/**
* A function used to customize a cell's editor. Not executed for cells with an editCellTemplate.
*/
onEditorPreparing: EventEmitter<any>;
/**
* A function that is executed after data is exported.
* @deprecated Since v20.1, we recommend ExcelJS-based export which does not use this property.
*/
onExported: EventEmitter<any>;
/**
* A function that is executed before data is exported.
*/
onExporting: EventEmitter<any>;
/**
* A function that is executed before a file with exported data is saved to the user's local storage.
* @deprecated Since v20.1, we recommend ExcelJS-based export which does not use this property.
*/
onFileSaving: EventEmitter<any>;
/**
* A function that is executed after the focused cell changes. Applies only to cells in data or group rows.
*/
onFocusedCellChanged: EventEmitter<any>;
/**
* A function that is executed before the focused cell changes. Applies only to cells in data or group rows.
*/
onFocusedCellChanging: EventEmitter<any>;
/**
* A function that is executed after the focused row changes. Applies only to data or group rows. focusedRowEnabled should be true.
*/
onFocusedRowChanged: EventEmitter<any>;
/**
* A function that is executed before the focused row changes. Applies only to data or group rows. focusedRowEnabled should be true.
*/
onFocusedRowChanging: EventEmitter<any>;
/**
* A function used in JavaScript frameworks to save the UI component instance.
*/
onInitialized: EventEmitter<any>;
/**
* A function that is executed before a new row is added to the UI component.
*/
onInitNewRow: EventEmitter<any>;
/**
* A function that is executed when the UI component is in focus and a key has been pressed down.
*/
onKeyDown: EventEmitter<any>;
/**
* A function that is executed after a UI component property is changed.
*/
onOptionChanged: EventEmitter<any>;
/**
* A function that is executed when a row is clicked or tapped.
*/
onRowClick: EventEmitter<any>;
/**
* A function that is executed after a row is collapsed.
*/
onRowCollapsed: EventEmitter<any>;
/**
* A function that is executed before a row is collapsed.
*/
onRowCollapsing: EventEmitter<any>;
/**
* A function that is executed when a row is double-clicked or double-tapped. Executed after onCellDblClick.
*/
onRowDblClick: EventEmitter<any>;
/**
* A function that is executed after a row is expanded.
*/
onRowExpanded: EventEmitter<any>;
/**
* A function that is executed before a row is expanded.
*/
onRowExpanding: EventEmitter<any>;
/**
* A function that is executed after a new row has been inserted into the data source.
*/
onRowInserted: EventEmitter<any>;
/**
* A function that is executed before a new row is inserted into the data source.
*/
onRowInserting: EventEmitter<any>;
/**
* A function that is executed after a row is created.
*/
onRowPrepared: EventEmitter<any>;
/**
* A function that is executed after a row has been removed from the data source.
*/
onRowRemoved: EventEmitter<any>;
/**
* A function that is executed before a row is removed from the data source.
*/
onRowRemoving: EventEmitter<any>;
/**
* A function that is executed after a row has been updated in the data source.
*/
onRowUpdated: EventEmitter<any>;
/**
* A function that is executed before a row is updated in the data source.
*/
onRowUpdating: EventEmitter<any>;
/**
* A function that is executed after cells in a row are validated against validation rules.
*/
onRowValidating: EventEmitter<any>;
/**
* A function that is executed after row changes are saved.
*/
onSaved: EventEmitter<any>;
/**
* A function that is executed before pending row changes are saved.
*/
onSaving: EventEmitter<any>;
/**
* A function that is executed after selecting a row or clearing its selection.
*/
onSelectionChanged: EventEmitter<any>;
/**
* A function that is executed before the toolbar is created.
*/
onToolbarPreparing: EventEmitter<any>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
accessKeyChange: EventEmitter<string | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
activeStateEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
allowColumnReorderingChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
allowColumnResizingChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
autoNavigateToFocusedRowChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
cacheEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
cellHintEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
columnAutoWidthChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
columnChooserChange: EventEmitter<{
allowSearch?: boolean;
emptyPanelText?: string;
enabled?: boolean;
height?: number;
mode?: string;
searchTimeout?: number;
sortOrder?: string | undefined;
title?: string;
width?: number;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
columnFixingChange: EventEmitter<{
enabled?: boolean;
texts?: {
fix?: string;
leftPosition?: string;
rightPosition?: string;
unfix?: string;
};
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
columnHidingEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
columnMinWidthChange: EventEmitter<number | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
columnResizingModeChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
columnsChange: EventEmitter<Array<DevExpress.ui.dxDataGridColumn | string>>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
columnWidthChange: EventEmitter<number | string | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customizeColumnsChange: EventEmitter<Function>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customizeExportDataChange: EventEmitter<Function>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
dataRowTemplateChange: EventEmitter<any>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
dataSourceChange: EventEmitter<DataSource | DataSourceOptions | Store | null | string | Array<any>>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
dateSerializationFormatChange: EventEmitter<string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
disabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
editingChange: EventEmitter<{
allowAdding?: boolean;
allowDeleting?: boolean | Function;
allowUpdating?: boolean | Function;
changes?: Array<DevExpress.common.grids.DataChange>;
confirmDelete?: boolean;
editColumnName?: string;
editRowKey?: any;
form?: dxFormOptions;
mode?: string;
newRowPosition?: string;
popup?: dxPopupOptions;
refreshMode?: string;
selectTextOnEditStart?: boolean;
startEditAction?: string;
texts?: {
addRow?: string;
cancelAllChanges?: string;
cancelRowChanges?: string;
confirmDeleteMessage?: string;
confirmDeleteTitle?: string;
deleteRow?: string;
editRow?: string;
saveAllChanges?: string;
saveRowChanges?: string;
undeleteRow?: string;
validationCancelChanges?: string;
};
useIcons?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
elementAttrChange: EventEmitter<any>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
errorRowEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
exportChange: EventEmitter<{
allowExportSelectedData?: boolean;
customizeExcelCell?: Function;
enabled?: boolean;
excelFilterEnabled?: boolean;
excelWrapTextEnabled?: boolean | undefined;
fileName?: string;
formats?: Array<string>;
ignoreExcelErrors?: boolean;
proxyUrl?: string | undefined;
texts?: {
exportAll?: string;
exportSelectedRows?: string;
exportTo?: string;
};
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
filterBuilderChange: EventEmitter<dxFilterBuilderOptions>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
filterBuilderPopupChange: EventEmitter<dxPopupOptions>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
filterPanelChange: EventEmitter<{
customizeText?: Function;
filterEnabled?: boolean;
texts?: {
clearFilter?: string;
createFilter?: string;
filterEnabledHint?: string;
};
visible?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
filterRowChange: EventEmitter<{
applyFilter?: string;
applyFilterText?: string;
betweenEndText?: string;
betweenStartText?: string;
operationDescriptions?: {
between?: string;
contains?: string;
endsWith?: string;
equal?: string;
greaterThan?: string;
greaterThanOrEqual?: string;
lessThan?: string;
lessThanOrEqual?: string;
notContains?: string;
notEqual?: string;
startsWith?: string;
};
resetOperationText?: string;
showAllText?: string;
showOperationChooser?: boolean;
visible?: boolean;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
filterSyncEnabledChange: EventEmitter<boolean | string>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
filterValueChange: EventEmitter<any>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
focusedColumnIndexChange: EventEmitter<number>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
focusedRowEnabledChange: EventEmitter<boolean>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
focusedRowIndexChange: EventEmitter<number>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
focusedRowKeyChange: EventEmitter<any | undefined>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
groupingChange: EventEmitter<{
allowCollapsing?: boolean;
autoExpandAll?: boolean;
contextMenuEnabled?: boolean;
expandMode?: string;
texts?: {
groupByThisColumn?: string;
groupContinuedMessage?: string;
groupContinuesMessage?: string;
ungroup?: string;
ungroupAll?: string;
};
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
groupPanelChange: EventEmitter<{
allowColumnDragging?: boolean;
emptyPanelText?: string;
visible?: boolean | string;
}>;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
headerFilterChange: EventEmitter<{
allowSearch?: boolean;
height?: number;
searchTimeout?: number;
texts?: {
cancel?: string;
emptyValue?: string;
ok?: string;
};
visible?: boolean;
width?: number;
}>;
/**
* This me