igniteui-react-grids
Version:
Ignite UI React grid components.
1,219 lines (1,218 loc) • 156 kB
JavaScript
import * as React from 'react';
import { IgrSectionHeader } from './igr-section-header';
import { IgrSummaryRowRoot } from './igr-summary-row-root';
import { IgrSummaryRowSection } from './igr-summary-row-section';
import { IgrColumnWidth } from './igr-column-width';
import { ColumnWidth as ColumnWidth_internal } from './ColumnWidth';
import { HeaderClickAction_$type } from './HeaderClickAction';
import { ColumnShowingAnimationMode_$type } from './ColumnShowingAnimationMode';
import { ColumnPropertyUpdatingAnimationMode, ColumnPropertyUpdatingAnimationMode_$type } from './ColumnPropertyUpdatingAnimationMode';
import { CellDataLoadedAnimationMode_$type } from './CellDataLoadedAnimationMode';
import { RowSelectionAnimationMode_$type } from './RowSelectionAnimationMode';
import { ColumnMovingAnimationMode_$type } from './ColumnMovingAnimationMode';
import { ColumnHidingAnimationMode_$type } from './ColumnHidingAnimationMode';
import { CellSelectionAnimationMode_$type } from './CellSelectionAnimationMode';
import { ColumnExchangingAnimationMode_$type } from './ColumnExchangingAnimationMode';
import { RowHoverAnimationMode_$type } from './RowHoverAnimationMode';
import { DataGridSelectionMode_$type } from './DataGridSelectionMode';
import { GridActivationMode_$type } from './GridActivationMode';
import { GridSelectionBehavior_$type } from './GridSelectionBehavior';
import { IgrDataGridCellEventArgs } from './igr-data-grid-cell-event-args';
import { IgrGridColumnsAutoGeneratedEventArgs } from './igr-grid-columns-auto-generated-event-args';
import { IgrGridColumnsChangedEventArgs } from './igr-grid-columns-changed-event-args';
import { IgrGridSelectedItemsChangedEventArgs } from './igr-grid-selected-items-changed-event-args';
import { IgrGridSelectedKeysChangedEventArgs } from './igr-grid-selected-keys-changed-event-args';
import { IgrGridSelectedCellsChangedEventArgs } from './igr-grid-selected-cells-changed-event-args';
import { IgrGridSelectedCellRangesChangedEventArgs } from './igr-grid-selected-cell-ranges-changed-event-args';
import { IgrGridSortDescriptionsChangedEventArgs } from './igr-grid-sort-descriptions-changed-event-args';
import { IgrGridGroupDescriptionsChangedEventArgs } from './igr-grid-group-descriptions-changed-event-args';
import { IgrGridSummaryDescriptionsChangedEventArgs } from './igr-grid-summary-descriptions-changed-event-args';
import { DataGrid } from "./DataGrid";
import { ensureEnum, ensureBool, CollectionAdapter, toSpinal, brushToString, stringToBrush, initializePropertiesFromCss, NamePatcher, isValidProp, getModifiedProps } from "igniteui-react-core";
import { Thickness } from "igniteui-react-core";
import { ReactRenderer, ReactWrapper, PortalManager } from "igniteui-react-core";
import { DataGridColumn } from './DataGridColumn';
import { IgrDataGridColumn } from './igr-data-grid-column';
import { DataGridCellLayoutPanel } from './DataGridCellLayoutPanel';
import { Base } from "igniteui-react-core";
import { GridExternalWrapper } from './GridExternalWrapper';
import { BrowserTickProvider } from './BrowserTickProvider';
import { BrowserPixelConverter } from './BrowserPixelConverter';
import { DataGridPresenterManager } from './DataGridPresenterManager';
import { DataGridViewportManager } from './DataGridViewportManager';
import { DataGridDelayedExecutionManager } from './DataGridDelayedExecutionManager';
import { DataGridPropertySetter } from './DataGridPropertySetter';
import { IgrGridColumnCollection } from './igr-grid-column-collection';
import { SyncableObservableCollection$1 } from "igniteui-react-core";
import { NotifyCollectionChangedAction } from "igniteui-react-core";
import { Scroller } from "igniteui-react-core";
import { ScrollbarStyle_$type } from "igniteui-react-core";
import { Dragger } from "./Dragger";
import { DataGridStylingDefaults } from './DataGridStylingDefaults';
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { FontInfo } from "igniteui-react-core";
import { IgrColumnSortDescriptionCollection } from './igr-column-sort-description-collection';
import { IgrColumnGroupDescriptionCollection } from './igr-column-group-description-collection';
import { IgrColumnSummaryDescriptionCollection } from './igr-column-summary-description-collection';
import { IgrFilterExpressionCollection } from "igniteui-react-core";
import { IgrGridSelectedItemsCollection } from "./igr-grid-selected-items-collection";
import { IgrGridSelectedKeysCollection } from "./igr-grid-selected-keys-collection";
import { IgrGridSelectedCellsCollection } from "./igr-grid-selected-cells-collection";
import { IgrGridSelectedCellRangesCollection } from "./igr-grid-selected-cell-ranges-collection";
import { GridSelectedItemsCollection as GridSelectedItemsCollection_internal } from "./GridSelectedItemsCollection";
import { GridSelectedKeysCollection as GridSelectedKeysCollection_internal } from "./GridSelectedKeysCollection";
import { GridSelectedCellsCollection as GridSelectedCellsCollection_internal } from "./GridSelectedCellsCollection";
import { GridSelectedCellRangesCollection as GridSelectedCellRangesCollection_internal } from "./GridSelectedCellRangesCollection";
import { IgrColumnHiddenChangedEventArgs } from "./igr-column-hidden-changed-event-args";
import { PrimaryKeyValue } from "./PrimaryKeyValue";
import { CellKey } from "./CellKey";
import { CellRange } from "./CellRange";
import { IgrGridFilterExpressionsEventArgs } from './igr-grid-filter-expressions-event-args';
import { GridColumnCollection as GridColumnCollection_internal } from './GridColumnCollection';
import { ResponsiveStatesCollection as ResponsiveStatesCollection_internal } from './ResponsiveStatesCollection';
import { IgrResponsiveStatesCollection } from './igr-responsive-states-collection';
import { ResponsiveState } from './ResponsiveState';
import { IgrGridAnimationSettings } from './igr-grid-animation-settings';
import { IgrRowSeparator } from './igr-row-separator';
import { IgrHeaderRowSeparator } from './igr-header-row-separator';
import { ContentChildrenManager } from "igniteui-react-core";
import { IgrGridCellPosition } from "./igr-grid-cell-position";
import { IgrGridActiveCellChangedEventArgs } from "./igr-grid-active-cell-changed-event-args";
import { DataGridScrollerKeyboardListener } from "./DataGridScrollerKeyboardListener";
import { IgrHeaderSeparator } from "./igr-header-separator";
import { IgrColumnResizingSeparator } from "./igr-column-resizing-separator";
import { ColumnResizingMode_$type } from "./ColumnResizingMode";
import { ColumnResizingAnimationMode_$type } from "./ColumnResizingAnimationMode";
import { ColumnMovingMode_$type } from "./ColumnMovingMode";
import { IgrColumnMovingSeparator } from "./igr-column-moving-separator";
import { SortIndicatorStyle_$type } from "./SortIndicatorStyle";
import { GroupHeaderDisplayMode_$type } from "./GroupHeaderDisplayMode";
import { SummaryScope_$type } from "./SummaryScope";
import { GroupSummaryDisplayMode_$type } from "./GroupSummaryDisplayMode";
import { IgrPinnedAreaSeparator } from "./igr-pinned-area-separator";
import { fromRect } from "igniteui-react-core";
import { ColumnOptionsIconAlignment_$type } from "./ColumnOptionsIconAlignment";
import { ColumnOptionsIconBehavior_$type } from "./ColumnOptionsIconBehavior";
import { IgrColumnPinnedChangedEventArgs } from "./igr-column-pinned-changed-event-args";
import { ControlDisplayDensity_$type } from "igniteui-react-core";
import { CornerRadius } from "igniteui-react-core";
import { EditModeType_$type } from "./EditModeType";
import { EditModeClickAction_$type } from "./EditModeClickAction";
import { IgrGridCellValueChangingEventArgs } from "./igr-grid-cell-value-changing-event-args";
import { IgrGridDataCommittingEventArgs } from "./igr-grid-data-committing-event-args";
import { IgrGridDataCommittedEventArgs } from "./igr-grid-data-committed-event-args";
import { IgrGridSizeChangedEventArgs } from "./igr-grid-size-changed-event-args";
import { IgrGridColumnWidthChangedEventArgs } from "./igr-grid-column-width-changed-event-args";
import { DataGridAccessibilityLayoutPanel } from './DataGridAccessibilityLayoutPanel';
import { IgrGridCellEditStartedEventArgs } from "./igr-grid-cell-edit-started-event-args";
import { IgrGridCellEditEndedEventArgs } from "./igr-grid-cell-edit-ended-event-args";
import { IgrGridRowEditStartedEventArgs } from "./igr-grid-row-edit-started-event-args";
import { IgrGridRowEditEndedEventArgs } from "./igr-grid-row-edit-ended-event-args";
import { IgrGridSelectionChangedEventArgs } from "./igr-grid-selection-changed-event-args";
import { EnterKeyBehaviors_$type } from "./EnterKeyBehaviors";
import { EnterKeyBehaviorAfterEdit_$type } from "./EnterKeyBehaviorAfterEdit";
import { MergedCellMode_$type } from "./MergedCellMode";
import { MergedCellEvaluationCriteria_$type } from "./MergedCellEvaluationCriteria";
import { FilterUIType, FilterUIType_$type } from "./FilterUIType";
import { FilterLogicalOperator_$type } from "./FilterLogicalOperator";
import { FilterComparisonType_$type } from "./FilterComparisonType";
import { IgrGridCustomFilterRequestedEventArgs } from "./igr-grid-custom-filter-requested-event-args";
import { IgrColumnGrouping } from "./igr-column-grouping";
import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignment";
import { IgrDateTimeCellInfo } from "./igr-date-time-cell-info";
import { IgrImageCellInfo } from "./igr-image-cell-info";
import { IgrNumericCellInfo } from "./igr-numeric-cell-info";
import { IgrRowSeparatorInfo } from "./igr-row-separator-info";
import { IgrSectionHeaderCellInfo } from "./igr-section-header-cell-info";
import { IgrTemplateCellInfo } from "./igr-template-cell-info";
import { IgrTemplateHeaderCellInfo } from "./igr-template-header-cell-info";
import { IgrTemplateSectionHeaderCellInfo } from "./igr-template-section-header-cell-info";
import { IgrTextCellInfo } from "./igr-text-cell-info";
import { IgrTextHeaderCellInfo } from "./igr-text-header-cell-info";
import { IgrFilterCellInfo } from "./igr-filter-cell-info";
import { IgrDataGridPager } from "./igr-data-grid-pager";
import { IgrDataGridToolbar } from './igr-data-grid-toolbar';
import { IgrDataSourceRootSummariesChangedEventArgs } from "igniteui-react-core";
let GridStylingDefaults = {};
export class IgrDataGrid extends React.Component {
_insertExternalColumnAtIndex(index, column) {
//let contentCount = this.contentColumns.length;
let contentCount = this._columnsAdapter.actualContent.length;
this.columns.insert(index - contentCount, column);
}
_removeExternalColumn(column) {
let ind = -1;
for (let i = 0; i < this.columns.count; i++) {
if (this.columns.item(i) === column) {
ind = i;
break;
}
}
if (ind >= 0) {
this.columns.removeAt(ind);
}
}
_updateContentChildren() {
this.contentColumns.length = 0;
let contentChildrenActual = this._contentChildrenManager.contentChildrenActual;
for (let i = 0; i < contentChildrenActual.length; i++) {
if ((DataGridColumn.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
if (!contentChildrenActual[i]._iniailizedMarkup) {
contentChildrenActual[i]._iniailizedMarkup = true;
contentChildrenActual[i].isFromMarkup = true;
}
this.contentColumns.push(contentChildrenActual[i]);
}
}
if (this._columnsAdapter !== null) {
this._columnsAdapter.notifyContentChanged();
}
}
get actualDataSource() {
return this.i.actualDataSource;
}
_getMainRef(ref) {
this._elRef = ref;
this.i.syncBorder();
this._contentLayout.rootElement = this._elRef;
}
_getContentAreaRef(ref) {
this._contentAreaRef = ref;
}
_getFilterDialog(ref) {
this._filterDialogRef = ref;
}
_getColumnGroupingRef(ref) {
this._columnGroupingRef = ref;
if (this._columnGroupingRef)
this._columnGroupingRef.targetGrid = this;
}
_getPagerRef(ref) {
if (ref) {
this._pagerRef = ref;
this._pagerRef.targetGrid = this;
this.i.pager = this._pagerRef.i;
}
else {
this._pagerRef.targetGrid = null;
this.i.pager = null;
this._pagerRef = ref;
// When the pager is shown it replaces the internal grid's datasource with a new paged one. So when hiding the pager
// we need to assign back the original datasource.
this._grid.itemsSource = this._dataSource;
}
}
_getToolbarRef(ref) {
if (ref) {
this.i.toolbar = ref.i;
ref.targetGrid = this;
}
}
_ensureColumnsAreManual() {
this._disableManualColumnSync = true;
this._columnsAdapter.shiftContentToManual(this.columns, (i) => i.isFromMarkup = false);
this._disableManualColumnSync = false;
}
/**
* A collection or manually added columns for the grid.
*/
get columns() {
if (this._columns === null) {
let coll = new IgrGridColumnCollection();
let inner = coll._innerColl;
inner.addListener((sender, e) => {
if (this._disableManualColumnSync) {
return;
}
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._columnsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._columnsAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._columnsAdapter.removeManualItemAt(e.oldStartingIndex);
this._columnsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._columnsAdapter.clearManualItems();
break;
}
});
this._columns = coll;
}
return this._columns;
}
set height(value) {
this._height = value;
if (this._elRef) {
this._elRef.style.height = value;
this.containerResized();
}
}
get height() {
return this._height;
}
set width(value) {
this._width = value;
if (this._elRef) {
this._elRef.style.width = value;
this.containerResized();
}
}
get width() {
return this._width;
}
/**
* Gets or sets if the Column Grouping Area should be shown and enabled
*/
get isGroupByAreaVisible() {
return this._isGroupByAreaVisible;
}
set isGroupByAreaVisible(value) {
this._isGroupByAreaVisible = ensureBool(value);
this.i.isGroupByAreaVisible = this._isGroupByAreaVisible;
this.i.columnGrouping = this._columnGroupingRef;
}
set useCanvas(value) {
this._useCanvas = ensureBool(value);
}
get useCanvas() {
return this._useCanvas;
}
set useAccessibility(value) {
this._useAccessibility = ensureBool(value);
}
get useAccessibility() {
return this._useAccessibility;
}
_setScrollbarStyle(style) {
if (this._scroller) {
this._scroller.scrollbarStyle = style;
}
}
_setScrollbarColor(color) {
if (this._scroller) {
this._scroller.scrollbarBrush = color;
}
}
render() {
// if (!this._childrenDiffer(this.props.children)) {
// let div = React.createElement("div", {
// ref: (ref) => {
// this._elRef = ref;
// },
// children: this.props.children
// });
// return div;
// } else {
let children = this._contentChildrenManager.getChildren(this.props.children);
this._portalManager.onRender(children);
if (this.isToolbarVisible) {
let toolbar = React.createElement(IgrDataGridToolbar, {
key: "toolbar",
ref: this._getToolbarRef,
borderWidthTop: 0,
borderWidthRight: 0,
borderWidthBottom: 1,
borderWidthLeft: 0
});
children.push(toolbar);
}
if (this._isGroupByAreaVisible == true) {
let columnGrouping = React.createElement(IgrColumnGrouping, {
ref: this._getColumnGroupingRef,
key: "columnGrouping"
});
children.push(columnGrouping);
}
let main = React.createElement("div", { key: "content", ref: this._getContentAreaRef, style: { overflow: "hidden", flex: "1" } });
children.push(main);
if (this.isPagerVisible) {
let pager = React.createElement(IgrDataGridPager, { key: "pager", ref: this._getPagerRef });
children.push(pager);
}
let div = React.createElement("div", {
className: "ig-data-grid igr-data-grid",
ref: this._getMainRef,
style: { boxSizing: "border-box", overflow: "hidden", display: "flex", flexDirection: "column" },
children: children
});
return div;
//}
}
destroy() {
this._wrapper.destroy();
}
componentDidMount() {
if (!this._mounted) {
this._mounted = true;
if (this.i) {
if (this._scroller) {
this._scroller.onAttachedToUI();
}
if (this._grid.dragger) {
this._grid.dragger.onAttachedToUI();
}
if (this._grid.renderingEngine) {
this._grid.renderingEngine.attach();
}
}
return;
}
this._elRef.style.width = this._width ? this._width : "";
this._elRef.style.height = this._height ? this._height : "";
this._contentAreaRef.appendChild(this._container);
this.containerResized();
this.initializeContent();
}
componentWillUnmount() {
//this._grid.destroy();
if (this.i) {
if (this._scroller) {
this._scroller.onDetachedFromUI();
}
if (this._grid.dragger) {
this._grid.dragger.onDetachedFromUI();
}
if (this._grid.renderingEngine) {
this._grid.renderingEngine.detach();
}
}
this._mounted = false;
}
createImplementation() {
//let test = Grid;
return new DataGrid();
}
ngOnInit() {
}
get i() {
return this._implementation;
}
onImplementationCreated() {
}
constructor(props) {
super(props);
this.contentColumns = [];
/**
* The columns actually present in the grid. Do not directly modify this array.
* This array's contents can be modified by causing React to reproject the child content.
* Or adding and removing columns from the manual columns collection on the columns property.
*/
this.combinedColumns = [];
this._columns = null;
this._disableManualColumnSync = false;
this._mounted = false;
this._columnsAdapter = null;
this._renderer = null;
this._scroller = null;
this._dragger = null;
this._wrapper = null;
this._grid = null;
this._dataSource = null;
this._insetLeft = 0;
this._insetTop = 0;
this._insetRight = 0;
this._insetBottom = 0;
this._isPagerVisible = false;
this._selectedItems = null;
this._selectedKeys = null;
this._selectedCells = null;
this._selectedCellRanges = null;
this._pinnedItems = null;
this._pinnedKeys = null;
this._responsiveStates = null;
this._actualColumns = null;
this.__p = null;
this._hasUserValues = new Set();
this._stylingContainer = null;
this._stylingParent = null;
this._inStyling = false;
this._filterExpressionsChanging = null;
this._filterExpressionsChanging_wrapped = null;
this._filterExpressionsChanged = null;
this._filterExpressionsChanged_wrapped = null;
this._cellPreviewPointerDown = null;
this._cellPreviewPointerDown_wrapped = null;
this._cellPreviewPointerUp = null;
this._cellPreviewPointerUp_wrapped = null;
this._cellPointerDown = null;
this._cellPointerDown_wrapped = null;
this._cellPointerUp = null;
this._cellPointerUp_wrapped = null;
this._cellClicked = null;
this._cellClicked_wrapped = null;
this._sortDescriptionsChanged = null;
this._sortDescriptionsChanged_wrapped = null;
this._groupDescriptionsChanged = null;
this._groupDescriptionsChanged_wrapped = null;
this._summaryDescriptionsChanged = null;
this._summaryDescriptionsChanged_wrapped = null;
this._columnHiddenChanged = null;
this._columnHiddenChanged_wrapped = null;
this._columnPinnedChanged = null;
this._columnPinnedChanged_wrapped = null;
this._cellValueChanging = null;
this._cellValueChanging_wrapped = null;
this._dataCommitted = null;
this._dataCommitted_wrapped = null;
this._dataCommitting = null;
this._dataCommitting_wrapped = null;
this._rootSummariesChanged = null;
this._rootSummariesChanged_wrapped = null;
this._sizeChanged = null;
this._sizeChanged_wrapped = null;
this._actualColumnsChanged = null;
this._actualColumnsChanged_wrapped = null;
this._columnsAutoGenerated = null;
this._columnsAutoGenerated_wrapped = null;
this._selectedItemsChanged = null;
this._selectedItemsChanged_wrapped = null;
this._selectedKeysChanged = null;
this._selectedKeysChanged_wrapped = null;
this._selectedCellsChanged = null;
this._selectedCellsChanged_wrapped = null;
this._selectionChanged = null;
this._selectionChanged_wrapped = null;
this._activeCellChanged = null;
this._activeCellChanged_wrapped = null;
this._selectedCellRangesChanged = null;
this._selectedCellRangesChanged_wrapped = null;
this._columnWidthChanged = null;
this._columnWidthChanged_wrapped = null;
this._cellEditStarted = null;
this._cellEditStarted_wrapped = null;
this._cellEditEnded = null;
this._cellEditEnded_wrapped = null;
this._rowEditStarted = null;
this._rowEditStarted_wrapped = null;
this._rowEditEnded = null;
this._rowEditEnded_wrapped = null;
this._customFilterRequested = null;
this._customFilterRequested_wrapped = null;
this._actualPrimaryKeyChange = null;
this._actualPrimaryKeyChange_wrapped = null;
if (this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
}
this._getMainRef = this._getMainRef.bind(this);
this._getFilterDialog = this._getFilterDialog.bind(this);
this._getColumnGroupingRef = this._getColumnGroupingRef.bind(this);
this._getContentAreaRef = this._getContentAreaRef.bind(this);
this._getPagerRef = this._getPagerRef.bind(this);
this._getToolbarRef = this._getToolbarRef.bind(this);
this._contentChildrenManager = new ContentChildrenManager((ch) => ch.props.name || ch.key || ch.props.field, (ch) => ch.name || ch.key || ch.field, () => this._updateContentChildren());
let useCanvas = false;
if (props.useCanvas) {
this.useCanvas = true;
useCanvas = true;
}
if (props.useAccessibility) {
this.useAccessibility = true;
}
if (document) {
this._container = document.createElement("div");
this._container.style.display = "block";
this._container.style.width = "100%";
this._container.style.height = "100%";
this._container.style.boxSizing = "border-box";
this._container.style.overflow = "hidden";
}
var root;
root = this._container;
this.requestRender = this.requestRender.bind(this);
this._portalManager = new PortalManager("filterDialog", this.requestRender);
this._portalManager.disableContentPortal = true;
this._renderer = new ReactRenderer(root, document, true, DataGridStylingDefaults, this._portalManager);
this._wrapper = this._renderer;
this._implementation = new DataGrid();
var grid = this.i;
this._grid = grid;
this._grid.externalObject = this;
this._columnsAdapter = new CollectionAdapter(this.contentColumns, this.i.columns, this.combinedColumns, (c) => c.i, (i) => {
i._provideRenderer(this._wrapper);
if (this._container && this._container.parentElement) {
i._styling(this._container, this, this);
}
}, (i) => { i._provideRenderer(null); }, (i) => { return i.name || i.field; });
grid.externalGrid = new GridExternalWrapper(this);
grid.tickProvider = new BrowserTickProvider(this._renderer);
grid.platformPixelConverter = new BrowserPixelConverter();
if (this.useAccessibility) {
this._contentLayout = new DataGridAccessibilityLayoutPanel(this._renderer, new DataGridPresenterManager(this._grid, false), window.devicePixelRatio);
}
else {
this._contentLayout = new DataGridCellLayoutPanel(this._renderer, new DataGridPresenterManager(this._grid, useCanvas), window.devicePixelRatio);
}
grid.renderingEngine = this._contentLayout;
grid.viewportManager = new DataGridViewportManager(this);
grid.delayedExecutionManager = new DataGridDelayedExecutionManager(this._renderer);
grid.propertySetter = new DataGridPropertySetter();
//grid.provideContainer(ren);
let scroller = new Scroller();
scroller.scrollbarStyle = this.scrollbarStyle;
this._scroller = scroller;
this._scroller.keyboardListener = new DataGridScrollerKeyboardListener(grid);
scroller.provideContainer(this._renderer);
this._content = (this._contentLayout.element.getNativeElement());
scroller.provideContent(new ReactWrapper(this._content, this._renderer));
scroller.onScrolling = () => this.onScroll();
scroller.onScrollStart = () => this.onScrollStart();
scroller.onScrollStop = () => this.onScrollStop();
scroller.viewportWidth = this._container.clientWidth;
scroller.viewportHeight = this._container.clientHeight;
grid.dragger = new Dragger();
grid.dragger.provideContainer(this._renderer);
grid.dragger.viewportWidth = this._container.clientWidth;
grid.dragger.viewportHeight = this._container.clientHeight;
this.initializeProperties();
var isFilterRowEnabled = this.filterUIType === FilterUIType.FilterRow;
var filterRowHeight = isFilterRowEnabled ? this.actualRowHeight + this.rowSeparatorHeight : 0;
scroller.verticalTrackStartInset = this.actualHeaderHeight + this.rowSeparatorHeight + filterRowHeight;
this._renderer.addSizeWatcher(() => {
this.containerResized();
});
this._mounted = true;
}
requestRender() {
this.setState({});
}
_focusScroller() {
this._scroller.focus();
}
_setDefaultCursor() {
if (this._elRef.style.cursor !== "") {
this._elRef.style.cursor = "";
}
}
_setResizeCursor() {
if (this._elRef.style.cursor !== "col-resize") {
this._elRef.style.cursor = "col-resize";
}
}
_setHandCursor() {
if (this._elRef.style.cursor !== "grabbing") {
this._elRef.style.cursor = "grabbing";
}
}
_setBorder(borderColor, borderLeft, borderTop, borderRight, borderBottom, radiusTopLeft, radiusTopRight, radiusBottomLeft, radiusBottomRight) {
if (this._elRef) {
if (borderLeft !== 0 || borderTop !== 0 || borderRight !== 0 || borderBottom !== 0) {
this._elRef.style.borderStyle = "solid";
this._elRef.style.borderColor = borderColor;
this._elRef.style.borderTopWidth = borderTop + "px";
this._elRef.style.borderRightWidth = borderRight + "px";
this._elRef.style.borderBottomWidth = borderBottom + "px";
this._elRef.style.borderLeftWidth = borderLeft + "px";
this._elRef.style.borderTopLeftRadius = radiusTopLeft + "px";
this._elRef.style.borderTopRightRadius = radiusTopRight + "px";
this._elRef.style.borderBottomLeftRadius = radiusBottomLeft + "px";
this._elRef.style.borderBottomRightRadius = radiusBottomRight + "px";
}
else {
this._elRef.style.borderStyle = "none";
}
}
}
_setScrollerVerticalTrackInset(inset) {
this._scroller.verticalTrackStartInset = inset;
}
initializeContent() {
// supports themes or custom properties set in CSS
let prev = this._grid.columnPropertyUpdatingAnimationMode;
this._grid.columnPropertyUpdatingAnimationMode = ColumnPropertyUpdatingAnimationMode.None;
this._styling(this._container, this);
this._grid.columnPropertyUpdatingAnimationMode = prev;
this._updateContentChildren();
prev = this._grid.columnPropertyUpdatingAnimationMode;
this._grid.columnPropertyUpdatingAnimationMode = ColumnPropertyUpdatingAnimationMode.None;
for (let i = 0; i < this.actualColumns.count; i++) {
let c = this.actualColumns.item(i);
c._styling(this._container, this, this);
}
this._grid.columnPropertyUpdatingAnimationMode = prev;
this._grid.itemsSource = this._dataSource;
}
/*
* Notify the DataGrid that it has been added to the DOM. This is useful when you are creating and
* rendering the React component before actually adding it to the document.
*/
notifyDOMInsertion() {
let prev = this._grid.columnPropertyUpdatingAnimationMode;
this._grid.columnPropertyUpdatingAnimationMode = ColumnPropertyUpdatingAnimationMode.None;
this._styling(this._container, this);
this._grid.columnPropertyUpdatingAnimationMode = prev;
prev = this._grid.columnPropertyUpdatingAnimationMode;
this._grid.columnPropertyUpdatingAnimationMode = ColumnPropertyUpdatingAnimationMode.None;
for (let i = 0; i < this.actualColumns.count; i++) {
let c = this.actualColumns.item(i);
c._styling(this._container, this, this);
}
this._grid.columnPropertyUpdatingAnimationMode = prev;
}
initializeProperties() {
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;
}
containerResized() {
var width = this._container.clientWidth;
var height = this._container.clientHeight;
this._scroller.viewportWidth = width;
this._scroller.viewportHeight = height;
this._grid.dragger.viewportWidth = width;
this._grid.dragger.viewportHeight = height;
this._grid.onSizeChanged(width, height);
if (this._grid.model.actualVisibleRegion.isEmpty &&
width > 0 && height > 0) {
this._grid.setViewport(0, 0, width, height);
}
else {
this.onScroll();
}
}
;
refreshContentSize() {
if (this._content != null) {
var width = this._grid.model.absoluteWidth;
var height = this._grid.model.absoluteHeight;
if (this._scroller != null) {
this._scroller.contentWidth = width;
this._scroller.contentHeight = height;
}
}
}
onScroll() {
let top = this._scroller.scrollTop;
let left = this._scroller.scrollLeft;
let width = this._scroller.viewportWidth;
let height = this._scroller.viewportHeight;
//console.log("top:" + top);
this._grid.setViewport(left, top, left + width, top + height);
}
onScrollStart() {
this._grid.notifyScrollStart();
}
onScrollStop() {
this._grid.notifyScrollStop();
}
scrollTo(x, y) {
this._scroller.scrollTo(x, y);
//let width = this._scroller.viewportWidth;
//let height = this._scroller.viewportHeight;
//this._grid.setViewport(x, y, x + width, y + height);
}
set dataSource(value) {
this._dataSource = value;
if (this._grid != null) {
this._grid.itemsSource = this._dataSource;
}
}
get dataSource() {
return this._dataSource;
}
forColumnsWithPropertyPath(propertyPath, callback) {
for (let i = 0; i < this.i.actualColumns.count; i++) {
let col = this.i.actualColumns.item(i).externalObject;
if (col.field == propertyPath) {
callback(col);
}
}
}
/**
* Gets or sets the default column width to use if a column as no local width.
* */
get defaultColumnWidth() {
let ext = this.i.defaultColumnWidth.externalObject;
if (!ext) {
ext = new IgrColumnWidth();
ext._implementation = this.i.defaultColumnWidth;
}
return ext;
}
set defaultColumnWidth(value) {
if (typeof value == "string") {
let int = ColumnWidth_internal.parse(value);
let ext = new IgrColumnWidth();
ext._implementation = int;
value = ext;
}
this.i.defaultColumnWidth = value.i;
}
/**
* Gets or sets the amount of left inset space to use around the grid content.
*/
get insetLeft() {
return this._insetLeft;
}
set insetLeft(v) {
this._insetLeft = +v;
let inset = new Thickness(1, this._insetLeft, this._insetTop, this._insetRight, this._insetBottom);
this.i.inset = inset;
}
/**
* Gets or sets the amount of top inset space to use around the grid content.
*/
get insetTop() {
return this._insetTop;
}
set insetTop(v) {
this._insetTop = +v;
let inset = new Thickness(1, this._insetLeft, this._insetTop, this._insetRight, this._insetBottom);
this.i.inset = inset;
}
/**
* Gets or sets the amount of right inset space to use around the grid content.
*/
get insetRight() {
return this._insetLeft;
}
set insetRight(v) {
this._insetRight = +v;
let inset = new Thickness(1, this._insetLeft, this._insetTop, this._insetRight, this._insetBottom);
this.i.inset = inset;
}
/**
* Gets or sets the amount of bottom inset space to use around the grid content.
*/
get insetBottom() {
return this._insetBottom;
}
set insetBottom(v) {
this._insetBottom = +v;
let inset = new Thickness(1, this._insetLeft, this._insetTop, this._insetRight, this._insetBottom);
this.i.inset = inset;
}
/**
* Gets or sets whether to show the pager or not.
*/
get isPagerVisible() {
return this.i.isPagerVisible;
}
set isPagerVisible(value) {
let v = ensureBool(value);
if (this.i.isPagerVisible !== v) {
this.i.isPagerVisible = v;
if (this._mounted) {
this.setState({});
}
}
}
/**
* Gets or sets whether to show the toolbar.
*/
get isToolbarVisible() {
return this.i.isToolbarVisible;
}
set isToolbarVisible(value) {
this.i.isToolbarVisible = ensureBool(value);
}
/**
* Get the cell that contains the provided coordinates.
*/
getHitCell(x, y) {
let cell = this.i.getHitCell(x, y);
if (!cell) {
return null;
}
if (!cell.externalObject) {
let ext = null;
switch (cell.$type.name) {
case "DateTimeCellModel":
ext = new IgrDateTimeCellInfo();
break;
case "ImageCellModel":
ext = new IgrImageCellInfo();
break;
case "NumericCellModel":
ext = new IgrNumericCellInfo();
break;
case "RowSeparatorModel":
ext = new IgrRowSeparatorInfo();
break;
case "SectionHeaderCellModel":
ext = new IgrSectionHeaderCellInfo();
break;
case "TemplateCellModel":
ext = new IgrTemplateCellInfo();
break;
case "TemplateHeaderCellModel":
ext = new IgrTemplateHeaderCellInfo();
break;
case "TemplateSectionHeaderCellModel":
ext = new IgrTemplateSectionHeaderCellInfo();
break;
case "TextCellModel":
ext = new IgrTextCellInfo();
break;
case "TextHeaderCellModel":
ext = new IgrTextHeaderCellInfo();
break;
case "FilterCellModel":
ext = new IgrFilterCellInfo();
break;
}
ext._implementation = cell;
cell.externalObject = ext;
}
return cell.externalObject;
}
/**
* Gets or sets the type of column resizing to use.
*/
get columnResizingMode() {
return this.i.columnResizingMode;
}
set columnResizingMode(v) {
this.i.columnResizingMode = ensureEnum(ColumnResizingMode_$type, v);
}
/**
* Gets or sets the type column moving to use.
*/
get columnMovingMode() {
return this.i.columnMovingMode;
}
set columnMovingMode(v) {
this.i.columnMovingMode = ensureEnum(ColumnMovingMode_$type, v);
}
/**
* Gets or sets whether the row will highlight when hovered.
*/
get isRowHoverEnabled() {
return this.i.isRowHoverEnabled;
}
set isRowHoverEnabled(v) {
this.i.isRowHoverEnabled = ensureBool(v);
}
/**
* Gets or sets the background color for rows when hovered.
*/
get rowHoverBackground() {
return brushToString(this.i.rowHoverBackground);
}
set rowHoverBackground(v) {
this.i.rowHoverBackground = stringToBrush(v);
}
/**
* Gets or sets the text color for rows when hovered.
*/
get rowHoverTextColor() {
return brushToString(this.i.rowHoverTextColor);
}
set rowHoverTextColor(v) {
this.i.rowHoverTextColor = stringToBrush(v);
}
/**
* Gets or sets the border color for rows being edited.
*/
get editRowBorder() {
return brushToString(this.i.editRowBorder);
}
set editRowBorder(v) {
this.i.editRowBorder = stringToBrush(v);
}
get editRowBorderWidthBottom() {
return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.bottom : NaN;
}
set editRowBorderWidthBottom(v) {
this.ensureEditRowBorderWidth();
this.i.editRowBorderWidth.bottom = +v;
this.i.editRowBorderWidth = this.i.editRowBorderWidth;
}
get editRowBorderWidthLeft() {
return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.left : NaN;
}
set editRowBorderWidthLeft(v) {
this.ensureEditRowBorderWidth();
this.i.editRowBorderWidth.left = +v;
this.i.editRowBorderWidth = this.i.editRowBorderWidth;
}
get editRowBorderWidthRight() {
return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.right : NaN;
}
set editRowBorderWidthRight(v) {
this.ensureEditRowBorderWidth();
this.i.editRowBorderWidth.right = +v;
this.i.editRowBorderWidth = this.i.editRowBorderWidth;
}
get editRowBorderWidthTop() {
return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.top : NaN;
}
set editRowBorderWidthTop(v) {
this.ensureEditRowBorderWidth();
this.i.editRowBorderWidth.top = +v;
this.i.editRowBorderWidth = this.i.editRowBorderWidth;
}
ensureEditRowBorderWidth() {
if (this.i.editRowBorderWidth) {
return;
}
this.i.editRowBorderWidth = new Thickness(2);
}
/**
* Gets or sets the header type used for sectioning off groups of rows.
*/
get sectionHeader() {
const r = this.i.sectionHeader;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrSectionHeader._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set sectionHeader(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.sectionHeader = null : this.i.sectionHeader = v.i;
}
/**
* Gets or sets the cell definition used for summary rows at the root level.
*/
get summaryRowRoot() {
const r = this.i.summaryRowRoot;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrSummaryRowRoot._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set summaryRowRoot(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.summaryRowRoot = null : this.i.summaryRowRoot = v.i;
}
/**
* Gets or sets the cell definition used for summary rows at the section level.
*/
get summaryRowSection() {
const r = this.i.summaryRowSection;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrSummaryRowSection._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set summaryRowSection(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.summaryRowSection = null : this.i.summaryRowSection = v.i;
}
/**
* Gets or sets the row seperator settings.
*/
get rowSeparator() {
const r = this.i.rowSeparator;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrRowSeparator._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set rowSeparator(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.rowSeparator = null : this.i.rowSeparator = v.i;
}
/**
* Gets or sets the header row seperator settings.
*/
get headerRowSeparator() {
const r = this.i.headerRowSeparator;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrHeaderRowSeparator._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set headerRowSeparator(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.headerRowSeparator = null : this.i.headerRowSeparator = v.i;
}
/**
* Gets or sets the header seperator settings.
*/
get headerSeparator() {
const r = this.i.headerSeparator;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrHeaderSeparator._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set headerSeparator(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.headerSeparator = null : this.i.headerSeparator = v.i;
}
/**
* Gets or sets the column resizing seperator settings.
*/
get columnResizingSeparator() {
const r = this.i.columnResizingSeparator;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrColumnResizingSeparator._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set columnResizingSeparator(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.columnResizingSeparator = null : this.i.columnResizingSeparator = v.i;
}
/**
* Gets or sets the column resizing seperator settings.
*/
get columnMovingSeparator() {
const r = this.i.columnMovingSeparator;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrColumnMovingSeparator._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set columnMovingSeparator(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.columnMovingSeparator = null : this.i.columnMovingSeparator = v.i;
}
/**
* Gets or sets the pinned area separator settings.
*/
get pinnedAreaSeparator() {
const r = this.i.pinnedAreaSeparator;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrPinnedAreaSeparator._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set pinnedAreaSeparator(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.pinnedAreaSeparator = null : this.i.pinnedAreaSeparator = v.i;
}
/**
* Gets or sets the desired properties the grid will automatically generate columns for.
*/
get autoGenerateDesiredProperties() {
return this.i.autoGenerateDesiredProperties;
}
set autoGenerateDesiredProperties(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.autoGenerateDesiredProperties = v;
}
/**
* Gets or sets the desired properties for the data source to load. If specified the data source may decide to constrain the properties it fetches to these properties and must make sure that at least those properties are loaded, rather than the default behavior for that data source.
*/
get dataSourceDesiredProperties() {
return this.i.dataSourceDesiredProperties;
}
set dataSourceDesiredProperties(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.dataSourceDesiredProperties = v;
}
/**
* Gets or sets the display density to use for the grid.
*/
get density() {
return this.i.density;
}
set density(v) {
this.i.density = ensureEnum(ControlDisplayDensity_$type, v);
}
/**
* Gets the actual height for the rows in the grid.
*/
get actualRowHeight() {
return this.i.actualRowHeight;
}
set actualRowHeight(v) {
this.i.actualRowHeight = +v;
}
/**
* Gets or sets the height to use for the rows in the grid. If not set the grid will
* use the default value for the set display density.
*/
get rowHeight() {
return this.i.rowHeight;
}
set rowHeight(v) {
this.i.rowHeight = +v;
}
/**
* Gets or sets the default minimum width to use on all columns. Ignored if NaN.