igniteui-react-grids
Version:
Ignite UI React grid components.
1,325 lines • 130 kB
JavaScript
import * as React from 'react';
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { IgrColumnCollection } from "./igr-column-collection";
import { IgrActionStripCollection } from "./igr-action-strip-collection";
import { IgrGridToolbarCollection } from "./igr-grid-toolbar-collection";
import { IgrPaginatorCollection } from "./igr-paginator-collection";
import { FilteringLogic_$type } from "./FilteringLogic";
import { IgrFilteringExpressionsTree } from "./igr-filtering-expressions-tree";
import { GridPagingMode_$type } from "./GridPagingMode";
import { GridValidationTrigger_$type } from "./GridValidationTrigger";
import { FilterMode_$type } from "./FilterMode";
import { GridSummaryPosition_$type } from "./GridSummaryPosition";
import { GridSummaryCalculationMode_$type } from "./GridSummaryCalculationMode";
import { GridSelectionMode_$type } from "./GridSelectionMode";
import { IgrForOfState } from "./igr-for-of-state";
import { IgrOverlayOutletDirective } from "./igr-overlay-outlet-directive";
import { IgrStateCollection } from "./igr-state-collection";
import { IgrFilteringExpressionsTreeEventArgs } from "./igr-filtering-expressions-tree-event-args";
import { IgrGridScrollEventArgs } from "./igr-grid-scroll-event-args";
import { IgrGridCellEventArgs } from "./igr-grid-cell-event-args";
import { IgrGridRowEventArgs } from "./igr-grid-row-event-args";
import { IgrGridFormGroupCreatedEventArgs } from "./igr-grid-form-group-created-event-args";
import { IgrGridValidationStatusEventArgs } from "./igr-grid-validation-status-event-args";
import { IgrRowSelectionEventArgs } from "./igr-row-selection-event-args";
import { IgrColumnSelectionEventArgs } from "./igr-column-selection-event-args";
import { IgrPinColumnCancellableEventArgs } from "./igr-pin-column-cancellable-event-args";
import { IgrPinColumnEventArgs } from "./igr-pin-column-event-args";
import { IgrGridEditEventArgs } from "./igr-grid-edit-event-args";
import { IgrGridEditDoneEventArgs } from "./igr-grid-edit-done-event-args";
import { IgrColumnComponentEventArgs } from "./igr-column-component-event-args";
import { IgrColumnsAutoGeneratedEventArgs } from "./igr-columns-auto-generated-event-args";
import { IgrSortingEventArgs } from "./igr-sorting-event-args";
import { IgrSortingExpressionEventArgs } from "./igr-sorting-expression-event-args";
import { IgrFilteringEventArgs } from "./igr-filtering-event-args";
import { IgrRowDataEventArgs } from "./igr-row-data-event-args";
import { IgrRowDataCancelableEventArgs } from "./igr-row-data-cancelable-event-args";
import { IgrColumnResizeEventArgs } from "./igr-column-resize-event-args";
import { IgrGridContextMenuEventArgs } from "./igr-grid-context-menu-event-args";
import { IgrColumnVisibilityChangingEventArgs } from "./igr-column-visibility-changing-event-args";
import { IgrColumnVisibilityChangedEventArgs } from "./igr-column-visibility-changed-event-args";
import { IgrColumnMovingStartEventArgs } from "./igr-column-moving-start-event-args";
import { IgrColumnMovingEventArgs } from "./igr-column-moving-event-args";
import { IgrColumnMovingEndEventArgs } from "./igr-column-moving-end-event-args";
import { IgrGridKeydownEventArgs } from "./igr-grid-keydown-event-args";
import { IgrRowDragStartEventArgs } from "./igr-row-drag-start-event-args";
import { IgrRowDragEndEventArgs } from "./igr-row-drag-end-event-args";
import { IgrGridClipboardEventEventArgs } from "./igr-grid-clipboard-event-event-args";
import { IgrComponentArrayDataValueChangedEventArgs } from "./igr-component-array-data-value-changed-event-args";
import { IgrRowToggleEventArgs } from "./igr-row-toggle-event-args";
import { IgrPinRowEventArgs } from "./igr-pin-row-event-args";
import { IgrActiveNodeChangeEventArgs } from "./igr-active-node-change-event-args";
import { IgrGridToolbarExportEventArgs } from "./igr-grid-toolbar-export-event-args";
import { IgrGridSelectionRangeEventArgs } from "./igr-grid-selection-range-event-args";
import { IgrVoidEventArgs } from "igniteui-react";
import { IgrForOfDataChangingEventArgs } from "./igr-for-of-data-changing-event-args";
import { IgrColumn } from "./igr-column";
import { TypeRegistrar } from "igniteui-react-core";
import { ReactRenderer, PortalManager } from "igniteui-react-core";
import { ContentChildrenManager } from "igniteui-react-core";
import { CollectionAdapter, NamePatcher, getModifiedProps, isValidProp, ensureBool, interfaceToInternal, ensureEnum, toSpinal, initializePropertiesFromCss } from "igniteui-react-core";
import { ReactTemplateAdapter } from "igniteui-react-core";
import { html } from "lit-html";
import { DataCloneStrategy } from "./DataCloneStrategy";
import { ClipboardOptions } from "./ClipboardOptions";
import { ColumnCollection as ColumnCollection_internal } from "./ColumnCollection";
import { Column } from "./Column";
import { SyncableObservableCollection$1 } from "igniteui-react-core";
import { NotifyCollectionChangedAction } from "igniteui-react-core";
import { ActionStrip } from "./ActionStrip";
import { IgrGridRowDragGhostContext } from "./igr-grid-row-drag-ghost-context";
import { IgrGridRowEditTextTemplateContext } from "./igr-grid-row-edit-text-template-context";
import { IgrGridEmptyTemplateContext } from "./igr-grid-empty-template-context";
import { IgrGridRowEditActionsTemplateContext } from "./igr-grid-row-edit-actions-template-context";
import { IgrGridRowTemplateContext } from "./igr-grid-row-template-context";
import { IgrGridTemplateContext } from "./igr-grid-template-context";
import { IgrGridHeaderTemplateContext } from "./igr-grid-header-template-context";
import { GridToolbar } from "./GridToolbar";
import { Paginator } from "./Paginator";
import { GridResourceStrings } from "./GridResourceStrings";
import { PinningConfig } from "./PinningConfig";
import { FilteringStrategy } from "./FilteringStrategy";
import { GridSortingStrategy } from "./GridSortingStrategy";
import { SortingOptions } from "./SortingOptions";
import { IgrHeadSelectorTemplateContext } from "./igr-head-selector-template-context";
import { IgrRowSelectorTemplateContext } from "./igr-row-selector-template-context";
import { GridState } from "./GridState";
import { SortingExpression } from "./SortingExpression";
import { GridSelectionRange } from "./GridSelectionRange";
import { OverlaySettings } from "./OverlaySettings";
export class IgrGridBaseDirective extends React.Component {
createImplementation() {
return null;
}
get nativeElement() {
return this._implementation.nativeElement;
}
/**
* @hidden
*/
get i() {
return this._implementation;
} /**
* @hidden
*/
static _createFromInternal(internal) {
if (!internal) {
return null;
}
if (!internal.$type) {
return null;
}
let name = internal.$type.name;
let externalName = "Igr" + name;
if (!TypeRegistrar.isRegistered(externalName)) {
return null;
}
return TypeRegistrar.create(externalName);
}
onImplementationCreated() {
}
_initializeAdapters() {
if (!this._contentChildrenManager) {
const resolveNested = ((props, propName, nestedPropName) => {
var _a;
const prop = props[propName];
if (Array.isArray(prop)) {
return prop.map(x => {
var _a;
return (_a = x[nestedPropName]) !== null && _a !== void 0 ? _a : resolveNested(x.props, propName, nestedPropName);
}).join("_");
}
else if (prop) {
return (_a = prop.props[nestedPropName]) !== null && _a !== void 0 ? _a : resolveNested(prop.props, propName, nestedPropName);
}
else {
return props[nestedPropName];
}
});
this._contentChildrenManager = new ContentChildrenManager((ch) => {
const key = ch.key || ch.props.name;
if (!key) {
const type = (ch.type);
const instance = new type;
const name = instance.i.$type.name;
switch (name) {
case "Column": return ch.props.field;
case "ColumnGroup": return resolveNested(ch.props, "children", "field");
case "ColumnLayout": return resolveNested(ch.props, "children", "field");
case "ActionStrip": return "IgrActionStrip";
case "GridToolbar": return "IgrGridToolbar";
case "Paginator": return "IgrPaginator";
case "GridState": return "IgrGridState";
default: return undefined;
}
}
return key;
}, (ch) => {
const key = ch.key || ch.props.name;
if (!key) {
const type = (ch.type);
const instance = new type;
const name = instance.i.$type.name;
switch (name) {
case "Column": return ch.props.field;
case "ColumnGroup": return resolveNested(ch.props, "children", "field");
case "ColumnLayout": return resolveNested(ch.props, "children", "field");
case "ActionStrip": return "IgrActionStrip";
case "GridToolbar": return "IgrGridToolbar";
case "Paginator": return "IgrPaginator";
case "GridState": return "IgrGridState";
default: return undefined;
}
}
return key;
}, () => {
if (this._updateContentChildren) {
this._updateContentChildren();
}
else if (this._updateAdapters) {
this._updateAdapters();
}
});
}
this._columnListAdapter = new CollectionAdapter(this.contentColumnList, this.i.u, this.combinedColumnList, (c) => c.i, (i) => {
if (this._initializeElement) {
this._initializeElement(i);
}
}, (i) => {
if (this._destroyElement) {
this._destroyElement(i);
}
});
this._actionStripComponentsAdapter = new CollectionAdapter(this.contentActionStripComponents, this.i.l, this.actualActionStripComponents, (c) => c.i, (i) => {
if (this._initializeElement) {
this._initializeElement(i);
}
}, (i) => {
if (this._destroyElement) {
this._destroyElement(i);
}
});
this._toolbarAdapter = new CollectionAdapter(this.contentToolbar, this.i.bh, this.actualToolbar, (c) => c.i, (i) => {
if (this._initializeElement) {
this._initializeElement(i);
}
}, (i) => {
if (this._destroyElement) {
this._destroyElement(i);
}
});
this._paginationComponentsAdapter = new CollectionAdapter(this.contentPaginationComponents, this.i.bm, this.actualPaginationComponents, (c) => c.i, (i) => {
if (this._initializeElement) {
this._initializeElement(i);
}
}, (i) => {
if (this._destroyElement) {
this._destroyElement(i);
}
});
this._stateComponentsAdapter = new CollectionAdapter(this.contentStateComponents, this.i.b5, this.actualStateComponents, (c) => c.i, (i) => {
if (this._initializeElement) {
this._initializeElement(i);
}
}, (i) => {
if (this._destroyElement) {
this._destroyElement(i);
}
});
if (super["_initializeAdapters"]) {
super["_initializeAdapters"]();
}
}
_updateAdapters() {
if (super["_updateAdapters"]) {
super["_updateAdapters"]();
}
let contentChildrenActual = this._contentChildrenManager.contentChildrenActual;
this.contentColumnList.length = 0;
for (var i = 0; i < contentChildrenActual.length; i++) {
if ((Column.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
this.contentColumnList.push(contentChildrenActual[i]);
}
}
if (this._columnListAdapter != null) {
this._columnListAdapter.notifyContentChanged();
}
this.contentActionStripComponents.length = 0;
for (var i = 0; i < contentChildrenActual.length; i++) {
if ((ActionStrip.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
this.contentActionStripComponents.push(contentChildrenActual[i]);
}
}
if (this._actionStripComponentsAdapter != null) {
this._actionStripComponentsAdapter.notifyContentChanged();
}
this.contentToolbar.length = 0;
for (var i = 0; i < contentChildrenActual.length; i++) {
if ((GridToolbar.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
this.contentToolbar.push(contentChildrenActual[i]);
}
}
if (this._toolbarAdapter != null) {
this._toolbarAdapter.notifyContentChanged();
}
this.contentPaginationComponents.length = 0;
for (var i = 0; i < contentChildrenActual.length; i++) {
if ((Paginator.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
this.contentPaginationComponents.push(contentChildrenActual[i]);
}
}
if (this._paginationComponentsAdapter != null) {
this._paginationComponentsAdapter.notifyContentChanged();
}
this.contentStateComponents.length = 0;
for (var i = 0; i < contentChildrenActual.length; i++) {
if ((GridState.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
this.contentStateComponents.push(contentChildrenActual[i]);
}
}
if (this._stateComponentsAdapter != null) {
this._stateComponentsAdapter.notifyContentChanged();
}
}
constructor(props) {
super(props);
this.mounted = false;
this._columnList = null;
this._actionStripComponents = null;
this._toolbar = null;
this._paginationComponents = null;
this._actualColumnList = null;
this._stateComponents = null;
this.__p = null;
this._hasUserValues = new Set();
this._stylingContainer = null;
this._stylingParent = null;
this._inStyling = false;
this._filteringExpressionsTreeChange = null;
this._filteringExpressionsTreeChange_wrapped = null;
this._advancedFilteringExpressionsTreeChange = null;
this._advancedFilteringExpressionsTreeChange_wrapped = null;
this._gridScroll = null;
this._gridScroll_wrapped = null;
this._cellClick = null;
this._cellClick_wrapped = null;
this._rowClick = null;
this._rowClick_wrapped = null;
this._formGroupCreated = null;
this._formGroupCreated_wrapped = null;
this._validationStatusChange = null;
this._validationStatusChange_wrapped = null;
this._selected = null;
this._selected_wrapped = null;
this._rowSelectionChanging = null;
this._rowSelectionChanging_wrapped = null;
this._columnSelectionChanging = null;
this._columnSelectionChanging_wrapped = null;
this._columnPin = null;
this._columnPin_wrapped = null;
this._columnPinned = null;
this._columnPinned_wrapped = null;
this._cellEditEnter = null;
this._cellEditEnter_wrapped = null;
this._cellEditExit = null;
this._cellEditExit_wrapped = null;
this._cellEdit = null;
this._cellEdit_wrapped = null;
this._cellEditDone = null;
this._cellEditDone_wrapped = null;
this._rowEditEnter = null;
this._rowEditEnter_wrapped = null;
this._rowEdit = null;
this._rowEdit_wrapped = null;
this._rowEditDone = null;
this._rowEditDone_wrapped = null;
this._rowEditExit = null;
this._rowEditExit_wrapped = null;
this._columnInit = null;
this._columnInit_wrapped = null;
this._columnsAutogenerated = null;
this._columnsAutogenerated_wrapped = null;
this._sorting = null;
this._sorting_wrapped = null;
this._sortingDone = null;
this._sortingDone_wrapped = null;
this._filtering = null;
this._filtering_wrapped = null;
this._filteringDone = null;
this._filteringDone_wrapped = null;
this._rowAdded = null;
this._rowAdded_wrapped = null;
this._rowDeleted = null;
this._rowDeleted_wrapped = null;
this._rowDelete = null;
this._rowDelete_wrapped = null;
this._rowAdd = null;
this._rowAdd_wrapped = null;
this._columnResized = null;
this._columnResized_wrapped = null;
this._contextMenu = null;
this._contextMenu_wrapped = null;
this._doubleClick = null;
this._doubleClick_wrapped = null;
this._columnVisibilityChanging = null;
this._columnVisibilityChanging_wrapped = null;
this._columnVisibilityChanged = null;
this._columnVisibilityChanged_wrapped = null;
this._columnMovingStart = null;
this._columnMovingStart_wrapped = null;
this._columnMoving = null;
this._columnMoving_wrapped = null;
this._columnMovingEnd = null;
this._columnMovingEnd_wrapped = null;
this._gridKeydown = null;
this._gridKeydown_wrapped = null;
this._rowDragStart = null;
this._rowDragStart_wrapped = null;
this._rowDragEnd = null;
this._rowDragEnd_wrapped = null;
this._gridCopy = null;
this._gridCopy_wrapped = null;
this._selectedRowsChange = null;
this._selectedRowsChange_wrapped = null;
this._rowToggle = null;
this._rowToggle_wrapped = null;
this._rowPinning = null;
this._rowPinning_wrapped = null;
this._rowPinned = null;
this._rowPinned_wrapped = null;
this._activeNodeChange = null;
this._activeNodeChange_wrapped = null;
this._sortingExpressionsChange = null;
this._sortingExpressionsChange_wrapped = null;
this._toolbarExporting = null;
this._toolbarExporting_wrapped = null;
this._rangeSelected = null;
this._rangeSelected_wrapped = null;
this._rendered = null;
this._rendered_wrapped = null;
this._dataChanging = null;
this._dataChanging_wrapped = null;
this._dataChanged = null;
this._dataChanged_wrapped = null;
if (this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
}
this._implementation = this.createImplementation();
this._portalManager = new PortalManager("templates", () => {
if (this.mounted) {
this.setState({});
}
});
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
this._renderer = new ReactRenderer(this._implementation.nativeElement, document, false, null, this._portalManager);
}
this._implementation.externalObject = this;
this.onImplementationCreated();
if (this._initializeAdapters) {
this._initializeAdapters();
}
}
componentDidMount() {
this.mounted = true;
for (const p of Object.keys(this.props)) {
if (isValidProp(this, p)) {
this[p] = this.props[p];
}
}
}
shouldComponentUpdate(nextProps, nextState) {
const mod = getModifiedProps(this.props, nextProps);
for (const p of Object.keys(mod)) {
if (isValidProp(this, p)) {
this[p] = mod[p];
}
}
return true;
}
render() {
let children = this._contentChildrenManager.getChildren(this.props.children);
let div = React.createElement("div", {
children: children
});
return div;
}
/**
* Gets/Sets the display time for the row adding snackbar notification.
* @remarks
* By default it is 6000ms.
*/
get snackbarDisplayTime() {
return this.i.cx;
}
set snackbarDisplayTime(v) {
this.i.cx = +v;
}
get autoGenerate() {
return this.i.cc;
}
set autoGenerate(v) {
this.i.cc = ensureBool(v);
}
get autoGenerateExclude() {
return this.i.a;
}
set autoGenerateExclude(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.a = v;
}
/**
* Controls whether columns moving is enabled in the grid.
*/
get moving() {
return this.i.ch;
}
set moving(v) {
this.i.ch = ensureBool(v);
}
get emptyGridTemplate() {
return this._emptyGridTemplate;
}
set emptyGridTemplate(v) {
this._emptyGridTemplate = v;
if (!this._emptyGridTemplateAdapter) {
this._emptyGridTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "dt", { html: html });
}
this._emptyGridTemplateAdapter.setValue(this.i, this._emptyGridTemplate);
}
get addRowEmptyTemplate() {
return this._addRowEmptyTemplate;
}
set addRowEmptyTemplate(v) {
this._addRowEmptyTemplate = v;
if (!this._addRowEmptyTemplateAdapter) {
this._addRowEmptyTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "dq", { html: html });
}
this._addRowEmptyTemplateAdapter.setValue(this.i, this._addRowEmptyTemplate);
}
get loadingGridTemplate() {
return this._loadingGridTemplate;
}
set loadingGridTemplate(v) {
this._loadingGridTemplate = v;
if (!this._loadingGridTemplateAdapter) {
this._loadingGridTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "dy", { html: html });
}
this._loadingGridTemplateAdapter.setValue(this.i, this._loadingGridTemplate);
}
/**
* Get/Set IgxSummaryRow height
*/
get summaryRowHeight() {
return this.i.cy;
}
set summaryRowHeight(v) {
this.i.cy = +v;
}
get dataCloneStrategy() {
return this.i.af.nativeElement;
}
set dataCloneStrategy(v) {
this.i.af = interfaceToInternal(v, () => new DataCloneStrategy());
}
/**
* Controls the copy behavior of the grid.
*/
get clipboardOptions() {
return this.i.p.nativeElement;
}
set clipboardOptions(v) {
this.i.p = interfaceToInternal(v, () => new ClipboardOptions());
}
get rowClasses() {
return this.i.c5;
}
set rowClasses(v) {
this.i.c5 = v;
}
get rowStyles() {
return this.i.c6;
}
set rowStyles(v) {
this.i.c6 = v;
}
get primaryKey() {
return this.i.ee;
}
set primaryKey(v) {
this.i.ee = v;
}
get combinedColumnList() {
if (!this._combinedColumnList) {
this._combinedColumnList = [];
}
return this._combinedColumnList;
}
get contentColumnList() {
if (!this._contentColumnList) {
this._contentColumnList = [];
}
return this._contentColumnList;
}
/**
* @hidden @internal
*/
get columnList() {
if (this._columnList === null) {
let coll = new IgrColumnCollection();
let inner = coll._innerColl;
this._columnList = coll;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._columnListAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._columnListAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._columnListAdapter.removeManualItemAt(e.oldStartingIndex);
this._columnListAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._columnListAdapter.clearManualItems();
break;
}
});
;
}
return this._columnList;
}
get actualActionStripComponents() {
if (!this._actualActionStripComponents) {
this._actualActionStripComponents = [];
}
return this._actualActionStripComponents;
}
get contentActionStripComponents() {
if (!this._contentActionStripComponents) {
this._contentActionStripComponents = [];
}
return this._contentActionStripComponents;
}
/**
* @hidden @internal
*/
get actionStripComponents() {
if (this._actionStripComponents === null) {
let coll = new IgrActionStripCollection();
let inner = coll._innerColl;
this._actionStripComponents = coll;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._actionStripComponentsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._actionStripComponentsAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._actionStripComponentsAdapter.removeManualItemAt(e.oldStartingIndex);
this._actionStripComponentsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._actionStripComponentsAdapter.clearManualItems();
break;
}
});
;
}
return this._actionStripComponents;
}
/**
* Gets the custom template, if any, used for row drag ghost.
*/
get dragGhostCustomTemplate() {
return this._dragGhostCustomTemplate;
}
set dragGhostCustomTemplate(v) {
this._dragGhostCustomTemplate = v;
if (!this._dragGhostCustomTemplateAdapter) {
this._dragGhostCustomTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "dr", { html: html }, () => new IgrGridRowDragGhostContext());
}
this._dragGhostCustomTemplateAdapter.setValue(this.i, this._dragGhostCustomTemplate);
}
/**
* Gets the row edit text template.
*/
get rowEditTextTemplate() {
return this._rowEditTextTemplate;
}
set rowEditTextTemplate(v) {
this._rowEditTextTemplate = v;
if (!this._rowEditTextTemplateAdapter) {
this._rowEditTextTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "d2", { html: html }, () => new IgrGridRowEditTextTemplateContext());
}
this._rowEditTextTemplateAdapter.setValue(this.i, this._rowEditTextTemplate);
}
/**
* Gets the row add text template.
*/
get rowAddTextTemplate() {
return this._rowAddTextTemplate;
}
set rowAddTextTemplate(v) {
this._rowAddTextTemplate = v;
if (!this._rowAddTextTemplateAdapter) {
this._rowAddTextTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "dz", { html: html }, () => new IgrGridEmptyTemplateContext());
}
this._rowAddTextTemplateAdapter.setValue(this.i, this._rowAddTextTemplate);
}
/**
* Gets the row edit actions template.
*/
get rowEditActionsTemplate() {
return this._rowEditActionsTemplate;
}
set rowEditActionsTemplate(v) {
this._rowEditActionsTemplate = v;
if (!this._rowEditActionsTemplateAdapter) {
this._rowEditActionsTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "d1", { html: html }, () => new IgrGridRowEditActionsTemplateContext());
}
this._rowEditActionsTemplateAdapter.setValue(this.i, this._rowEditActionsTemplate);
}
/**
* Gets the row expand indicator template.
*/
get rowExpandedIndicatorTemplate() {
return this._rowExpandedIndicatorTemplate;
}
set rowExpandedIndicatorTemplate(v) {
this._rowExpandedIndicatorTemplate = v;
if (!this._rowExpandedIndicatorTemplateAdapter) {
this._rowExpandedIndicatorTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "d3", { html: html }, () => new IgrGridRowTemplateContext());
}
this._rowExpandedIndicatorTemplateAdapter.setValue(this.i, this._rowExpandedIndicatorTemplate);
}
/**
* Gets the row collapse indicator template.
*/
get rowCollapsedIndicatorTemplate() {
return this._rowCollapsedIndicatorTemplate;
}
set rowCollapsedIndicatorTemplate(v) {
this._rowCollapsedIndicatorTemplate = v;
if (!this._rowCollapsedIndicatorTemplateAdapter) {
this._rowCollapsedIndicatorTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "d0", { html: html }, () => new IgrGridRowTemplateContext());
}
this._rowCollapsedIndicatorTemplateAdapter.setValue(this.i, this._rowCollapsedIndicatorTemplate);
}
/**
* Gets the header expand indicator template.
*/
get headerExpandedIndicatorTemplate() {
return this._headerExpandedIndicatorTemplate;
}
set headerExpandedIndicatorTemplate(v) {
this._headerExpandedIndicatorTemplate = v;
if (!this._headerExpandedIndicatorTemplateAdapter) {
this._headerExpandedIndicatorTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "dw", { html: html }, () => new IgrGridTemplateContext());
}
this._headerExpandedIndicatorTemplateAdapter.setValue(this.i, this._headerExpandedIndicatorTemplate);
}
/**
* Gets the row collapse indicator template.
*/
get headerCollapsedIndicatorTemplate() {
return this._headerCollapsedIndicatorTemplate;
}
set headerCollapsedIndicatorTemplate(v) {
this._headerCollapsedIndicatorTemplate = v;
if (!this._headerCollapsedIndicatorTemplateAdapter) {
this._headerCollapsedIndicatorTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "dv", { html: html }, () => new IgrGridTemplateContext());
}
this._headerCollapsedIndicatorTemplateAdapter.setValue(this.i, this._headerCollapsedIndicatorTemplate);
}
/**
* Gets the excel style header icon.
*/
get excelStyleHeaderIconTemplate() {
return this._excelStyleHeaderIconTemplate;
}
set excelStyleHeaderIconTemplate(v) {
this._excelStyleHeaderIconTemplate = v;
if (!this._excelStyleHeaderIconTemplateAdapter) {
this._excelStyleHeaderIconTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "du", { html: html }, () => new IgrGridHeaderTemplateContext());
}
this._excelStyleHeaderIconTemplateAdapter.setValue(this.i, this._excelStyleHeaderIconTemplate);
}
/**
* The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.
*/
get sortAscendingHeaderIconTemplate() {
return this._sortAscendingHeaderIconTemplate;
}
set sortAscendingHeaderIconTemplate(v) {
this._sortAscendingHeaderIconTemplate = v;
if (!this._sortAscendingHeaderIconTemplateAdapter) {
this._sortAscendingHeaderIconTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "d5", { html: html }, () => new IgrGridHeaderTemplateContext());
}
this._sortAscendingHeaderIconTemplateAdapter.setValue(this.i, this._sortAscendingHeaderIconTemplate);
}
/**
* The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.
*/
get sortDescendingHeaderIconTemplate() {
return this._sortDescendingHeaderIconTemplate;
}
set sortDescendingHeaderIconTemplate(v) {
this._sortDescendingHeaderIconTemplate = v;
if (!this._sortDescendingHeaderIconTemplateAdapter) {
this._sortDescendingHeaderIconTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "d6", { html: html }, () => new IgrGridHeaderTemplateContext());
}
this._sortDescendingHeaderIconTemplateAdapter.setValue(this.i, this._sortDescendingHeaderIconTemplate);
}
/**
* Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.
*/
get sortHeaderIconTemplate() {
return this._sortHeaderIconTemplate;
}
set sortHeaderIconTemplate(v) {
this._sortHeaderIconTemplate = v;
if (!this._sortHeaderIconTemplateAdapter) {
this._sortHeaderIconTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "d7", { html: html }, () => new IgrGridHeaderTemplateContext());
}
this._sortHeaderIconTemplateAdapter.setValue(this.i, this._sortHeaderIconTemplate);
}
get actualToolbar() {
if (!this._actualToolbar) {
this._actualToolbar = [];
}
return this._actualToolbar;
}
get contentToolbar() {
if (!this._contentToolbar) {
this._contentToolbar = [];
}
return this._contentToolbar;
}
/**
* @hidden @internal
*/
get toolbar() {
if (this._toolbar === null) {
let coll = new IgrGridToolbarCollection();
let inner = coll._innerColl;
this._toolbar = coll;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._toolbarAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._toolbarAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._toolbarAdapter.removeManualItemAt(e.oldStartingIndex);
this._toolbarAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._toolbarAdapter.clearManualItems();
break;
}
});
;
}
return this._toolbar;
}
get actualPaginationComponents() {
if (!this._actualPaginationComponents) {
this._actualPaginationComponents = [];
}
return this._actualPaginationComponents;
}
get contentPaginationComponents() {
if (!this._contentPaginationComponents) {
this._contentPaginationComponents = [];
}
return this._contentPaginationComponents;
}
/**
* @hidden @internal
*/
get paginationComponents() {
if (this._paginationComponents === null) {
let coll = new IgrPaginatorCollection();
let inner = coll._innerColl;
this._paginationComponents = coll;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._paginationComponentsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._paginationComponentsAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._paginationComponentsAdapter.removeManualItemAt(e.oldStartingIndex);
this._paginationComponentsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._paginationComponentsAdapter.clearManualItems();
break;
}
});
;
}
return this._paginationComponents;
}
/**
* Gets/Sets the resource strings.
* @remarks
* By default it uses EN resources.
*/
get resourceStrings() {
return this.i.a7.nativeElement;
}
set resourceStrings(v) {
this.i.a7 = interfaceToInternal(v, () => new GridResourceStrings());
}
get filteringLogic() {
return this.i.am;
}
set filteringLogic(v) {
this.i.am = ensureEnum(FilteringLogic_$type, v);
}
get filteringExpressionsTree() {
const r = this.i.ai;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = new IgrFilteringExpressionsTree();
if (r.$type) {
e._implementation = r;
}
else {
if (e.i.setNativeElement) {
e.i.setNativeElement(r);
}
}
r.externalObject = e;
}
return r.externalObject;
}
set filteringExpressionsTree(v) {
v == null ? this.i.ai = null : this.i.ai = v.i;
}
/**
* Gets/Sets the advanced filtering state.
* @example
* ```typescript
* let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
* this.grid.advancedFilteringExpressionsTree = logic;
* ```
*/
get advancedFilteringExpressionsTree() {
const r = this.i.ah;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = new IgrFilteringExpressionsTree();
if (r.$type) {
e._implementation = r;
}
else {
if (e.i.setNativeElement) {
e.i.setNativeElement(r);
}
}
r.externalObject = e;
}
return r.externalObject;
}
set advancedFilteringExpressionsTree(v) {
v == null ? this.i.ah = null : this.i.ah = v.i;
}
/**
* Gets/Sets the locale.
* @remarks
* If not set, returns browser's language.
*/
get locale() {
return this.i.ed;
}
set locale(v) {
this.i.ed = v;
}
get pagingMode() {
return this.i.a6;
}
set pagingMode(v) {
this.i.a6 = ensureEnum(GridPagingMode_$type, v);
}
/**
* Gets/Sets if the row selectors are hidden.
* @remarks
* By default row selectors are shown
*/
get hideRowSelectors() {
return this.i.cf;
}
set hideRowSelectors(v) {
this.i.cf = ensureBool(v);
}
get rowDraggable() {
return this.i.cj;
}
set rowDraggable(v) {
this.i.cj = ensureBool(v);
}
get validationTrigger() {
return this.i.bk;
}
set validationTrigger(v) {
this.i.bk = ensureEnum(GridValidationTrigger_$type, v);
}
get rowEditable() {
return this.i.ck;
}
set rowEditable(v) {
this.i.ck = ensureBool(v);
}
get height() {
return this.i.ec;
}
set height(v) {
this.i.ec = v;
}
/**
* Gets/Sets the width of the grid.
* @example
* ```typescript
* let gridWidth = this.grid.width;
* ```
*/
get width() {
return this.i.ef;
}
set width(v) {
this.i.ef = v;
}
get rowHeight() {
return this.i.cw;
}
set rowHeight(v) {
this.i.cw = +v;
}
get columnWidth() {
return this.i.d8;
}
set columnWidth(v) {
this.i.d8 = v;
}
get emptyGridMessage() {
return this.i.ea;
}
set emptyGridMessage(v) {
this.i.ea = v;
}
get isLoading() {
return this.i.cg;
}
set isLoading(v) {
this.i.cg = ensureBool(v);
}
/**
* Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid
* @deprecated Column re-creation now relies on `autoGenerate` instead.
*/
get shouldGenerate() {
return this.i.cm;
}
set shouldGenerate(v) {
this.i.cm = ensureBool(v);
}
get emptyFilteredGridMessage() {
return this.i.d9;
}
set emptyFilteredGridMessage(v) {
this.i.d9 = v;
}
get pinning() {
return this.i.bp.nativeElement;
}
set pinning(v) {
this.i.bp = interfaceToInternal(v, () => new PinningConfig());
}
get allowFiltering() {
return this.i.cb;
}
set allowFiltering(v) {
this.i.cb = ensureBool(v);
}
get allowAdvancedFiltering() {
return this.i.ca;
}
set allowAdvancedFiltering(v) {
this.i.ca = ensureBool(v);
}
get filterMode() {
return this.i.ao;
}
set filterMode(v) {
this.i.ao = ensureEnum(FilterMode_$type, v);
}
get summaryPosition() {
return this.i.bg;
}
set summaryPosition(v) {
this.i.bg = ensureEnum(GridSummaryPosition_$type, v);
}
get summaryCalculationMode() {
return this.i.bf;
}
set summaryCalculationMode(v) {
this.i.bf = ensureEnum(GridSummaryCalculationMode_$type, v);
}
get showSummaryOnCollapse() {
return this.i.cn;
}
set showSummaryOnCollapse(v) {
this.i.cn = ensureBool(v);
}
get filterStrategy() {
return this.i.an.nativeElement;
}
set filterStrategy(v) {
this.i.an = interfaceToInternal(v, () => new FilteringStrategy());
}
get sortStrategy() {
return this.i.be.nativeElement;
}
set sortStrategy(v) {
this.i.be = interfaceToInternal(v, () => new GridSortingStrategy());
}
get sortingOptions() {
return this.i.b4.nativeElement;
}
set sortingOptions(v) {
this.i.b4 = interfaceToInternal(v, () => new SortingOptions());
}
get selectedRows() {
return this.i.h;
}
set selectedRows(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.h = v;
}
/**
* Gets the header row selector template.
*/
get headSelectorTemplate() {
return this._headSelectorTemplate;
}
set headSelectorTemplate(v) {
this._headSelectorTemplate = v;
if (!this._headSelectorTemplateAdapter) {
this._headSelectorTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "dx", { html: html }, () => new IgrHeadSelectorTemplateContext());
}
this._headSelectorTemplateAdapter.setValue(this.i, this._headSelectorTemplate);
}
/**
* Gets the row selector template.
*/
get rowSelectorTemplate() {
return this._rowSelectorTemplate;
}
set rowSelectorTemplate(v) {
this._rowSelectorTemplate = v;
if (!this._rowSelectorTemplateAdapter) {
this._rowSelectorTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "d4", { html: html }, () => new IgrRowSelectorTemplateContext());
}
this._rowSelectorTemplateAdapter.setValue(this.i, this._rowSelectorTemplate);
}
/**
* The custom template, if any, that should be used when rendering the row drag indicator icon
*/
get dragIndicatorIconTemplate() {
return this._dragIndicatorIconTemplate;
}
set dragIndicatorIconTemplate(v) {
this._dragIndicatorIconTemplate = v;
if (!this._dragIndicatorIconTemplateAdapter) {
this._dragIndicatorIconTemplateAdapter = new ReactTemplateAdapter(this._renderer, this._portalManager, "ds", { html: html }, () => new IgrGridEmptyTemplateContext());
}
this._dragIndicatorIconTemplateAdapter.setValue(this.i, this._dragIndicatorIconTemplate);
}
get sortingExpressions() {
if (!this.i.i) {
return undefined;
}
let ret = [];
for (let i = 0; i < this.i.i.length; i++) {
let impl = this.i.i[i];
ret.push(impl.nativeElement);
}
return ret;
}
set sortingExpressions(v) {
let arr = [];
for (let i = 0; i < v.length; i++) {
arr.push(v[i]);
}
this.i.i = arr;
}
/**
* Gets the number of hidden columns.
* @example
* ```typescript
* const hiddenCol = this.grid.hiddenColumnsCount;
* ``
*/
get hiddenColumnsCount() {
return this.i.ct;
}
/**
* Gets the number of pinned columns.
*/
get pinnedColumnsCount() {
return this.i.cu;
}
get batchEditing() {
return this.i.cd;
}
set batchEditing(v) {
this.i.cd = ensureBool(v);
}
/**
* Gets/Sets cell selection mode.
* @remarks
* By default the cell selection mode is multiple
* selectionMode: GridSelectionMode
*/
get cellSelection() {
return this.i.ba;
}
set cellSelection(v) {
this.i.ba = ensureEnum(GridSelectionMode_$type, v);
}
/**
* Gets/Sets row selection mode
* @remarks
* By default the row selection mode is 'none'
* Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple'
*/
get rowSelection() {
return this.i.bc;
}
set rowSelection(v) {
this.i.bc = ensureEnum(GridSelectionMode_$type, v);
}
/**
* Gets/Sets column selection mode
* @remarks
* By default the row selection mode is none
* selectionMode: GridSelectionMode
*/
get columnSelection() {
return this.i.bb;
}
set columnSelection(v) {
this.i.bb = ensureEnum(GridSelectionMode_$type, v);
}
/**
* Represents the last search information.
*/
get lastSearchInfo() {
return this.i.b0.nativeElement;
}
/**
* Returns an array of objects containing the filtered data.
* @example
* ```typescript
* let filteredData = this.grid.filteredData;
* ```
*/
get filteredData() {
return this.i.c2;
}
/**
* Returns an array containing the filtered sorted data.
* @example
* ```typescript
* const filteredSortedData = this.grid1.filteredSortedData;
* ```
*/
get filteredSortedData() {
return this.i.d;
}
/**
* Returns the state of the grid virtualization.
* @remarks
* Includes the start index and how many records are rendered.
* @example
* ```typescript
* const gridVirtState = this.grid1.virtualizationState;
* ```
*/
get virtualizationState() {
const r = this.i.aq;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = new IgrForOfState();
if (r.$type) {
e._implementation = r;
}
else {
if (e.i.setNativeElement) {
e.i.setNativeElement(r);
}
}
r.externalObject = e;
}
return r.externalObject;
}
/**
* Gets/Sets the outlet used to attach the grid's overlays to.
* @remark
* If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive.
*/
get outlet() {
const r = this.i.bl;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = new IgrOverlayOutletDirective();
if (r.$type) {
e._implementation = r;
}
else {
if (e.i.setNativeElement) {
e.i.setNativeElement(r);
}
}
r.externalObject = e;
}
return r.externalObject;
}
set outlet(v) {
v == null ? this.i.bl = null : this.i.bl = v.i;
}
/**
* Gets the default row height.
* @example
* ```typescript
* const rowHeigh = this.grid.defaultRowHeight;
* ```
*/
get defaultRowHeight() {
return this.i.cq;
}
/**
* Returns the `IgxGridHeaderGro