igniteui-angular-data-grids 19.1.0-beta.0

package/esm2015/lib/igx-data-grid-component.js

@@ -0,0 +1,4190 @@
+import { Component, EventEmitter, Output, ViewContainerRef, ViewChild, Input, ChangeDetectionStrategy, ContentChildren } from '@angular/core';
+import { IgxSectionHeaderComponent } from './igx-section-header-component';
+import { IgxSummaryRowRootComponent } from './igx-summary-row-root-component';
+import { IgxSummaryRowSectionComponent } from './igx-summary-row-section-component';
+import { IgxColumnWidth } from './igx-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 { IgxDataGridCellEventArgs } from './igx-data-grid-cell-event-args';
+import { IgxGridColumnsAutoGeneratedEventArgs } from './igx-grid-columns-auto-generated-event-args';
+import { IgxGridSelectedItemsChangedEventArgs } from './igx-grid-selected-items-changed-event-args';
+import { IgxGridSelectedKeysChangedEventArgs } from './igx-grid-selected-keys-changed-event-args';
+import { IgxGridSelectedCellsChangedEventArgs } from './igx-grid-selected-cells-changed-event-args';
+import { IgxGridSelectedCellRangesChangedEventArgs } from './igx-grid-selected-cell-ranges-changed-event-args';
+import { IgxGridSortDescriptionsChangedEventArgs } from './igx-grid-sort-descriptions-changed-event-args';
+import { IgxGridGroupDescriptionsChangedEventArgs } from './igx-grid-group-descriptions-changed-event-args';
+import { IgxGridSummaryDescriptionsChangedEventArgs } from './igx-grid-summary-descriptions-changed-event-args';
+import { DataGrid } from "./DataGrid";
+import { ensureEnum, ensureBool, CollectionAdapter, initializePropertiesFromCss, NamePatcher, stringToBrush, brushToString, toSpinal } from "igniteui-angular-core";
+import { Thickness } from "igniteui-angular-core";
+import { AngularRenderer, AngularWrapper, PortalManager } from "igniteui-angular-core";
+import { DataGridColumn } from './DataGridColumn';
+import { IgxDataGridColumnComponent } from './igx-data-grid-column-component';
+import { DataGridCellLayoutPanel } from './DataGridCellLayoutPanel';
+import { Base } from "igniteui-angular-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 { IgxGridColumnCollection } from './igx-grid-column-collection';
+import { SyncableObservableCollection$1 } from "igniteui-angular-core";
+import { NotifyCollectionChangedAction } from "igniteui-angular-core";
+import { Scroller } from "igniteui-angular-core";
+import { ScrollbarStyle_$type } from "igniteui-angular-core";
+import { Dragger } from "./Dragger";
+import { DataGridStylingDefaults } from './DataGridStylingDefaults';
+import { delegateCombine } from "igniteui-angular-core";
+import { FontInfo } from "igniteui-angular-core";
+import { IgxColumnSortDescriptionCollection } from './igx-column-sort-description-collection';
+import { IgxColumnGroupDescriptionCollection } from './igx-column-group-description-collection';
+import { IgxFilterExpressionCollection } from "igniteui-angular-core";
+import { IgxColumnSummaryDescriptionCollection } from './igx-column-summary-description-collection';
+import { IgxGridSelectedItemsCollection } from "./igx-grid-selected-items-collection";
+import { IgxGridSelectedKeysCollection } from "./igx-grid-selected-keys-collection";
+import { IgxGridSelectedCellsCollection } from "./igx-grid-selected-cells-collection";
+import { IgxGridSelectedCellRangesCollection } from "./igx-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 { PrimaryKeyValue } from "./PrimaryKeyValue";
+import { CellKey } from "./CellKey";
+import { CellRange } from "./CellRange";
+import { IgxGridFilterExpressionsEventArgs } from './igx-grid-filter-expressions-event-args';
+import { GridColumnCollection as GridColumnCollection_internal } from './GridColumnCollection';
+import { ResponsiveStatesCollection as ResponsiveStatesCollection_internal } from './ResponsiveStatesCollection';
+import { IgxResponsiveStatesCollection } from './igx-responsive-states-collection';
+import { ResponsiveState } from './ResponsiveState';
+import { IgxGridAnimationSettings } from './igx-grid-animation-settings';
+import { IgxRowSeparatorComponent } from './igx-row-separator-component';
+import { IgxHeaderRowSeparatorComponent } from './igx-header-row-separator-component';
+import { IgxGridCellPosition } from "./igx-grid-cell-position";
+import { IgxGridActiveCellChangedEventArgs } from "./igx-grid-active-cell-changed-event-args";
+import { IgxColumnHiddenChangedEventArgs } from "./igx-column-hidden-changed-event-args";
+import { DataGridScrollerKeyboardListener } from "./DataGridScrollerKeyboardListener";
+import { IgxHeaderSeparatorComponent } from "./igx-header-separator-component";
+import { IgxColumnResizingSeparatorComponent } from './igx-column-resizing-separator-component';
+import { ColumnResizingMode_$type } from "./ColumnResizingMode";
+import { ColumnResizingAnimationMode_$type } from "./ColumnResizingAnimationMode";
+import { ColumnMovingMode_$type } from "./ColumnMovingMode";
+import { IgxColumnMovingSeparatorComponent } from './igx-column-moving-separator-component';
+import { SortIndicatorStyle_$type } from "./SortIndicatorStyle";
+import { GroupHeaderDisplayMode_$type } from "./GroupHeaderDisplayMode";
+import { SummaryScope_$type } from "./SummaryScope";
+import { GroupSummaryDisplayMode_$type } from "./GroupSummaryDisplayMode";
+import { IgxPinnedAreaSeparatorComponent } from "./igx-pinned-area-separator-component";
+import { ColumnOptionsIconAlignment_$type } from "./ColumnOptionsIconAlignment";
+import { ColumnOptionsIconBehavior_$type } from "./ColumnOptionsIconBehavior";
+import { fromRect } from "igniteui-angular-core";
+import { IgxColumnPinnedChangedEventArgs } from "./igx-column-pinned-changed-event-args";
+import { ControlDisplayDensity_$type } from "igniteui-angular-core";
+import { CornerRadius } from "igniteui-angular-core";
+import { EditModeType_$type } from "./EditModeType";
+import { EditModeClickAction_$type } from "./EditModeClickAction";
+import { IgxGridCellValueChangingEventArgs } from "./igx-grid-cell-value-changing-event-args";
+import { IgxGridDataCommittingEventArgs } from "./igx-grid-data-committing-event-args";
+import { IgxGridDataCommittedEventArgs } from "./igx-grid-data-committed-event-args";
+import { IgxGridSizeChangedEventArgs } from "./igx-grid-size-changed-event-args";
+import { IgxGridColumnsChangedEventArgs } from './igx-grid-columns-changed-event-args';
+import { IgxGridColumnWidthChangedEventArgs } from "./igx-grid-column-width-changed-event-args";
+import { IgxGridCellEditStartedEventArgs } from "./igx-grid-cell-edit-started-event-args";
+import { IgxGridCellEditEndedEventArgs } from "./igx-grid-cell-edit-ended-event-args";
+import { IgxGridRowEditStartedEventArgs } from "./igx-grid-row-edit-started-event-args";
+import { IgxGridRowEditEndedEventArgs } from "./igx-grid-row-edit-ended-event-args";
+import { IgxGridSelectionChangedEventArgs } from "./igx-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_$type } from "./FilterUIType";
+import { FilterLogicalOperator_$type } from "./FilterLogicalOperator";
+import { FilterComparisonType_$type } from "./FilterComparisonType";
+import { IgxGridCustomFilterRequestedEventArgs } from "./igx-grid-custom-filter-requested-event-args";
+import { ColumnGrouping } from "./ColumnGrouping";
+import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignment";
+import { IgxDataSourceRootSummariesChangedEventArgs } from "igniteui-angular-core";
+import * as i0 from "@angular/core";
+let GridStylingDefaults = {};
+export let IgxDataGridComponent = /*@__PURE__*/ (() => {
+    class IgxDataGridComponent {
+        constructor(_ngrenderer, _elRef, _ngZone, _componentFactoryResolver, _changeDetector, _injector) {
+            this._ngrenderer = _ngrenderer;
+            this._elRef = _elRef;
+            this._ngZone = _ngZone;
+            this._componentFactoryResolver = _componentFactoryResolver;
+            this._changeDetector = _changeDetector;
+            this._injector = _injector;
+            /**
+             * The columns actually present in the grid. Do not directly modify this array.
+             * This array's contents can be modified by causing Angular 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._columnsAdapter = null;
+            this._scroller = null;
+            this._dragger = null;
+            this._renderer = null;
+            this._grid = null;
+            this.containerResized = function () {
+                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();
+                }
+            };
+            this._dataSource = null;
+            this._insetLeft = 0;
+            this._insetTop = 0;
+            this._insetRight = 0;
+            this._insetBottom = 0;
+            this._isGroupByAreaVisible = 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._filterExpressionsChanged = null;
+            this._cellPreviewPointerDown = null;
+            this._cellPreviewPointerUp = null;
+            this._cellPointerDown = null;
+            this._cellPointerUp = null;
+            this._cellClicked = null;
+            this._sortDescriptionsChanged = null;
+            this._groupDescriptionsChanged = null;
+            this._summaryDescriptionsChanged = null;
+            this._columnHiddenChanged = null;
+            this._columnPinnedChanged = null;
+            this._cellValueChanging = null;
+            this._dataCommitted = null;
+            this._dataCommitting = null;
+            this._rootSummariesChanged = null;
+            this._sizeChanged = null;
+            this._actualColumnsChanged = null;
+            this._columnsAutoGenerated = null;
+            this._selectedItemsChanged = null;
+            this._selectedKeysChanged = null;
+            this._selectedCellsChanged = null;
+            this._selectionChanged = null;
+            this._activeCellChanged = null;
+            this._selectedCellRangesChanged = null;
+            this._columnWidthChanged = null;
+            this._cellEditStarted = null;
+            this._cellEditEnded = null;
+            this._rowEditStarted = null;
+            this._rowEditEnded = null;
+            this._customFilterRequested = null;
+            this._actualPrimaryKeyChange = null;
+            this._zoneRunner = null;
+            if (this._styling) {
+                NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+            }
+            let useCanvas = false;
+            this._zoneRunner = (act) => this._ngZone.run(act);
+            this._container = _ngrenderer.createElement("div");
+            _ngrenderer.appendChild(_elRef.element.nativeElement, this._container);
+            _ngrenderer.setStyle(this._container, "display", "block");
+            _ngrenderer.setStyle(this._container, "width", "100%");
+            _ngrenderer.setStyle(this._container, "height", "100%");
+            _ngrenderer.setStyle(this._container, "box-sizing", "border-box");
+            var root;
+            root = this._container;
+            if (this._container.nativeElement != null) {
+                root = this._container.nativeElement;
+            }
+            this._portalManager = new PortalManager("filterDialog", _componentFactoryResolver);
+            this._portalManager.detectChanges = () => {
+                this._changeDetector.detectChanges();
+            };
+            var ren = new AngularRenderer(root, this._ngrenderer, window.document, this._ngZone, true, DataGridStylingDefaults, this._portalManager);
+            this._renderer = ren;
+            this._implementation = new DataGrid();
+            var grid = this.i;
+            this._grid = grid;
+            this._grid.externalObject = this;
+            this._columnsAdapter = new CollectionAdapter([], this.i.columns, this.combinedColumns, (c) => c.i, (i) => {
+                i._provideRenderer(this._renderer);
+                if (this._elRef && this._elRef.element.nativeElement.parentElement) {
+                    i._styling(this._elRef.element.nativeElement, this, this);
+                }
+            }, (i) => { i._provideRenderer(null); });
+            grid.externalGrid = new GridExternalWrapper(this);
+            grid.tickProvider = new BrowserTickProvider(ren);
+            grid.platformPixelConverter = new BrowserPixelConverter();
+            this._contentLayout = new DataGridCellLayoutPanel(ren, new DataGridPresenterManager(this._grid, useCanvas), window.devicePixelRatio);
+            grid.renderingEngine = this._contentLayout;
+            grid.viewportManager = new DataGridViewportManager(this);
+            grid.delayedExecutionManager = new DataGridDelayedExecutionManager(ren);
+            grid.propertySetter = new DataGridPropertySetter();
+            //grid.provideContainer(ren);
+            let scroller = new Scroller();
+            this._scroller = scroller;
+            scroller.scrollbarStyle = this.scrollbarStyle;
+            scroller.provideContainer(ren);
+            this._content = (this._contentLayout.element.getNativeElement());
+            scroller.keyboardListener = new DataGridScrollerKeyboardListener(grid);
+            scroller.provideContent(new AngularWrapper(this._content, this._ngrenderer, this._ngZone));
+            scroller.onScrolling = () => this.onScroll();
+            scroller.onScrollStart = () => this.onScrollStart();
+            scroller.onScrollStop = () => this.onScrollStop();
+            scroller.viewportWidth = this._container.clientWidth;
+            scroller.viewportHeight = this._container.clientHeight;
+            scroller.verticalTrackStartInset = this.actualHeaderHeight;
+            grid.dragger = new Dragger();
+            grid.dragger.provideContainer(ren);
+            grid.dragger.viewportWidth = this._container.clientWidth;
+            grid.dragger.viewportHeight = this._container.clientHeight;
+            if (this._isGroupByAreaVisible == true) {
+                var groupContainer = this._ngrenderer.createElement("div");
+                var groupAreaContainer = this._ngrenderer.createElement("div");
+                groupContainer.append(groupAreaContainer);
+                groupContainer.setStyleProperty("width", "100%");
+                var groupRenderer = this._renderer.getSubRenderer(groupContainer);
+                this._container.append(groupRenderer.rootWrapper.getNativeElement());
+                let columnGrouping = new ColumnGrouping();
+                columnGrouping.targetGrid = this._grid;
+                columnGrouping.provideContainer(groupRenderer);
+                this.i.columnGrouping = columnGrouping;
+            }
+            ren.addSizeWatcher(() => {
+                this.containerResized();
+            });
+            this.i.syncBorder();
+            // supports angular themes or custom properties set in CSS 
+            //this._styling(_elRef.element.nativeElement, 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 IgxGridColumnCollection();
+                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;
+            this._ngrenderer.setStyle(this._elRef.element.nativeElement, "height", value);
+            this.containerResized();
+        }
+        get height() {
+            return this._height;
+        }
+        set width(value) {
+            this._width = value;
+            this._ngrenderer.setStyle(this._elRef.element.nativeElement, "width", value);
+            this.containerResized();
+        }
+        get width() {
+            return this._width;
+        }
+        _setScrollbarStyle(style) {
+            if (this._scroller) {
+                this._scroller.scrollbarStyle = style;
+            }
+        }
+        _setScrollbarColor(color) {
+            if (this._scroller) {
+                this._scroller.scrollbarBrush = color;
+            }
+        }
+        createImplementation() {
+            //let test = Grid;
+            return new DataGrid();
+        }
+        ngOnInit() {
+        }
+        get i() {
+            return this._implementation;
+        }
+        onImplementationCreated() {
+        }
+        _focusScroller() {
+            this._scroller.focus();
+        }
+        _setDefaultCursor() {
+            if (this._elRef.element.nativeElement.style.cursor !== "") {
+                this._elRef.element.nativeElement.style.cursor = "";
+            }
+        }
+        _setResizeCursor() {
+            if (this._elRef.element.nativeElement.style.cursor !== "col-resize") {
+                this._elRef.element.nativeElement.style.cursor = "col-resize";
+            }
+        }
+        _setHandCursor() {
+            if (this._elRef.element.nativeElement.style.cursor !== "grabbing") {
+                this._elRef.element.nativeElement.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.element.nativeElement.style.borderStyle = "solid";
+                    this._elRef.element.nativeElement.style.borderColor = borderColor;
+                    this._elRef.element.nativeElement.style.borderTopWidth = borderTop + "px";
+                    this._elRef.element.nativeElement.style.borderRightWidth = borderRight + "px";
+                    this._elRef.element.nativeElement.style.borderBottomWidth = borderBottom + "px";
+                    this._elRef.element.nativeElement.style.borderLeftWidth = borderLeft + "px";
+                    this._elRef.element.nativeElement.style.borderTopLeftRadius = radiusTopLeft + "px";
+                    this._elRef.element.nativeElement.style.borderTopRightRadius = radiusTopRight + "px";
+                    this._elRef.element.nativeElement.style.borderBottomLeftRadius = radiusBottomLeft + "px";
+                    this._elRef.element.nativeElement.style.borderBottomRightRadius = radiusBottomRight + "px";
+                }
+                else {
+                    this._elRef.element.nativeElement.style.borderStyle = "none";
+                }
+            }
+        }
+        _setScrollerVerticalTrackInset(inset) {
+            this._scroller.verticalTrackStartInset = inset;
+        }
+        _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);
+            }
+        }
+        ngAfterContentInit() {
+            let prev = this._grid.columnPropertyUpdatingAnimationMode;
+            this._grid.columnPropertyUpdatingAnimationMode = ColumnPropertyUpdatingAnimationMode.None;
+            this._styling(this._elRef.element.nativeElement, this);
+            this._grid.columnPropertyUpdatingAnimationMode = prev;
+            this._columnsAdapter.updateQuery(this.contentColumns);
+            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._elRef.element.nativeElement, this, this);
+            }
+            this._grid.columnPropertyUpdatingAnimationMode = prev;
+            this._grid.itemsSource = this._dataSource;
+        }
+        ngAfterViewInit() {
+            this._portalManager.dynamicContent = this._dynamicContent;
+        }
+        ngOnDestroy() {
+            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();
+                }
+            }
+        }
+        get actualDataSource() {
+            return this.i.actualDataSource;
+        }
+        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 IgxColumnWidth();
+                ext._implementation = this.i.defaultColumnWidth;
+            }
+            return ext;
+        }
+        set defaultColumnWidth(value) {
+            if (typeof value == "string") {
+                let int = ColumnWidth_internal.parse(value);
+                let ext = new IgxColumnWidth();
+                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 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;
+        }
+        /**
+     * 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 = IgxSectionHeaderComponent._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 = IgxSummaryRowRootComponent._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 = IgxSummaryRowSectionComponent._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 = IgxRowSeparatorComponent._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 = IgxHeaderRowSeparatorComponent._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 = IgxHeaderSeparatorComponent._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 = IgxColumnResizingSeparatorComponent._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 = IgxColumnMovingSeparatorComponent._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 = IgxPinnedAreaSeparatorComponent._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.
+        */
+        get defaultColumnMinWidth() {
+            return this.i.defaultColumnMinWidth;
+        }
+        set defaultColumnMinWidth(v) {
+            this.i.defaultColumnMinWidth = +v;
+        }
+        /**
+         * Gets the height used for the header row.
+        */
+        get actualHeaderHeight() {
+            return this.i.actualHeaderHeight;
+        }
+        set actualHeaderHeight(v) {
+            this.i.actualHeaderHeight = +v;
+        }
+        /**
+         * Gets or sets the height to use for the header row.
+        */
+        get headerHeight() {
+            return this.i.headerHeight;
+        }
+        set headerHeight(v) {
+            this.i.headerHeight = +v;
+        }
+        /**
+         * Returns/sets the action to take when a column header is clicked.
+        */
+        get headerClickAction() {
+            return this.i.headerClickAction;
+        }
+        set headerClickAction(v) {
+            this.i.headerClickAction = ensureEnum(HeaderClickAction_$type, v);
+        }
+        /**
+         * Gets or sets the type of edit mode
+        */
+        get editMode() {
+            return this.i.editMode;
+        }
+        set editMode(v) {
+            this.i.editMode = ensureEnum(EditModeType_$type, v);
+        }
+        /**
+         * Gets or sets the type of click action required to enter edit mode.
+        */
+        get editModeClickAction() {
+            return this.i.editModeClickAction;
+        }
+        set editModeClickAction(v) {
+            this.i.editModeClickAction = ensureEnum(EditModeClickAction_$type, v);
+        }
+        /**
+         * Gets or sets whether edit mode will begin as soon as you start typing while a cell is active.
+        */
+        get editOnKeyPress() {
+            return this.i.editOnKeyPress;
+        }
+        set editOnKeyPress(v) {
+            this.i.editOnKeyPress = ensureBool(v);
+        }
+        /**
+         * Configures whether or not the grid will autogenerate columns when the data source is set.
+        */
+        get autoGenerateColumns() {
+            return this.i.autoGenerateColumns;
+        }
+        set autoGenerateColumns(v) {
+            this.i.autoGenerateColumns = ensureBool(v);
+        }
+        /**
+         * Sets or gets the height to use for the row separators.
+        */
+        get rowSeparatorHeight() {
+            return this.i.rowSeparatorHeight;
+        }
+        set rowSeparatorHeight(v) {
+            this.i.rowSeparatorHeight = +v;
+        }
+        /**
+         * Configures whether or not place holders are used for cells who do not have their data yet.
+        */
+        get isPlaceholderRenderingEnabled() {
+            return this.i.isPlaceholderRenderingEnabled;
+        }
+        set isPlaceholderRenderingEnabled(v) {
+            this.i.isPlaceholderRenderingEnabled = ensureBool(v);
+        }
+        /**
+         * Sets or gets the Column Adding Animation mode to use.
+        */
+        get columnAddingAnimationMode() {
+            return this.i.columnAddingAnimationMode;
+        }
+        set columnAddingAnimationMode(v) {
+            this.i.columnAddingAnimationMode = ensureEnum(ColumnShowingAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the Column Property Updating Animation mode to use.
+        */
+        get columnPropertyUpdatingAnimationMode() {
+            return this.i.columnPropertyUpdatingAnimationMode;
+        }
+        set columnPropertyUpdatingAnimationMode(v) {
+            this.i.columnPropertyUpdatingAnimationMode = ensureEnum(ColumnPropertyUpdatingAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the cell data loaded animation mode to use.
+        */
+        get cellDataLoadedAnimationMode() {
+            return this.i.cellDataLoadedAnimationMode;
+        }
+        set cellDataLoadedAnimationMode(v) {
+            this.i.cellDataLoadedAnimationMode = ensureEnum(CellDataLoadedAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the row selection animation mode to use.
+        */
+        get rowSelectionAnimationMode() {
+            return this.i.rowSelectionAnimationMode;
+        }
+        set rowSelectionAnimationMode(v) {
+            this.i.rowSelectionAnimationMode = ensureEnum(RowSelectionAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the row hover animation mode to use.
+        */
+        get rowHoverAnimationMode() {
+            return this.i.rowHoverAnimationMode;
+        }
+        set rowHoverAnimationMode(v) {
+            this.i.rowHoverAnimationMode = ensureEnum(RowHoverAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the cell selection animation mode to use.
+        */
+        get cellSelectionAnimationMode() {
+            return this.i.cellSelectionAnimationMode;
+        }
+        set cellSelectionAnimationMode(v) {
+            this.i.cellSelectionAnimationMode = ensureEnum(CellSelectionAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the default animation settings for the grid.
+        */
+        get animationSettings() {
+            const r = this.i.animationSettings;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgxGridAnimationSettings();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        set animationSettings(v) {
+            v == null ? this.i.animationSettings = null : this.i.animationSettings = v.i;
+        }
+        /**
+         * Sets or gets the column resizing animation mode to use. Only applies when resizing in Deferred mode.
+        */
+        get columnResizingAnimationMode() {
+            return this.i.columnResizingAnimationMode;
+        }
+        set columnResizingAnimationMode(v) {
+            this.i.columnResizingAnimationMode = ensureEnum(ColumnResizingAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the column showing animation mode to use.
+        */
+        get columnShowingAnimationMode() {
+            return this.i.columnShowingAnimationMode;
+        }
+        set columnShowingAnimationMode(v) {
+            this.i.columnShowingAnimationMode = ensureEnum(ColumnShowingAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the column moving animation mode to use.
+        */
+        get columnMovingAnimationMode() {
+            return this.i.columnMovingAnimationMode;
+        }
+        set columnMovingAnimationMode(v) {
+            this.i.columnMovingAnimationMode = ensureEnum(ColumnMovingAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the column hiding animation mode to use.
+        */
+        get columnHidingAnimationMode() {
+            return this.i.columnHidingAnimationMode;
+        }
+        set columnHidingAnimationMode(v) {
+            this.i.columnHidingAnimationMode = ensureEnum(ColumnHidingAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the column exchanging animation mode to use.
+        */
+        get columnExchangingAnimationMode() {
+            return this.i.columnExchangingAnimationMode;
+        }
+        set columnExchangingAnimationMode(v) {
+            this.i.columnExchangingAnimationMode = ensureEnum(ColumnExchangingAnimationMode_$type, v);
+        }
+        /**
+         * Sets or gets the grid selection mode.
+        */
+        get selectionMode() {
+            return this.i.selectionMode;
+        }
+        set selectionMode(v) {
+            this.i.selectionMode = ensureEnum(DataGridSelectionMode_$type, v);
+        }
+        /**
+         * Sets or gets the grid selection mode.
+        */
+        get activationMode() {
+            return this.i.activationMode;
+        }
+        set activationMode(v) {
+            this.i.activationMode = ensureEnum(GridActivationMode_$type, v);
+        }
+        /**
+         * Sets or gets how selection behaves in the grid.
+        */
+        get selectionBehavior() {
+            return this.i.selectionBehavior;
+        }
+        set selectionBehavior(v) {
+            this.i.selectionBehavior = ensureEnum(GridSelectionBehavior_$type, v);
+        }
+        /**
+         * Gets or sets the ability to select rows or cells via mouse dragging. Currently only applies when SelectionMode is MultipleRow or RangeCell.
+        */
+        get mouseDragSelectionEnabled() {
+            return this.i.mouseDragSelectionEnabled;
+        }
+        set mouseDragSelectionEnabled(v) {
+            this.i.mouseDragSelectionEnabled = ensureBool(v);
+        }
+        /**
+         * Gets which items are currently selected in the grid. Collection can be updated to programatically select items.
+        */
+        get selectedItems() {
+            if (this._selectedItems === null) {
+                let coll = new IgxGridSelectedItemsCollection();
+                let innerColl = this.i.selectedItems;
+                if (!innerColl) {
+                    innerColl = new GridSelectedItemsCollection_internal();
+                }
+                this._selectedItems = coll._fromInner(innerColl);
+            }
+            return this._selectedItems;
+        }
+        set selectedItems(v) {
+            if (this._selectedItems !== null) {
+                this._selectedItems._setSyncTarget(null);
+                this._selectedItems = null;
+            }
+            let coll = new IgxGridSelectedItemsCollection();
+            this._selectedItems = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(Base.$type);
+            let innerColl = this.i.selectedItems;
+            if (!innerColl) {
+                innerColl = new GridSelectedItemsCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._selectedItems._setSyncTarget(syncColl);
+        }
+        /**
+         * Gets which primary key values are currently selected in the grid. Collection can be updated to programatically select items.
+        */
+        get selectedKeys() {
+            if (this._selectedKeys === null) {
+                let coll = new IgxGridSelectedKeysCollection();
+                let innerColl = this.i.selectedKeys;
+                if (!innerColl) {
+                    innerColl = new GridSelectedKeysCollection_internal();
+                }
+                this._selectedKeys = coll._fromInner(innerColl);
+            }
+            return this._selectedKeys;
+        }
+        set selectedKeys(v) {
+            if (this._selectedKeys !== null) {
+                this._selectedKeys._setSyncTarget(null);
+                this._selectedKeys = null;
+            }
+            let coll = new IgxGridSelectedKeysCollection();
+            this._selectedKeys = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(PrimaryKeyValue.$type);
+            let innerColl = this.i.selectedKeys;
+            if (!innerColl) {
+                innerColl = new GridSelectedKeysCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._selectedKeys._setSyncTarget(syncColl);
+        }
+        /**
+         * Gets which cells are currently selected in the grid. Collection can be updated to programatically select cells.
+        */
+        get selectedCells() {
+            if (this._selectedCells === null) {
+                let coll = new IgxGridSelectedCellsCollection();
+                let innerColl = this.i.selectedCells;
+                if (!innerColl) {
+                    innerColl = new GridSelectedCellsCollection_internal();
+                }
+                this._selectedCells = coll._fromInner(innerColl);
+            }
+            return this._selectedCells;
+        }
+        set selectedCells(v) {
+            if (this._selectedCells !== null) {
+                this._selectedCells._setSyncTarget(null);
+                this._selectedCells = null;
+            }
+            let coll = new IgxGridSelectedCellsCollection();
+            this._selectedCells = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(CellKey.$type);
+            let innerColl = this.i.selectedCells;
+            if (!innerColl) {
+                innerColl = new GridSelectedCellsCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._selectedCells._setSyncTarget(syncColl);
+        }
+        /**
+         * Gets which cell ranges are currently selected in the grid. Collection can be updated to programatically select cells.
+        */
+        get selectedCellRanges() {
+            if (this._selectedCellRanges === null) {
+                let coll = new IgxGridSelectedCellRangesCollection();
+                let innerColl = this.i.selectedCellRanges;
+                if (!innerColl) {
+                    innerColl = new GridSelectedCellRangesCollection_internal();
+                }
+                this._selectedCellRanges = coll._fromInner(innerColl);
+            }
+            return this._selectedCellRanges;
+        }
+        set selectedCellRanges(v) {
+            if (this._selectedCellRanges !== null) {
+                this._selectedCellRanges._setSyncTarget(null);
+                this._selectedCellRanges = null;
+            }
+            let coll = new IgxGridSelectedCellRangesCollection();
+            this._selectedCellRanges = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(CellRange.$type);
+            let innerColl = this.i.selectedCellRanges;
+            if (!innerColl) {
+                innerColl = new GridSelectedCellRangesCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._selectedCellRanges._setSyncTarget(syncColl);
+        }
+        /**
+         * Gets which items are currently pinned in the grid. Collection can be updated to programatically pin items.
+        */
+        get pinnedItems() {
+            if (this._pinnedItems === null) {
+                let coll = new IgxGridSelectedItemsCollection();
+                let innerColl = this.i.pinnedItems;
+                if (!innerColl) {
+                    innerColl = new GridSelectedItemsCollection_internal();
+                }
+                this._pinnedItems = coll._fromInner(innerColl);
+            }
+            return this._pinnedItems;
+        }
+        set pinnedItems(v) {
+            if (this._pinnedItems !== null) {
+                this._pinnedItems._setSyncTarget(null);
+                this._pinnedItems = null;
+            }
+            let coll = new IgxGridSelectedItemsCollection();
+            this._pinnedItems = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(Base.$type);
+            let innerColl = this.i.pinnedItems;
+            if (!innerColl) {
+                innerColl = new GridSelectedItemsCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._pinnedItems._setSyncTarget(syncColl);
+        }
+        /**
+         * Gets which primary keys are currently pinned in the grid. Collection can be updated to programatically pin items.
+        */
+        get pinnedKeys() {
+            if (this._pinnedKeys === null) {
+                let coll = new IgxGridSelectedKeysCollection();
+                let innerColl = this.i.pinnedKeys;
+                if (!innerColl) {
+                    innerColl = new GridSelectedKeysCollection_internal();
+                }
+                this._pinnedKeys = coll._fromInner(innerColl);
+            }
+            return this._pinnedKeys;
+        }
+        set pinnedKeys(v) {
+            if (this._pinnedKeys !== null) {
+                this._pinnedKeys._setSyncTarget(null);
+                this._pinnedKeys = null;
+            }
+            let coll = new IgxGridSelectedKeysCollection();
+            this._pinnedKeys = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(PrimaryKeyValue.$type);
+            let innerColl = this.i.pinnedKeys;
+            if (!innerColl) {
+                innerColl = new GridSelectedKeysCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._pinnedKeys._setSyncTarget(syncColl);
+        }
+        /**
+         * Gets or sets whether to show the column options UI in the headers for columns.
+        */
+        get isColumnOptionsEnabled() {
+            return this.i.isColumnOptionsEnabled;
+        }
+        set isColumnOptionsEnabled(v) {
+            this.i.isColumnOptionsEnabled = ensureBool(v);
+        }
+        /**
+         * Gets or sets if group rows will stick to the top of the grid.
+        */
+        get isGroupRowSticky() {
+            return this.i.isGroupRowSticky;
+        }
+        set isGroupRowSticky(v) {
+            this.i.isGroupRowSticky = ensureBool(v);
+        }
+        /**
+         * Gets or sets if header separators are rendered.
+        */
+        get isHeaderSeparatorVisible() {
+            return this.i.isHeaderSeparatorVisible;
+        }
+        set isHeaderSeparatorVisible(v) {
+            this.i.isHeaderSeparatorVisible = ensureBool(v);
+        }
+        /**
+         * Gets or sets the default background color to use for content cells when a row is in a selected state
+        */
+        get cellSelectedBackground() {
+            return brushToString(this.i.cellSelectedBackground);
+        }
+        set cellSelectedBackground(v) {
+            this.i.cellSelectedBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default background color to use for section header cells when a row is in a selected state
+        */
+        get sectionHeaderSelectedBackground() {
+            return brushToString(this.i.sectionHeaderSelectedBackground);
+        }
+        set sectionHeaderSelectedBackground(v) {
+            this.i.sectionHeaderSelectedBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default background color to use for summary cells at the root level.
+        */
+        get summaryRootBackground() {
+            return brushToString(this.i.summaryRootBackground);
+        }
+        set summaryRootBackground(v) {
+            this.i.summaryRootBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default background color to use for summary cells at the section level.
+        */
+        get summarySectionBackground() {
+            return brushToString(this.i.summarySectionBackground);
+        }
+        set summarySectionBackground(v) {
+            this.i.summarySectionBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default opacity to use for pinned rows
+        */
+        get pinnedRowOpacity() {
+            return this.i.pinnedRowOpacity;
+        }
+        set pinnedRowOpacity(v) {
+            this.i.pinnedRowOpacity = +v;
+        }
+        /**
+         * Gets or sets the font to use for cells that have been edited.
+        */
+        get editTextStyle() {
+            if (this.i.editTextStyle == null) {
+                return null;
+            }
+            return this.i.editTextStyle.fontString;
+        }
+        set editTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.editTextStyle = fi;
+        }
+        /**
+         * Gets or sets the default opacity for unsaved cell edits.
+        */
+        get editOpacity() {
+            return this.i.editOpacity;
+        }
+        set editOpacity(v) {
+            this.i.editOpacity = +v;
+        }
+        /**
+         * Gets or sets the text color for unsaved deleted rows.
+        */
+        get deletedTextColor() {
+            return brushToString(this.i.deletedTextColor);
+        }
+        set deletedTextColor(v) {
+            this.i.deletedTextColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default color to use for sticky rows
+        */
+        get stickyRowBackground() {
+            return brushToString(this.i.stickyRowBackground);
+        }
+        set stickyRowBackground(v) {
+            this.i.stickyRowBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default color to use for pinned rows
+        */
+        get pinnedRowBackground() {
+            return brushToString(this.i.pinnedRowBackground);
+        }
+        set pinnedRowBackground(v) {
+            this.i.pinnedRowBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default color to use for the last sticky row
+        */
+        get lastStickyRowBackground() {
+            return brushToString(this.i.lastStickyRowBackground);
+        }
+        set lastStickyRowBackground(v) {
+            this.i.lastStickyRowBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the position of the active cell.
+        */
+        get activeCell() {
+            const r = this.i.activeCell;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgxGridCellPosition();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        set activeCell(v) {
+            v == null ? this.i.activeCell = null : this.i.activeCell = v.i;
+        }
+        /**
+         * Gets or sets the default background color to use for content cells
+        */
+        get cellBackground() {
+            return brushToString(this.i.cellBackground);
+        }
+        set cellBackground(v) {
+            this.i.cellBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default text color to use for content cells
+        */
+        get cellTextColor() {
+            return brushToString(this.i.cellTextColor);
+        }
+        set cellTextColor(v) {
+            this.i.cellTextColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default text color to use for content cells
+        */
+        get headerSortIndicatorColor() {
+            return brushToString(this.i.headerSortIndicatorColor);
+        }
+        set headerSortIndicatorColor(v) {
+            this.i.headerSortIndicatorColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default render style for sort indicators in header cells.
+        */
+        get headerSortIndicatorStyle() {
+            return this.i.headerSortIndicatorStyle;
+        }
+        set headerSortIndicatorStyle(v) {
+            this.i.headerSortIndicatorStyle = ensureEnum(SortIndicatorStyle_$type, v);
+        }
+        /**
+         * Gets or sets the font to use for content cells
+        */
+        get cellTextStyle() {
+            if (this.i.cellTextStyle == null) {
+                return null;
+            }
+            return this.i.cellTextStyle.fontString;
+        }
+        set cellTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.cellTextStyle = fi;
+        }
+        /**
+         * Gets or sets the default background color to use for section header cells
+        */
+        get sectionHeaderBackground() {
+            return brushToString(this.i.sectionHeaderBackground);
+        }
+        set sectionHeaderBackground(v) {
+            this.i.sectionHeaderBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default text color to use for section header cells
+        */
+        get sectionHeaderTextColor() {
+            return brushToString(this.i.sectionHeaderTextColor);
+        }
+        set sectionHeaderTextColor(v) {
+            this.i.sectionHeaderTextColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the font to use for section header cells
+        */
+        get sectionHeaderTextStyle() {
+            if (this.i.sectionHeaderTextStyle == null) {
+                return null;
+            }
+            return this.i.sectionHeaderTextStyle.fontString;
+        }
+        set sectionHeaderTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.sectionHeaderTextStyle = fi;
+        }
+        /**
+         * Gets or sets the font to use for summary labels at the root level.
+        */
+        get summaryRootLabelTextStyle() {
+            if (this.i.summaryRootLabelTextStyle == null) {
+                return null;
+            }
+            return this.i.summaryRootLabelTextStyle.fontString;
+        }
+        set summaryRootLabelTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.summaryRootLabelTextStyle = fi;
+        }
+        /**
+         * Gets or sets the font to use for summary labels at the section level.
+        */
+        get summarySectionLabelTextStyle() {
+            if (this.i.summarySectionLabelTextStyle == null) {
+                return null;
+            }
+            return this.i.summarySectionLabelTextStyle.fontString;
+        }
+        set summarySectionLabelTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.summarySectionLabelTextStyle = fi;
+        }
+        /**
+         * Gets or sets the default text color to use for summary cells at the root level.
+        */
+        get summaryRootValueTextColor() {
+            return brushToString(this.i.summaryRootValueTextColor);
+        }
+        set summaryRootValueTextColor(v) {
+            this.i.summaryRootValueTextColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the font to use for summary values at the root level.
+        */
+        get summaryRootValueTextStyle() {
+            if (this.i.summaryRootValueTextStyle == null) {
+                return null;
+            }
+            return this.i.summaryRootValueTextStyle.fontString;
+        }
+        set summaryRootValueTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.summaryRootValueTextStyle = fi;
+        }
+        /**
+         * Gets or sets the font to use for summary values at the section level.
+        */
+        get summarySectionValueTextStyle() {
+            if (this.i.summarySectionValueTextStyle == null) {
+                return null;
+            }
+            return this.i.summarySectionValueTextStyle.fontString;
+        }
+        set summarySectionValueTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.summarySectionValueTextStyle = fi;
+        }
+        /**
+         * Gets or sets the default text color to use for summary cells at the section level.
+        */
+        get summarySectionValueTextColor() {
+            return brushToString(this.i.summarySectionValueTextColor);
+        }
+        set summarySectionValueTextColor(v) {
+            this.i.summarySectionValueTextColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default text color to use for summary labels in summary cells at the root level.
+        */
+        get summaryRootLabelTextColor() {
+            return brushToString(this.i.summaryRootLabelTextColor);
+        }
+        set summaryRootLabelTextColor(v) {
+            this.i.summaryRootLabelTextColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default text color to use for summary labels in summary cells at the section level.
+        */
+        get summarySectionLabelTextColor() {
+            return brushToString(this.i.summarySectionLabelTextColor);
+        }
+        set summarySectionLabelTextColor(v) {
+            this.i.summarySectionLabelTextColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default background color to use for summary cells at the root level.
+        */
+        get summaryRootSelectedBackground() {
+            return brushToString(this.i.summaryRootSelectedBackground);
+        }
+        set summaryRootSelectedBackground(v) {
+            this.i.summaryRootSelectedBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default background color to use for summary cells at the section level.
+        */
+        get summarySectionSelectedBackground() {
+            return brushToString(this.i.summarySectionSelectedBackground);
+        }
+        set summarySectionSelectedBackground(v) {
+            this.i.summarySectionSelectedBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the width of the pinned area separators.
+        */
+        get pinnedAreaSeparatorWidth() {
+            return this.i.pinnedAreaSeparatorWidth;
+        }
+        set pinnedAreaSeparatorWidth(v) {
+            this.i.pinnedAreaSeparatorWidth = +v;
+        }
+        /**
+         * Gets or sets the width of the header separators.
+        */
+        get headerSeparatorWidth() {
+            return this.i.headerSeparatorWidth;
+        }
+        set headerSeparatorWidth(v) {
+            this.i.headerSeparatorWidth = +v;
+        }
+        /**
+         * Gets or sets the default background color to use for header separators.
+        */
+        get headerSeparatorBackground() {
+            return brushToString(this.i.headerSeparatorBackground);
+        }
+        set headerSeparatorBackground(v) {
+            this.i.headerSeparatorBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default background color to use for header cells
+        */
+        get headerBackground() {
+            return brushToString(this.i.headerBackground);
+        }
+        set headerBackground(v) {
+            this.i.headerBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default text color to use for header cells
+        */
+        get headerTextColor() {
+            return brushToString(this.i.headerTextColor);
+        }
+        set headerTextColor(v) {
+            this.i.headerTextColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the font to use for header cells
+        */
+        get headerTextStyle() {
+            if (this.i.headerTextStyle == null) {
+                return null;
+            }
+            return this.i.headerTextStyle.fontString;
+        }
+        set headerTextStyle(v) {
+            let fi = new FontInfo();
+            fi.fontString = v;
+            this.i.headerTextStyle = fi;
+        }
+        /**
+         * Gets or sets the default background color to use for row separators
+        */
+        get rowSeparatorBackground() {
+            return brushToString(this.i.rowSeparatorBackground);
+        }
+        set rowSeparatorBackground(v) {
+            this.i.rowSeparatorBackground = stringToBrush(v);
+        }
+        get headerRowSeparatorBackground() {
+            return brushToString(this.i.headerRowSeparatorBackground);
+        }
+        set headerRowSeparatorBackground(v) {
+            this.i.headerRowSeparatorBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default sticky row background color to use for row separators
+        */
+        get rowSeparatorStickyRowBackground() {
+            return brushToString(this.i.rowSeparatorStickyRowBackground);
+        }
+        set rowSeparatorStickyRowBackground(v) {
+            this.i.rowSeparatorStickyRowBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default last sticky row background color to use for row separators
+        */
+        get rowSeparatorLastStickyRowBackground() {
+            return brushToString(this.i.rowSeparatorLastStickyRowBackground);
+        }
+        set rowSeparatorLastStickyRowBackground(v) {
+            this.i.rowSeparatorLastStickyRowBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the pinned row background color to use for row separators
+        */
+        get rowSeparatorPinnedRowBackground() {
+            return brushToString(this.i.rowSeparatorPinnedRowBackground);
+        }
+        set rowSeparatorPinnedRowBackground(v) {
+            this.i.rowSeparatorPinnedRowBackground = stringToBrush(v);
+        }
+        /**
+         * Sets or gets the width to use for the column resizing separator.
+        */
+        get columnResizingSeparatorWidth() {
+            return this.i.columnResizingSeparatorWidth;
+        }
+        set columnResizingSeparatorWidth(v) {
+            this.i.columnResizingSeparatorWidth = +v;
+        }
+        /**
+         * Gets or sets the opacity of the column Resizing separator.
+        */
+        get columnResizingSeparatorOpacity() {
+            return this.i.columnResizingSeparatorOpacity;
+        }
+        set columnResizingSeparatorOpacity(v) {
+            this.i.columnResizingSeparatorOpacity = +v;
+        }
+        /**
+         * Sets or gets the width to use for the column resizing separator.
+        */
+        get columnMovingSeparatorWidth() {
+            return this.i.columnMovingSeparatorWidth;
+        }
+        set columnMovingSeparatorWidth(v) {
+            this.i.columnMovingSeparatorWidth = +v;
+        }
+        /**
+         * Gets or sets the opacity of the column moving separator.
+        */
+        get columnMovingSeparatorOpacity() {
+            return this.i.columnMovingSeparatorOpacity;
+        }
+        set columnMovingSeparatorOpacity(v) {
+            this.i.columnMovingSeparatorOpacity = +v;
+        }
+        /**
+         * Gets or sets the default background color to use for column resizing separator.
+        */
+        get columnResizingSeparatorBackground() {
+            return brushToString(this.i.columnResizingSeparatorBackground);
+        }
+        set columnResizingSeparatorBackground(v) {
+            this.i.columnResizingSeparatorBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the default background color to use for column moving separator.
+        */
+        get columnMovingSeparatorBackground() {
+            return brushToString(this.i.columnMovingSeparatorBackground);
+        }
+        set columnMovingSeparatorBackground(v) {
+            this.i.columnMovingSeparatorBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets if the section header content should be shifted into the normal column scrollable area when there are pinned columns
+        */
+        get shiftSectionContent() {
+            return this.i.shiftSectionContent;
+        }
+        set shiftSectionContent(v) {
+            this.i.shiftSectionContent = ensureBool(v);
+        }
+        /**
+         * Gets or sets the column options icon alignment in header cells.
+        */
+        get columnOptionsIconAlignment() {
+            return this.i.columnOptionsIconAlignment;
+        }
+        set columnOptionsIconAlignment(v) {
+            this.i.columnOptionsIconAlignment = ensureEnum(ColumnOptionsIconAlignment_$type, v);
+        }
+        /**
+         * Gets or sets the column options icon color in header cells.
+        */
+        get columnOptionsIconColor() {
+            return brushToString(this.i.columnOptionsIconColor);
+        }
+        set columnOptionsIconColor(v) {
+            this.i.columnOptionsIconColor = stringToBrush(v);
+        }
+        /**
+         * Gets or sets how the column options icon will behave inside header cells.
+        */
+        get columnOptionsIconBehavior() {
+            return this.i.columnOptionsIconBehavior;
+        }
+        set columnOptionsIconBehavior(v) {
+            this.i.columnOptionsIconBehavior = ensureEnum(ColumnOptionsIconBehavior_$type, v);
+        }
+        /**
+         * Gets or sets the border color around the grid.
+        */
+        get border() {
+            return brushToString(this.i.border);
+        }
+        set border(v) {
+            this.i.border = stringToBrush(v);
+        }
+        /**
+         * Gets the actual border width.
+        */
+        get actualBorderWidth() {
+            return this.i.actualBorderWidth;
+        }
+        set actualBorderWidth(v) {
+            this.i.actualBorderWidth = v;
+        }
+        get borderWidthBottom() {
+            return this.i.borderWidth ? this.i.borderWidth.bottom : NaN;
+        }
+        set borderWidthBottom(v) {
+            this.ensureBorderWidth();
+            this.i.borderWidth.bottom = +v;
+            this.i.borderWidth = this.i.borderWidth;
+        }
+        get borderWidthLeft() {
+            return this.i.borderWidth ? this.i.borderWidth.left : NaN;
+        }
+        set borderWidthLeft(v) {
+            this.ensureBorderWidth();
+            this.i.borderWidth.left = +v;
+            this.i.borderWidth = this.i.borderWidth;
+        }
+        get borderWidthRight() {
+            return this.i.borderWidth ? this.i.borderWidth.right : NaN;
+        }
+        set borderWidthRight(v) {
+            this.ensureBorderWidth();
+            this.i.borderWidth.right = +v;
+            this.i.borderWidth = this.i.borderWidth;
+        }
+        get borderWidthTop() {
+            return this.i.borderWidth ? this.i.borderWidth.top : NaN;
+        }
+        set borderWidthTop(v) {
+            this.ensureBorderWidth();
+            this.i.borderWidth.top = +v;
+            this.i.borderWidth = this.i.borderWidth;
+        }
+        ensureBorderWidth() {
+            if (this.i.borderWidth) {
+                return;
+            }
+            this.i.borderWidth = new Thickness(2);
+        }
+        /**
+         * Gets or sets if the grid should notify on programmatic selection changes as well as changes from the UI.
+        */
+        get notifyOnAllSelectionChanges() {
+            return this.i.notifyOnAllSelectionChanges;
+        }
+        set notifyOnAllSelectionChanges(v) {
+            this.i.notifyOnAllSelectionChanges = ensureBool(v);
+        }
+        get cornerRadiusBottomRight() {
+            return this.i.cornerRadius ? this.i.cornerRadius.c : NaN;
+        }
+        set cornerRadiusBottomRight(v) {
+            this.ensureCornerRadius();
+            this.i.cornerRadius.c = +v;
+            this.i.cornerRadius = this.i.cornerRadius;
+        }
+        get cornerRadiusBottomLeft() {
+            return this.i.cornerRadius ? this.i.cornerRadius.b : NaN;
+        }
+        set cornerRadiusBottomLeft(v) {
+            this.ensureCornerRadius();
+            this.i.cornerRadius.b = +v;
+            this.i.cornerRadius = this.i.cornerRadius;
+        }
+        get cornerRadiusTopLeft() {
+            return this.i.cornerRadius ? this.i.cornerRadius.d : NaN;
+        }
+        set cornerRadiusTopLeft(v) {
+            this.ensureCornerRadius();
+            this.i.cornerRadius.d = +v;
+            this.i.cornerRadius = this.i.cornerRadius;
+        }
+        get cornerRadiusTopRight() {
+            return this.i.cornerRadius ? this.i.cornerRadius.e : NaN;
+        }
+        set cornerRadiusTopRight(v) {
+            this.ensureCornerRadius();
+            this.i.cornerRadius.e = +v;
+            this.i.cornerRadius = this.i.cornerRadius;
+        }
+        ensureCornerRadius() {
+            if (this.i.cornerRadius) {
+                return;
+            }
+            this.i.cornerRadius = new CornerRadius(2);
+        }
+        get actualCornerRadiusBottomRight() {
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.c : NaN;
+        }
+        set actualCornerRadiusBottomRight(v) {
+            this.ensureActualCornerRadius();
+            this.i.actualCornerRadius.c = +v;
+            this.i.actualCornerRadius = this.i.actualCornerRadius;
+        }
+        get actualCornerRadiusBottomLeft() {
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.b : NaN;
+        }
+        set actualCornerRadiusBottomLeft(v) {
+            this.ensureActualCornerRadius();
+            this.i.actualCornerRadius.b = +v;
+            this.i.actualCornerRadius = this.i.actualCornerRadius;
+        }
+        get actualCornerRadiusTopLeft() {
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.d : NaN;
+        }
+        set actualCornerRadiusTopLeft(v) {
+            this.ensureActualCornerRadius();
+            this.i.actualCornerRadius.d = +v;
+            this.i.actualCornerRadius = this.i.actualCornerRadius;
+        }
+        get actualCornerRadiusTopRight() {
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.e : NaN;
+        }
+        set actualCornerRadiusTopRight(v) {
+            this.ensureActualCornerRadius();
+            this.i.actualCornerRadius.e = +v;
+            this.i.actualCornerRadius = this.i.actualCornerRadius;
+        }
+        ensureActualCornerRadius() {
+            if (this.i.actualCornerRadius) {
+                return;
+            }
+            this.i.actualCornerRadius = new CornerRadius(2);
+        }
+        /**
+         * Gets or sets whether the active cell style will be applied to cells when made active.
+        */
+        get isActiveCellStyleEnabled() {
+            return this.i.isActiveCellStyleEnabled;
+        }
+        set isActiveCellStyleEnabled(v) {
+            this.i.isActiveCellStyleEnabled = ensureBool(v);
+        }
+        /**
+         * A set of states that can be applied to the columns of the grid based on available space.
+        */
+        get responsiveStates() {
+            if (this._responsiveStates === null) {
+                let coll = new IgxResponsiveStatesCollection();
+                let innerColl = this.i.responsiveStates;
+                if (!innerColl) {
+                    innerColl = new ResponsiveStatesCollection_internal();
+                }
+                this._responsiveStates = coll._fromInner(innerColl);
+            }
+            return this._responsiveStates;
+        }
+        set responsiveStates(v) {
+            if (this._responsiveStates !== null) {
+                this._responsiveStates._setSyncTarget(null);
+                this._responsiveStates = null;
+            }
+            let coll = new IgxResponsiveStatesCollection();
+            this._responsiveStates = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(ResponsiveState.$type);
+            let innerColl = this.i.responsiveStates;
+            if (!innerColl) {
+                innerColl = new ResponsiveStatesCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._responsiveStates._setSyncTarget(syncColl);
+        }
+        /**
+         * Gets the region of the grid that is visible.
+        */
+        get actualVisibleRegion() {
+            return fromRect(this.i.actualVisibleRegion);
+        }
+        /**
+         * Gets the current sort that is applied to the grid. Collection can be updated to modify the sort for the grid. Once sort descriptions are in this collection, the grid will no longer listen for changes on their properties.
+        */
+        get initialSortDescriptions() {
+            const r = this.i.initialSortDescriptions;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgxColumnSortDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the current sort that is applied to the grid. Collection can be updated to modify the sort for the grid. Once sort descriptions are in this collection, the grid will no longer listen for changes on their properties.
+        */
+        get initialGroupDescriptions() {
+            const r = this.i.initialGroupDescriptions;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgxColumnGroupDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the current summaries that are applied to the grid.
+        */
+        get initialSummaryDescriptions() {
+            const r = this.i.initialSummaryDescriptions;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgxColumnSummaryDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        get initialSorts() {
+            return this.i.initialSorts;
+        }
+        set initialSorts(v) {
+            this.i.initialSorts = v;
+        }
+        get initialGroups() {
+            return this.i.initialGroups;
+        }
+        set initialGroups(v) {
+            this.i.initialGroups = v;
+        }
+        get initialSummaries() {
+            return this.i.initialSummaries;
+        }
+        set initialSummaries(v) {
+            this.i.initialSummaries = v;
+        }
+        /**
+         * Gets the current sort that is applied to the grid. Collection can be updated to modify the sort for the grid. Once sort descriptions are in this collection, the grid will no longer listen for changes on their properties.
+        */
+        get sortDescriptions() {
+            const r = this.i.sortDescriptions;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgxColumnSortDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the current grouping that is applied to the grid. Collection can be updated to modify the grouping for the grid. Once grouping descriptions are in this collection, the grid will no longer listen for changes on their properties.
+        */
+        get groupDescriptions() {
+            const r = this.i.groupDescriptions;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgxColumnGroupDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the current filter that is applied to the grid. Collection can be updated to modify the filter for the grid. Once filter expresisons are in this collection, the grid will no longer listen for changes on their properties.
+        */
+        get filterExpressions() {
+            const r = this.i.filterExpressions;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgxFilterExpressionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets the current summaries that are applied to the grid.
+        */
+        get summaryDescriptions() {
+            const r = this.i.summaryDescriptions;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                let e = new IgxColumnSummaryDescriptionCollection();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        }
+        /**
+         * Gets or sets the scope which summaries are calculated for.
+        */
+        get summaryScope() {
+            return this.i.summaryScope;
+        }
+        set summaryScope(v) {
+            this.i.summaryScope = ensureEnum(SummaryScope_$type, v);
+        }
+        /**
+         * Gets or sets whether group headers are collapsable.
+        */
+        get isGroupCollapsable() {
+            return this.i.isGroupCollapsable;
+        }
+        set isGroupCollapsable(v) {
+            this.i.isGroupCollapsable = ensureBool(v);
+        }
+        /**
+         * Gets or sets how group headers are displayed when there are multiple groups defined in the grid.
+        */
+        get groupHeaderDisplayMode() {
+            return this.i.groupHeaderDisplayMode;
+        }
+        set groupHeaderDisplayMode(v) {
+            this.i.groupHeaderDisplayMode = ensureEnum(GroupHeaderDisplayMode_$type, v);
+        }
+        /**
+         * Gets or sets whether groups are expanded or collapsed by default.
+        */
+        get isGroupExpandedDefault() {
+            return this.i.isGroupExpandedDefault;
+        }
+        set isGroupExpandedDefault(v) {
+            this.i.isGroupExpandedDefault = ensureBool(v);
+        }
+        /**
+         * Gets or sets the display mode summaries will use inside groups.
+        */
+        get groupSummaryDisplayMode() {
+            return this.i.groupSummaryDisplayMode;
+        }
+        set groupSummaryDisplayMode(v) {
+            this.i.groupSummaryDisplayMode = ensureEnum(GroupSummaryDisplayMode_$type, v);
+        }
+        /**
+         * Gets or sets whether to automatically accept edits or require explicit acceptance or rejections of edits
+         * when handling the CellValueChanging or DataCommitting events.
+         * When True, nothing is required on the part of the developer in order for edits to be accepted. In
+         * order to validate and reject a user cell edit you must explicitly handle the CellValueChanging event
+         * and call the RejectEdit method using the edit ID provided by the event. In order to reject a whole
+         * commit you need to handle the DataComitting event and explicitly call the RejectCommit method using
+         * the commit ID provided by the event.
+         * When False, cell edits are not immediately accepted until you explicitly call the AcceptEdit method
+         * using the edit ID provided by the CellValueChanging event. If you do not handle this event then edits
+         * will be auto accepted.
+        */
+        get autoAcceptEdits() {
+            return this.i.autoAcceptEdits;
+        }
+        set autoAcceptEdits(v) {
+            this.i.autoAcceptEdits = ensureBool(v);
+        }
+        /**
+         * Sets or gets the user provided primary key to assume for the data. Certain functionality of the grid requires a way to uniquely identify items in order to work correctly.
+         * If a primary key cannot be inferred from the data source, you may need to provide one here.
+        */
+        get primaryKey() {
+            return this.i.primaryKey;
+        }
+        set primaryKey(v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                const re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.primaryKey = v;
+        }
+        /**
+         * Gets either the inferred primary key from the data source, or the user provided primary key, if present. Represents the actual primary key that the grid will use in operations that require it.
+        */
+        get actualPrimaryKey() {
+            return this.i.actualPrimaryKey;
+        }
+        set actualPrimaryKey(v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                const re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
+            this.i.actualPrimaryKey = v;
+        }
+        get actualColumns() {
+            if (this._actualColumns === null) {
+                let coll = new IgxGridColumnCollection();
+                let innerColl = this.i.actualColumns;
+                if (!innerColl) {
+                    innerColl = new GridColumnCollection_internal();
+                }
+                this._actualColumns = coll._fromInner(innerColl);
+            }
+            return this._actualColumns;
+        }
+        set actualColumns(v) {
+            if (this._actualColumns !== null) {
+                this._actualColumns._setSyncTarget(null);
+                this._actualColumns = null;
+            }
+            let coll = new IgxGridColumnCollection();
+            this._actualColumns = coll._fromOuter(v);
+            let syncColl = new SyncableObservableCollection$1(DataGridColumn.$type);
+            let innerColl = this.i.actualColumns;
+            if (!innerColl) {
+                innerColl = new GridColumnCollection_internal();
+            }
+            syncColl._inner = innerColl;
+            syncColl.clear();
+            this._actualColumns._setSyncTarget(syncColl);
+        }
+        /**
+         * Sets or gets whether the grid will react to sort changes.
+        */
+        get reactsToSortChanges() {
+            return this.i.reactsToSortChanges;
+        }
+        set reactsToSortChanges(v) {
+            this.i.reactsToSortChanges = ensureBool(v);
+        }
+        /**
+         * Sets or gets whether the grid will react to group changes.
+        */
+        get reactsToGroupChanges() {
+            return this.i.reactsToGroupChanges;
+        }
+        set reactsToGroupChanges(v) {
+            this.i.reactsToGroupChanges = ensureBool(v);
+        }
+        /**
+         * Sets or gets whether the grid will react to filter changes.
+        */
+        get reactsToFilterChanges() {
+            return this.i.reactsToFilterChanges;
+        }
+        set reactsToFilterChanges(v) {
+            this.i.reactsToFilterChanges = ensureBool(v);
+        }
+        /**
+         * Gets whether an undo can be performed.
+        */
+        get canUndo() {
+            return this.i.canUndo;
+        }
+        /**
+         * Gets whether a redo can be performed.
+        */
+        get canRedo() {
+            return this.i.canRedo;
+        }
+        /**
+         * Gets whether a commit can be performed. False if there are any errors present
+         * on any pending transactions.
+        */
+        get canCommit() {
+            return this.i.canCommit;
+        }
+        /**
+         * Gets or sets the behavior of the Enter key.
+        */
+        get enterBehavior() {
+            return this.i.enterBehavior;
+        }
+        set enterBehavior(v) {
+            this.i.enterBehavior = ensureEnum(EnterKeyBehaviors_$type, v);
+        }
+        /**
+         * Gets or sets the behavior of the enter key when exiting edit mode.
+        */
+        get enterBehaviorAfterEdit() {
+            return this.i.enterBehaviorAfterEdit;
+        }
+        set enterBehaviorAfterEdit(v) {
+            this.i.enterBehaviorAfterEdit = ensureEnum(EnterKeyBehaviorAfterEdit_$type, v);
+        }
+        /**
+         * Gets or sets whether to show the summaries option in the column options menu.
+        */
+        get isColumnOptionsSummariesEnabled() {
+            return this.i.isColumnOptionsSummariesEnabled;
+        }
+        set isColumnOptionsSummariesEnabled(v) {
+            this.i.isColumnOptionsSummariesEnabled = ensureBool(v);
+        }
+        /**
+         * Gets or sets whether to show the grouping option in the column options menu.
+        */
+        get isColumnOptionsGroupingEnabled() {
+            return this.i.isColumnOptionsGroupingEnabled;
+        }
+        set isColumnOptionsGroupingEnabled(v) {
+            this.i.isColumnOptionsGroupingEnabled = ensureBool(v);
+        }
+        /**
+         * Gets or sets if and how cell merging is performed for all fields.
+        */
+        get mergedCellMode() {
+            return this.i.mergedCellMode;
+        }
+        set mergedCellMode(v) {
+            this.i.mergedCellMode = ensureEnum(MergedCellMode_$type, v);
+        }
+        /**
+         * Gets or sets how cells are evaluated for merging.
+        */
+        get mergedCellEvaluationCriteria() {
+            return this.i.mergedCellEvaluationCriteria;
+        }
+        set mergedCellEvaluationCriteria(v) {
+            this.i.mergedCellEvaluationCriteria = ensureEnum(MergedCellEvaluationCriteria_$type, v);
+        }
+        /**
+         * Gets or sets the vertical alignment to use for the merged cell content.
+        */
+        get mergedCellVerticalAlignment() {
+            return this.i.mergedCellVerticalAlignment;
+        }
+        set mergedCellVerticalAlignment(v) {
+            this.i.mergedCellVerticalAlignment = ensureEnum(CellContentVerticalAlignment_$type, v);
+        }
+        /**
+         * Gets or sets which filter UI type to use.
+        */
+        get filterUIType() {
+            return this.i.filterUIType;
+        }
+        set filterUIType(v) {
+            this.i.filterUIType = ensureEnum(FilterUIType_$type, v);
+        }
+        /**
+         * Gets or sets how filters set through the filter UI are combined.
+        */
+        get filterLogicalOperator() {
+            return this.i.filterLogicalOperator;
+        }
+        set filterLogicalOperator(v) {
+            this.i.filterLogicalOperator = ensureEnum(FilterLogicalOperator_$type, v);
+        }
+        /**
+         * Gets or sets whether UI filters are case sensitive or not.
+        */
+        get filterComparisonType() {
+            return this.i.filterComparisonType;
+        }
+        set filterComparisonType(v) {
+            this.i.filterComparisonType = ensureEnum(FilterComparisonType_$type, v);
+        }
+        get todayOverride() {
+            return this.i.todayOverride;
+        }
+        set todayOverride(v) {
+            this.i.todayOverride = v;
+        }
+        /**
+         * Gets or sets whether selection is cleared when pressing the Escape key.
+        */
+        get clearSelectionOnEscape() {
+            return this.i.clearSelectionOnEscape;
+        }
+        set clearSelectionOnEscape(v) {
+            this.i.clearSelectionOnEscape = ensureBool(v);
+        }
+        /**
+         * Gets or sets the size of each page when the pager is visible.
+        */
+        get pageSize() {
+            return this.i.pageSize;
+        }
+        set pageSize(v) {
+            this.i.pageSize = +v;
+        }
+        /**
+         * Gets or sets whether to show the column chooser button in the toolbar.
+        */
+        get isToolbarColumnChooserVisible() {
+            return this.i.isToolbarColumnChooserVisible;
+        }
+        set isToolbarColumnChooserVisible(v) {
+            this.i.isToolbarColumnChooserVisible = ensureBool(v);
+        }
+        /**
+         * Gets or sets whether to show the column pinning button in the toolbar.
+        */
+        get isToolbarColumnPinningVisible() {
+            return this.i.isToolbarColumnPinningVisible;
+        }
+        set isToolbarColumnPinningVisible(v) {
+            this.i.isToolbarColumnPinningVisible = ensureBool(v);
+        }
+        /**
+         * Gets or sets the title text to use in the toolbar.
+        */
+        get toolbarTitle() {
+            return this.i.toolbarTitle;
+        }
+        set toolbarTitle(v) {
+            this.i.toolbarTitle = v;
+        }
+        /**
+         * Gets or sets the column chooser button text to use in the toolbar.
+        */
+        get toolbarColumnChooserText() {
+            return this.i.toolbarColumnChooserText;
+        }
+        set toolbarColumnChooserText(v) {
+            this.i.toolbarColumnChooserText = v;
+        }
+        /**
+         * Gets or sets the column chooser title text to use in the toolbar.
+        */
+        get toolbarColumnChooserTitle() {
+            return this.i.toolbarColumnChooserTitle;
+        }
+        set toolbarColumnChooserTitle(v) {
+            this.i.toolbarColumnChooserTitle = v;
+        }
+        /**
+         * Gets or sets the column pinning button text to use in the toolbar.
+        */
+        get toolbarColumnPinningText() {
+            return this.i.toolbarColumnPinningText;
+        }
+        set toolbarColumnPinningText(v) {
+            this.i.toolbarColumnPinningText = v;
+        }
+        /**
+         * Gets or sets the column pinning title text to use in the toolbar.
+        */
+        get toolbarColumnPinningTitle() {
+            return this.i.toolbarColumnPinningTitle;
+        }
+        set toolbarColumnPinningTitle(v) {
+            this.i.toolbarColumnPinningTitle = v;
+        }
+        /**
+         * Gets or sets the style of scrollbar.
+        */
+        get scrollbarStyle() {
+            return this.i.scrollbarStyle;
+        }
+        set scrollbarStyle(v) {
+            this.i.scrollbarStyle = ensureEnum(ScrollbarStyle_$type, v);
+        }
+        /**
+         * Gets or sets the scrollbar background color.
+        */
+        get scrollbarBackground() {
+            return brushToString(this.i.scrollbarBackground);
+        }
+        set scrollbarBackground(v) {
+            this.i.scrollbarBackground = stringToBrush(v);
+        }
+        get allowCopyOperation() {
+            return this.i.allowCopyOperation;
+        }
+        set allowCopyOperation(v) {
+            this.i.allowCopyOperation = ensureBool(v);
+        }
+        /**
+         * Gets or sets whether to defer the SelectedItemsChanged and SelectedKeysChanged events till after the drag selection has completed.
+        */
+        get deferEventForRowDragSelection() {
+            return this.i.deferEventForRowDragSelection;
+        }
+        set deferEventForRowDragSelection(v) {
+            this.i.deferEventForRowDragSelection = ensureBool(v);
+        }
+        findByName(name) {
+            if (this.findEphemera) {
+                if (name && name.indexOf("@@e:") == 0) {
+                    return this.findEphemera(name);
+                }
+            }
+            if (this.sectionHeader && this.sectionHeader.name && this.sectionHeader.name == name) {
+                return this.sectionHeader;
+            }
+            if (this.summaryRowRoot && this.summaryRowRoot.name && this.summaryRowRoot.name == name) {
+                return this.summaryRowRoot;
+            }
+            if (this.summaryRowSection && this.summaryRowSection.name && this.summaryRowSection.name == name) {
+                return this.summaryRowSection;
+            }
+            if (this.rowSeparator && this.rowSeparator.name && this.rowSeparator.name == name) {
+                return this.rowSeparator;
+            }
+            if (this.headerRowSeparator && this.headerRowSeparator.name && this.headerRowSeparator.name == name) {
+                return this.headerRowSeparator;
+            }
+            if (this.headerSeparator && this.headerSeparator.name && this.headerSeparator.name == name) {
+                return this.headerSeparator;
+            }
+            if (this.columnResizingSeparator && this.columnResizingSeparator.name && this.columnResizingSeparator.name == name) {
+                return this.columnResizingSeparator;
+            }
+            if (this.columnMovingSeparator && this.columnMovingSeparator.name && this.columnMovingSeparator.name == name) {
+                return this.columnMovingSeparator;
+            }
+            if (this.pinnedAreaSeparator && this.pinnedAreaSeparator.name && this.pinnedAreaSeparator.name == name) {
+                return this.pinnedAreaSeparator;
+            }
+            if (this.animationSettings && this.animationSettings.name && this.animationSettings.name == name) {
+                return this.animationSettings;
+            }
+            if (this.selectedKeys != null && this.selectedKeys.findByName && this.selectedKeys.findByName(name)) {
+                return this.selectedKeys.findByName(name);
+            }
+            if (this.selectedCells != null && this.selectedCells.findByName && this.selectedCells.findByName(name)) {
+                return this.selectedCells.findByName(name);
+            }
+            if (this.selectedCellRanges != null && this.selectedCellRanges.findByName && this.selectedCellRanges.findByName(name)) {
+                return this.selectedCellRanges.findByName(name);
+            }
+            if (this.pinnedKeys != null && this.pinnedKeys.findByName && this.pinnedKeys.findByName(name)) {
+                return this.pinnedKeys.findByName(name);
+            }
+            if (this.activeCell && this.activeCell.name && this.activeCell.name == name) {
+                return this.activeCell;
+            }
+            if (this.responsiveStates != null && this.responsiveStates.findByName && this.responsiveStates.findByName(name)) {
+                return this.responsiveStates.findByName(name);
+            }
+            if (this.initialSortDescriptions != null && this.initialSortDescriptions.findByName && this.initialSortDescriptions.findByName(name)) {
+                return this.initialSortDescriptions.findByName(name);
+            }
+            if (this.initialGroupDescriptions != null && this.initialGroupDescriptions.findByName && this.initialGroupDescriptions.findByName(name)) {
+                return this.initialGroupDescriptions.findByName(name);
+            }
+            if (this.initialSummaryDescriptions != null && this.initialSummaryDescriptions.findByName && this.initialSummaryDescriptions.findByName(name)) {
+                return this.initialSummaryDescriptions.findByName(name);
+            }
+            if (this.sortDescriptions != null && this.sortDescriptions.findByName && this.sortDescriptions.findByName(name)) {
+                return this.sortDescriptions.findByName(name);
+            }
+            if (this.groupDescriptions != null && this.groupDescriptions.findByName && this.groupDescriptions.findByName(name)) {
+                return this.groupDescriptions.findByName(name);
+            }
+            if (this.filterExpressions != null && this.filterExpressions.findByName && this.filterExpressions.findByName(name)) {
+                return this.filterExpressions.findByName(name);
+            }
+            if (this.summaryDescriptions != null && this.summaryDescriptions.findByName && this.summaryDescriptions.findByName(name)) {
+                return this.summaryDescriptions.findByName(name);
+            }
+            if (this.actualColumns != null && this.actualColumns.findByName && this.actualColumns.findByName(name)) {
+                return this.actualColumns.findByName(name);
+            }
+            if (this.columns != null && this.columns.findByName && this.columns.findByName(name)) {
+                return this.columns.findByName(name);
+            }
+            return null;
+        }
+        get hasUserValues() {
+            return this._hasUserValues;
+        }
+        __m(propertyName) {
+            if (!this._inStyling) {
+                this._hasUserValues.add(propertyName);
+            }
+        }
+        _styling(container, component, parent) {
+            if (this._inStyling) {
+                return;
+            }
+            this._inStyling = true;
+            this._stylingContainer = container;
+            this._stylingParent = component;
+            let genericPrefix = "";
+            let typeName = this.i.$type.name;
+            if (typeName.indexOf("Xam") === 0) {
+                typeName = typeName.substring(3);
+            }
+            genericPrefix = toSpinal("DataGridComponent");
+            let additionalPrefixes = [];
+            let prefix = toSpinal(typeName);
+            additionalPrefixes.push(prefix + "-");
+            let b = this.i.$type.baseType;
+            while (b && b.name != "Object" &&
+                b.name != "Base" &&
+                b.name != "Control" &&
+                b.Name != "DependencyObject" &&
+                b.Name != "FrameworkElement") {
+                typeName = b.name;
+                if (typeName.indexOf("Xam") === 0) {
+                    typeName = typeName.substring(3);
+                }
+                let basePrefix = toSpinal(typeName);
+                additionalPrefixes.push(basePrefix + "-");
+                b = b.baseType;
+            }
+            if (parent) {
+                let parentTypeName = parent.i.$type.name;
+                if (parentTypeName.indexOf("Xam") === 0) {
+                    parentTypeName = parentTypeName.substring(3);
+                }
+                let parentPrefix = toSpinal(parentTypeName);
+                additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
+                additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
+            }
+            initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
+            if (this.sectionHeader && this.sectionHeader._styling) {
+                this.sectionHeader._styling(container, component, this);
+            }
+            if (this.summaryRowRoot && this.summaryRowRoot._styling) {
+                this.summaryRowRoot._styling(container, component, this);
+            }
+            if (this.summaryRowSection && this.summaryRowSection._styling) {
+                this.summaryRowSection._styling(container, component, this);
+            }
+            if (this.rowSeparator && this.rowSeparator._styling) {
+                this.rowSeparator._styling(container, component, this);
+            }
+            if (this.headerRowSeparator && this.headerRowSeparator._styling) {
+                this.headerRowSeparator._styling(container, component, this);
+            }
+            if (this.headerSeparator && this.headerSeparator._styling) {
+                this.headerSeparator._styling(container, component, this);
+            }
+            if (this.columnResizingSeparator && this.columnResizingSeparator._styling) {
+                this.columnResizingSeparator._styling(container, component, this);
+            }
+            if (this.columnMovingSeparator && this.columnMovingSeparator._styling) {
+                this.columnMovingSeparator._styling(container, component, this);
+            }
+            if (this.pinnedAreaSeparator && this.pinnedAreaSeparator._styling) {
+                this.pinnedAreaSeparator._styling(container, component, this);
+            }
+            if (this._otherStyling) {
+                this._otherStyling(container, component, parent);
+            }
+            this._inStyling = false;
+        }
+        /**
+     * Forces a refresh of the grid content.
+    
+    */
+        refresh() {
+            this.i.refresh();
+        }
+        /**
+         * Makes sure pending work has completed if the grid need to be synchronously examined.
+        
+        */
+        flush() {
+            this.i.flush();
+        }
+        notifyScrollStart() {
+            this.i.notifyScrollStart();
+        }
+        notifyScrollStop() {
+            this.i.notifyScrollStop();
+        }
+        exchangeColumn(newColumn, oldColumn) {
+            this.i.exchangeColumn((newColumn == null ? null : newColumn.i), (oldColumn == null ? null : oldColumn.i));
+        }
+        pinColumn(column, position) {
+            this.i.pinColumn((column == null ? null : column.i), (position == null ? null : position));
+        }
+        moveColumn(oldIndex, newIndex) {
+            this.i.moveColumn(oldIndex, newIndex);
+        }
+        /**
+         * Moves a column to the left, if possible.
+        
+        * @param columnIndex  * The index of the column to move.
+        */
+        moveColumnLeft(columnIndex) {
+            this.i.moveColumnLeft(columnIndex);
+        }
+        /**
+         * Moves a column to the right, if possible.
+        
+        * @param columnIndex  * The index of the column to move.
+        */
+        moveColumnRight(columnIndex) {
+            this.i.moveColumnRight(columnIndex);
+        }
+        /**
+         * Returns true if a column can be moved to the left of it's current position; otherwise false.
+        
+        * @param columnIndex  * The index of the column.
+        */
+        canMoveColumnLeft(columnIndex) {
+            let iv = this.i.canMoveColumnLeft(columnIndex);
+            return (iv);
+        }
+        /**
+         * Returns true if a column can be moved to the right of it's current position; otherwise false.
+        
+        * @param columnIndex  * The index of the column.
+        */
+        canMoveColumnRight(columnIndex) {
+            let iv = this.i.canMoveColumnRight(columnIndex);
+            return (iv);
+        }
+        /**
+         * Exports visual information about the current state of the grid.
+        
+        */
+        exportVisualModel() {
+            let iv = this.i.exportVisualModel();
+            return (iv);
+        }
+        /**
+         * Returns a serialized copy of the exported visual model
+        
+        */
+        exportSerializedVisualModel() {
+            let iv = this.i.exportSerializedVisualModel();
+            return (iv);
+        }
+        /**
+         * Scrolls the grid to given row, by index
+        
+        * @param rowNumber  * The row index to scroll to.
+        */
+        scrollToRowByIndex(rowNumber) {
+            this.i.scrollToRowByIndex(rowNumber);
+        }
+        /**
+         * Scrolls the grid so that a row is the last visible, by index.
+        
+        * @param rowNumber  * The row index to scroll to.
+        */
+        scrollToLastRowByIndex(rowNumber) {
+            this.i.scrollToLastRowByIndex(rowNumber);
+        }
+        /**
+         * Scrolls to an item, if found.
+        
+        * @param item  * The item to scroll to.
+        */
+        scrollToItem(item) {
+            let iv = this.i.scrollToItem(item);
+            return (iv);
+        }
+        scrollToPrimaryKey(key) {
+            let iv = this.i.scrollToPrimaryKey(key);
+            return (iv);
+        }
+        /**
+         * Scrolls the grid to given column, by index
+        
+        * @param columnNumber  * The column number to scroll to.
+        */
+        scrollToColumnByIndex(columnNumber) {
+            this.i.scrollToColumnByIndex(columnNumber);
+        }
+        /**
+         * Gets the last visible index in the grid.
+        
+        */
+        getLastVisibleIndex() {
+            let iv = this.i.getLastVisibleIndex();
+            return (iv);
+        }
+        /**
+         * Gets the first visible index in the grid.
+        
+        */
+        getFirstVisibleIndex() {
+            let iv = this.i.getFirstVisibleIndex();
+            return (iv);
+        }
+        /**
+         * Invalidates the bound data for the rows currently visible.
+        
+        */
+        invalidateVisibleRows() {
+            this.i.invalidateVisibleRows();
+        }
+        /**
+         * Manually set the active responsive state of the grid.
+        
+        * @param name
+        */
+        setActiveResponsiveState(name) {
+            this.i.setActiveResponsiveState(name);
+        }
+        notifySetItem(index, oldItem, newItem) {
+            this.i.notifySetItem(index, oldItem, newItem);
+        }
+        /**
+         * Manually notifies the grid's data source that the data it has bound to has been cleared and needs to be re-examined.
+         * This should not be called if the data that the grid is bound to is already observable.
+        
+        */
+        notifyClearItems() {
+            this.i.notifyClearItems();
+        }
+        notifyInsertItem(index, newItem) {
+            this.i.notifyInsertItem(index, newItem);
+        }
+        notifyRemoveItem(index, oldItem) {
+            this.i.notifyRemoveItem(index, oldItem);
+        }
+        /**
+         * Returns the data index of an item within the bound data source.
+        
+        * @param item  * The item from which to get the index.
+        */
+        dataIndexOfItem(item) {
+            let iv = this.i.dataIndexOfItem(item);
+            return (iv);
+        }
+        dataIndexOfPrimaryKey(key) {
+            let iv = this.i.dataIndexOfPrimaryKey(key);
+            return (iv);
+        }
+        /**
+         * Resolves the value of a specific cell.
+        
+        * @param cellKey  * The cell to resolve.
+        */
+        resolveCellValue(cellKey) {
+            let iv = this.i.resolveCellValue((cellKey == null ? null : cellKey.i));
+            return (iv);
+        }
+        resolveCellValueFromPosition(row, column) {
+            let iv = this.i.resolveCellValueFromPosition(row, column);
+            return (iv);
+        }
+        /**
+         * Gets the column that appears at the index specified. This is not the columns actual index in the
+         * column's collection but the index for how it appears visually in the grid.
+        
+        * @param index  * The rendered index of the column.
+        */
+        getColumnAtRenderedIndex(index) {
+            let iv = this.i.getColumnAtRenderedIndex(index);
+            let ret = null;
+            if (iv && iv.externalObject) {
+                ret = iv.externalObject;
+            }
+            else {
+                if (iv) {
+                    let e = IgxDataGridColumnComponent._createFromInternal(iv);
+                    e._implementation = iv;
+                    iv.externalObject = e;
+                    ret = e;
+                }
+            }
+            return ret;
+        }
+        /**
+         * Gets the summary results for root level.
+        
+        */
+        getRootSummaryResults() {
+            let iv = this.i.getRootSummaryResults();
+            return (iv);
+        }
+        /**
+         * Gets the summary results for a specific section.
+        
+        */
+        getSectionSummaryResults(sectionIndex) {
+            let iv = this.i.getSectionSummaryResults(sectionIndex);
+            return (iv);
+        }
+        /**
+         * Commits any edits that may exist in the datasource.
+        
+        */
+        commitEdits() {
+            this.i.commitEdits();
+        }
+        /**
+         * Cancels any edits that may exist in the datasource.
+        
+        */
+        cancelEdits() {
+            this.i.cancelEdits();
+        }
+        /**
+         * Accepts a specific commit to the datasource.
+        
+        * @param commitID  * The ID of the commit provided by the Committing event.
+        */
+        acceptCommit(commitID) {
+            this.i.acceptCommit(commitID);
+        }
+        /**
+         * Rejects a specific commit.
+        
+        * @param commitID  * The ID of the commit provided by the Committing event.
+        */
+        rejectCommit(commitID) {
+            this.i.rejectCommit(commitID);
+        }
+        /**
+         * Undo the last edit.
+        
+        */
+        undo() {
+            this.i.undo();
+        }
+        /**
+         * Redo the last edit.
+        
+        */
+        redo() {
+            this.i.redo();
+        }
+        updatePropertyAtKey(key, propertyPath, value) {
+            this.i.updatePropertyAtKey(key, propertyPath, value);
+        }
+        removeItemByKey(key) {
+            this.i.removeItemByKey(key);
+        }
+        /**
+         * Removes an item by its instance.
+        
+        * @param item  * The item instance to remove.
+        */
+        removeItem(item) {
+            this.i.removeItem(item);
+        }
+        /**
+         * Accept a pending edit turning it into a real edit.
+        
+        * @param editID  * The ID of the edit. Provided by the CellValueChanging event.
+        */
+        acceptEdit(editID) {
+            this.i.acceptEdit(editID);
+        }
+        /**
+         * Reject a pending edit.
+        
+        * @param editID  * The ID of the edit. Provided by the CellValueChanging event.
+        */
+        rejectEdit(editID) {
+            this.i.rejectEdit(editID);
+        }
+        setEditError(editID, errorMessage) {
+            this.i.setEditError(editID, errorMessage);
+        }
+        /**
+         * Start edit mode on the active cell.
+        
+        */
+        startEditMode() {
+            this.i.startEditMode();
+        }
+        endEditMode(commit) {
+            this.i.endEditMode(commit);
+        }
+        /**
+         * Selects all of the rows in the grid.
+        
+        */
+        selectAllRows() {
+            this.i.selectAllRows();
+        }
+        /**
+         * Deselects all currently selected rows.
+        
+        */
+        deselectAllRows() {
+            this.i.deselectAllRows();
+        }
+        /**
+         * Saves the layout chnages that have been made to the grid
+        
+        */
+        saveLayout() {
+            let iv = this.i.saveLayout();
+            return (iv);
+        }
+        /**
+         * Loads the layout chnages that have been made to the grid
+        
+        */
+        loadLayout(json) {
+            this.i.loadLayout(json);
+        }
+        get filterExpressionsChanging() {
+            if (this._filterExpressionsChanging == null) {
+                this._filterExpressionsChanging = new EventEmitter();
+                this.i.filterExpressionsChanging = delegateCombine(this.i.filterExpressionsChanging, (o, e) => {
+                    let outerArgs = new IgxGridFilterExpressionsEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeFilterExpressionsChanging) {
+                        this.beforeFilterExpressionsChanging(this, outerArgs);
+                    }
+                    this._filterExpressionsChanging.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._filterExpressionsChanging;
+        }
+        get filterExpressionsChanged() {
+            if (this._filterExpressionsChanged == null) {
+                this._filterExpressionsChanged = new EventEmitter();
+                this.i.filterExpressionsChanged = delegateCombine(this.i.filterExpressionsChanged, (o, e) => {
+                    let outerArgs = new IgxGridFilterExpressionsEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeFilterExpressionsChanged) {
+                        this.beforeFilterExpressionsChanged(this, outerArgs);
+                    }
+                    this._filterExpressionsChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._filterExpressionsChanged;
+        }
+        /**
+         * Previews that a pointer is down on a cell.
+        */
+        get cellPreviewPointerDown() {
+            if (this._cellPreviewPointerDown == null) {
+                this._cellPreviewPointerDown = new EventEmitter();
+                this.i.cellPreviewPointerDown = delegateCombine(this.i.cellPreviewPointerDown, (o, e) => {
+                    let outerArgs = new IgxDataGridCellEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeCellPreviewPointerDown) {
+                        this.beforeCellPreviewPointerDown(this, outerArgs);
+                    }
+                    this._cellPreviewPointerDown.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._cellPreviewPointerDown;
+        }
+        /**
+         * Previews that a pointer is up on a cell.
+        */
+        get cellPreviewPointerUp() {
+            if (this._cellPreviewPointerUp == null) {
+                this._cellPreviewPointerUp = new EventEmitter();
+                this.i.cellPreviewPointerUp = delegateCombine(this.i.cellPreviewPointerUp, (o, e) => {
+                    let outerArgs = new IgxDataGridCellEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeCellPreviewPointerUp) {
+                        this.beforeCellPreviewPointerUp(this, outerArgs);
+                    }
+                    this._cellPreviewPointerUp.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._cellPreviewPointerUp;
+        }
+        /**
+         * Indicates a pointer is down on a cell.
+        */
+        get cellPointerDown() {
+            if (this._cellPointerDown == null) {
+                this._cellPointerDown = new EventEmitter();
+                this.i.cellPointerDown = delegateCombine(this.i.cellPointerDown, (o, e) => {
+                    let outerArgs = new IgxDataGridCellEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeCellPointerDown) {
+                        this.beforeCellPointerDown(this, outerArgs);
+                    }
+                    this._cellPointerDown.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._cellPointerDown;
+        }
+        /**
+         * Indicates a pointer is up on a cell.
+        */
+        get cellPointerUp() {
+            if (this._cellPointerUp == null) {
+                this._cellPointerUp = new EventEmitter();
+                this.i.cellPointerUp = delegateCombine(this.i.cellPointerUp, (o, e) => {
+                    let outerArgs = new IgxDataGridCellEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeCellPointerUp) {
+                        this.beforeCellPointerUp(this, outerArgs);
+                    }
+                    this._cellPointerUp.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._cellPointerUp;
+        }
+        /**
+         * Called when a cell is clicked.
+        */
+        get cellClicked() {
+            if (this._cellClicked == null) {
+                this._cellClicked = new EventEmitter();
+                this.i.cellClicked = delegateCombine(this.i.cellClicked, (o, e) => {
+                    let outerArgs = new IgxDataGridCellEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeCellClicked) {
+                        this.beforeCellClicked(this, outerArgs);
+                    }
+                    this._cellClicked.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._cellClicked;
+        }
+        /**
+         * Called when sorting has changed.
+        */
+        get sortDescriptionsChanged() {
+            if (this._sortDescriptionsChanged == null) {
+                this._sortDescriptionsChanged = new EventEmitter();
+                this.i.sortDescriptionsChanged = delegateCombine(this.i.sortDescriptionsChanged, (o, e) => {
+                    let outerArgs = new IgxGridSortDescriptionsChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeSortDescriptionsChanged) {
+                        this.beforeSortDescriptionsChanged(this, outerArgs);
+                    }
+                    this._sortDescriptionsChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._sortDescriptionsChanged;
+        }
+        /**
+         * Called when grouping has changed.
+        */
+        get groupDescriptionsChanged() {
+            if (this._groupDescriptionsChanged == null) {
+                this._groupDescriptionsChanged = new EventEmitter();
+                this.i.groupDescriptionsChanged = delegateCombine(this.i.groupDescriptionsChanged, (o, e) => {
+                    let outerArgs = new IgxGridGroupDescriptionsChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeGroupDescriptionsChanged) {
+                        this.beforeGroupDescriptionsChanged(this, outerArgs);
+                    }
+                    this._groupDescriptionsChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._groupDescriptionsChanged;
+        }
+        /**
+         * Called when summaries have changed.
+        */
+        get summaryDescriptionsChanged() {
+            if (this._summaryDescriptionsChanged == null) {
+                this._summaryDescriptionsChanged = new EventEmitter();
+                this.i.summaryDescriptionsChanged = delegateCombine(this.i.summaryDescriptionsChanged, (o, e) => {
+                    let outerArgs = new IgxGridSummaryDescriptionsChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeSummaryDescriptionsChanged) {
+                        this.beforeSummaryDescriptionsChanged(this, outerArgs);
+                    }
+                    this._summaryDescriptionsChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._summaryDescriptionsChanged;
+        }
+        /**
+         * Called when a column is hidden or unhidden.
+        */
+        get columnHiddenChanged() {
+            if (this._columnHiddenChanged == null) {
+                this._columnHiddenChanged = new EventEmitter();
+                this.i.columnHiddenChanged = delegateCombine(this.i.columnHiddenChanged, (o, e) => {
+                    let outerArgs = new IgxColumnHiddenChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeColumnHiddenChanged) {
+                        this.beforeColumnHiddenChanged(this, outerArgs);
+                    }
+                    this._columnHiddenChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._columnHiddenChanged;
+        }
+        /**
+         * Called when a column is pinned or unpinned.
+        */
+        get columnPinnedChanged() {
+            if (this._columnPinnedChanged == null) {
+                this._columnPinnedChanged = new EventEmitter();
+                this.i.columnPinnedChanged = delegateCombine(this.i.columnPinnedChanged, (o, e) => {
+                    let outerArgs = new IgxColumnPinnedChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeColumnPinnedChanged) {
+                        this.beforeColumnPinnedChanged(this, outerArgs);
+                    }
+                    this._columnPinnedChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._columnPinnedChanged;
+        }
+        /**
+         * Called when a cell has been edited.
+        */
+        get cellValueChanging() {
+            if (this._cellValueChanging == null) {
+                this._cellValueChanging = new EventEmitter();
+                this.i.cellValueChanging = delegateCombine(this.i.cellValueChanging, (o, e) => {
+                    let outerArgs = new IgxGridCellValueChangingEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeCellValueChanging) {
+                        this.beforeCellValueChanging(this, outerArgs);
+                    }
+                    this._cellValueChanging.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._cellValueChanging;
+        }
+        /**
+         * Called when edits have been committed to the datasource.
+        */
+        get dataCommitted() {
+            if (this._dataCommitted == null) {
+                this._dataCommitted = new EventEmitter();
+                this.i.dataCommitted = delegateCombine(this.i.dataCommitted, (o, e) => {
+                    let outerArgs = new IgxGridDataCommittedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeDataCommitted) {
+                        this.beforeDataCommitted(this, outerArgs);
+                    }
+                    this._dataCommitted.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._dataCommitted;
+        }
+        /**
+         * Called when edits are about to be committed to the datasource.
+        */
+        get dataCommitting() {
+            if (this._dataCommitting == null) {
+                this._dataCommitting = new EventEmitter();
+                this.i.dataCommitting = delegateCombine(this.i.dataCommitting, (o, e) => {
+                    let outerArgs = new IgxGridDataCommittingEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeDataCommitting) {
+                        this.beforeDataCommitting(this, outerArgs);
+                    }
+                    this._dataCommitting.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._dataCommitting;
+        }
+        get rootSummariesChanged() {
+            if (this._rootSummariesChanged == null) {
+                this._rootSummariesChanged = new EventEmitter();
+                this.i.rootSummariesChanged = delegateCombine(this.i.rootSummariesChanged, (o, e) => {
+                    this._runInZone(() => {
+                        let outerArgs = new IgxDataSourceRootSummariesChangedEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (this.beforeRootSummariesChanged) {
+                            this.beforeRootSummariesChanged(this, outerArgs);
+                        }
+                        this._rootSummariesChanged.emit({
+                            sender: this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._rootSummariesChanged;
+        }
+        /**
+         * Called when the grids size has changed.
+        */
+        get sizeChanged() {
+            if (this._sizeChanged == null) {
+                this._sizeChanged = new EventEmitter();
+                this.i.sizeChanged = delegateCombine(this.i.sizeChanged, (o, e) => {
+                    this._runInZone(() => {
+                        let outerArgs = new IgxGridSizeChangedEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (this.beforeSizeChanged) {
+                            this.beforeSizeChanged(this, outerArgs);
+                        }
+                        this._sizeChanged.emit({
+                            sender: this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._sizeChanged;
+        }
+        get actualColumnsChanged() {
+            if (this._actualColumnsChanged == null) {
+                this._actualColumnsChanged = new EventEmitter();
+                this.i.actualColumnsChanged = delegateCombine(this.i.actualColumnsChanged, (o, e) => {
+                    let outerArgs = new IgxGridColumnsChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeActualColumnsChanged) {
+                        this.beforeActualColumnsChanged(this, outerArgs);
+                    }
+                    this._actualColumnsChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._actualColumnsChanged;
+        }
+        /**
+         * Called when the columns are autogenerated.
+        */
+        get columnsAutoGenerated() {
+            if (this._columnsAutoGenerated == null) {
+                this._columnsAutoGenerated = new EventEmitter();
+                this.i.columnsAutoGenerated = delegateCombine(this.i.columnsAutoGenerated, (o, e) => {
+                    let outerArgs = new IgxGridColumnsAutoGeneratedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeColumnsAutoGenerated) {
+                        this.beforeColumnsAutoGenerated(this, outerArgs);
+                    }
+                    this._columnsAutoGenerated.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._columnsAutoGenerated;
+        }
+        /**
+         * Called when the selected items change.
+        */
+        get selectedItemsChanged() {
+            if (this._selectedItemsChanged == null) {
+                this._selectedItemsChanged = new EventEmitter();
+                this.i.selectedItemsChanged = delegateCombine(this.i.selectedItemsChanged, (o, e) => {
+                    let outerArgs = new IgxGridSelectedItemsChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeSelectedItemsChanged) {
+                        this.beforeSelectedItemsChanged(this, outerArgs);
+                    }
+                    this._selectedItemsChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._selectedItemsChanged;
+        }
+        /**
+         * Called when the selected keys change.
+        */
+        get selectedKeysChanged() {
+            if (this._selectedKeysChanged == null) {
+                this._selectedKeysChanged = new EventEmitter();
+                this.i.selectedKeysChanged = delegateCombine(this.i.selectedKeysChanged, (o, e) => {
+                    let outerArgs = new IgxGridSelectedKeysChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeSelectedKeysChanged) {
+                        this.beforeSelectedKeysChanged(this, outerArgs);
+                    }
+                    this._selectedKeysChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._selectedKeysChanged;
+        }
+        /**
+         * Called when the selected cells change.
+        */
+        get selectedCellsChanged() {
+            if (this._selectedCellsChanged == null) {
+                this._selectedCellsChanged = new EventEmitter();
+                this.i.selectedCellsChanged = delegateCombine(this.i.selectedCellsChanged, (o, e) => {
+                    let outerArgs = new IgxGridSelectedCellsChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeSelectedCellsChanged) {
+                        this.beforeSelectedCellsChanged(this, outerArgs);
+                    }
+                    this._selectedCellsChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._selectedCellsChanged;
+        }
+        /**
+         * Called when an individual selection operation has been made.
+        */
+        get selectionChanged() {
+            if (this._selectionChanged == null) {
+                this._selectionChanged = new EventEmitter();
+                this.i.selectionChanged = delegateCombine(this.i.selectionChanged, (o, e) => {
+                    let outerArgs = new IgxGridSelectionChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeSelectionChanged) {
+                        this.beforeSelectionChanged(this, outerArgs);
+                    }
+                    this._selectionChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._selectionChanged;
+        }
+        /**
+         * Called when the active cell changes.
+        */
+        get activeCellChanged() {
+            if (this._activeCellChanged == null) {
+                this._activeCellChanged = new EventEmitter();
+                this.i.activeCellChanged = delegateCombine(this.i.activeCellChanged, (o, e) => {
+                    let outerArgs = new IgxGridActiveCellChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeActiveCellChanged) {
+                        this.beforeActiveCellChanged(this, outerArgs);
+                    }
+                    this._activeCellChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._activeCellChanged;
+        }
+        /**
+         * Called when the selected cell ranges changed.
+        */
+        get selectedCellRangesChanged() {
+            if (this._selectedCellRangesChanged == null) {
+                this._selectedCellRangesChanged = new EventEmitter();
+                this.i.selectedCellRangesChanged = delegateCombine(this.i.selectedCellRangesChanged, (o, e) => {
+                    let outerArgs = new IgxGridSelectedCellRangesChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeSelectedCellRangesChanged) {
+                        this.beforeSelectedCellRangesChanged(this, outerArgs);
+                    }
+                    this._selectedCellRangesChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._selectedCellRangesChanged;
+        }
+        /**
+         * Called when a column's Width property has changed.
+        */
+        get columnWidthChanged() {
+            if (this._columnWidthChanged == null) {
+                this._columnWidthChanged = new EventEmitter();
+                this.i.columnWidthChanged = delegateCombine(this.i.columnWidthChanged, (o, e) => {
+                    let outerArgs = new IgxGridColumnWidthChangedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeColumnWidthChanged) {
+                        this.beforeColumnWidthChanged(this, outerArgs);
+                    }
+                    this._columnWidthChanged.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._columnWidthChanged;
+        }
+        /**
+         * Called when a cell has started editing.
+        */
+        get cellEditStarted() {
+            if (this._cellEditStarted == null) {
+                this._cellEditStarted = new EventEmitter();
+                this.i.cellEditStarted = delegateCombine(this.i.cellEditStarted, (o, e) => {
+                    let outerArgs = new IgxGridCellEditStartedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeCellEditStarted) {
+                        this.beforeCellEditStarted(this, outerArgs);
+                    }
+                    this._cellEditStarted.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._cellEditStarted;
+        }
+        /**
+         * Called when a cell has finished editing.
+        */
+        get cellEditEnded() {
+            if (this._cellEditEnded == null) {
+                this._cellEditEnded = new EventEmitter();
+                this.i.cellEditEnded = delegateCombine(this.i.cellEditEnded, (o, e) => {
+                    let outerArgs = new IgxGridCellEditEndedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeCellEditEnded) {
+                        this.beforeCellEditEnded(this, outerArgs);
+                    }
+                    this._cellEditEnded.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._cellEditEnded;
+        }
+        /**
+         * Called when a row has started editing.
+        */
+        get rowEditStarted() {
+            if (this._rowEditStarted == null) {
+                this._rowEditStarted = new EventEmitter();
+                this.i.rowEditStarted = delegateCombine(this.i.rowEditStarted, (o, e) => {
+                    let outerArgs = new IgxGridRowEditStartedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeRowEditStarted) {
+                        this.beforeRowEditStarted(this, outerArgs);
+                    }
+                    this._rowEditStarted.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._rowEditStarted;
+        }
+        /**
+         * Called when a row has finished editing.
+        */
+        get rowEditEnded() {
+            if (this._rowEditEnded == null) {
+                this._rowEditEnded = new EventEmitter();
+                this.i.rowEditEnded = delegateCombine(this.i.rowEditEnded, (o, e) => {
+                    let outerArgs = new IgxGridRowEditEndedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeRowEditEnded) {
+                        this.beforeRowEditEnded(this, outerArgs);
+                    }
+                    this._rowEditEnded.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._rowEditEnded;
+        }
+        get customFilterRequested() {
+            if (this._customFilterRequested == null) {
+                this._customFilterRequested = new EventEmitter();
+                this.i.customFilterRequested = delegateCombine(this.i.customFilterRequested, (o, e) => {
+                    let outerArgs = new IgxGridCustomFilterRequestedEventArgs();
+                    outerArgs._provideImplementation(e);
+                    if (this.beforeCustomFilterRequested) {
+                        this.beforeCustomFilterRequested(this, outerArgs);
+                    }
+                    this._customFilterRequested.emit({
+                        sender: this,
+                        args: outerArgs
+                    });
+                });
+            }
+            return this._customFilterRequested;
+        }
+        get actualPrimaryKeyChange() {
+            if (this._actualPrimaryKeyChange == null) {
+                this._actualPrimaryKeyChange = new EventEmitter();
+                this.i.propertyChanged = delegateCombine(this.i.propertyChanged, (o, e) => {
+                    this._runInZone(() => {
+                        let iv = e;
+                        let ext = this.actualPrimaryKey;
+                        if (this.beforeActualPrimaryKeyChange) {
+                            this.beforeActualPrimaryKeyChange(this, ext);
+                        }
+                        this._actualPrimaryKeyChange.emit(ext);
+                    });
+                });
+            }
+            return this._actualPrimaryKeyChange;
+        }
+        _runInZone(act) {
+            if (this._zoneRunner != null) {
+                this._zoneRunner(act);
+            }
+            else {
+                act();
+            }
+        }
+    }
+    IgxDataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataGridComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    IgxDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridComponent, selector: "igx-data-grid", inputs: { height: "height", width: "width", dataSource: "dataSource", columnResizingMode: "columnResizingMode", columnMovingMode: "columnMovingMode", isRowHoverEnabled: "isRowHoverEnabled", rowHoverBackground: "rowHoverBackground", rowHoverTextColor: "rowHoverTextColor", editRowBorder: "editRowBorder", editRowBorderWidthBottom: "editRowBorderWidthBottom", editRowBorderWidthLeft: "editRowBorderWidthLeft", editRowBorderWidthRight: "editRowBorderWidthRight", editRowBorderWidthTop: "editRowBorderWidthTop", sectionHeader: "sectionHeader", summaryRowRoot: "summaryRowRoot", summaryRowSection: "summaryRowSection", rowSeparator: "rowSeparator", headerRowSeparator: "headerRowSeparator", headerSeparator: "headerSeparator", columnResizingSeparator: "columnResizingSeparator", columnMovingSeparator: "columnMovingSeparator", pinnedAreaSeparator: "pinnedAreaSeparator", autoGenerateDesiredProperties: "autoGenerateDesiredProperties", dataSourceDesiredProperties: "dataSourceDesiredProperties", density: "density", actualRowHeight: "actualRowHeight", rowHeight: "rowHeight", defaultColumnMinWidth: "defaultColumnMinWidth", actualHeaderHeight: "actualHeaderHeight", headerHeight: "headerHeight", headerClickAction: "headerClickAction", editMode: "editMode", editModeClickAction: "editModeClickAction", editOnKeyPress: "editOnKeyPress", autoGenerateColumns: "autoGenerateColumns", rowSeparatorHeight: "rowSeparatorHeight", isPlaceholderRenderingEnabled: "isPlaceholderRenderingEnabled", columnAddingAnimationMode: "columnAddingAnimationMode", columnPropertyUpdatingAnimationMode: "columnPropertyUpdatingAnimationMode", cellDataLoadedAnimationMode: "cellDataLoadedAnimationMode", rowSelectionAnimationMode: "rowSelectionAnimationMode", rowHoverAnimationMode: "rowHoverAnimationMode", cellSelectionAnimationMode: "cellSelectionAnimationMode", animationSettings: "animationSettings", columnResizingAnimationMode: "columnResizingAnimationMode", columnShowingAnimationMode: "columnShowingAnimationMode", columnMovingAnimationMode: "columnMovingAnimationMode", columnHidingAnimationMode: "columnHidingAnimationMode", columnExchangingAnimationMode: "columnExchangingAnimationMode", selectionMode: "selectionMode", activationMode: "activationMode", selectionBehavior: "selectionBehavior", mouseDragSelectionEnabled: "mouseDragSelectionEnabled", selectedItems: "selectedItems", selectedKeys: "selectedKeys", selectedCells: "selectedCells", selectedCellRanges: "selectedCellRanges", pinnedItems: "pinnedItems", pinnedKeys: "pinnedKeys", isColumnOptionsEnabled: "isColumnOptionsEnabled", isGroupRowSticky: "isGroupRowSticky", isHeaderSeparatorVisible: "isHeaderSeparatorVisible", cellSelectedBackground: "cellSelectedBackground", sectionHeaderSelectedBackground: "sectionHeaderSelectedBackground", summaryRootBackground: "summaryRootBackground", summarySectionBackground: "summarySectionBackground", pinnedRowOpacity: "pinnedRowOpacity", editTextStyle: "editTextStyle", editOpacity: "editOpacity", deletedTextColor: "deletedTextColor", stickyRowBackground: "stickyRowBackground", pinnedRowBackground: "pinnedRowBackground", lastStickyRowBackground: "lastStickyRowBackground", activeCell: "activeCell", cellBackground: "cellBackground", cellTextColor: "cellTextColor", headerSortIndicatorColor: "headerSortIndicatorColor", headerSortIndicatorStyle: "headerSortIndicatorStyle", cellTextStyle: "cellTextStyle", sectionHeaderBackground: "sectionHeaderBackground", sectionHeaderTextColor: "sectionHeaderTextColor", sectionHeaderTextStyle: "sectionHeaderTextStyle", summaryRootLabelTextStyle: "summaryRootLabelTextStyle", summarySectionLabelTextStyle: "summarySectionLabelTextStyle", summaryRootValueTextColor: "summaryRootValueTextColor", summaryRootValueTextStyle: "summaryRootValueTextStyle", summarySectionValueTextStyle: "summarySectionValueTextStyle", summarySectionValueTextColor: "summarySectionValueTextColor", summaryRootLabelTextColor: "summaryRootLabelTextColor", summarySectionLabelTextColor: "summarySectionLabelTextColor", summaryRootSelectedBackground: "summaryRootSelectedBackground", summarySectionSelectedBackground: "summarySectionSelectedBackground", pinnedAreaSeparatorWidth: "pinnedAreaSeparatorWidth", headerSeparatorWidth: "headerSeparatorWidth", headerSeparatorBackground: "headerSeparatorBackground", headerBackground: "headerBackground", headerTextColor: "headerTextColor", headerTextStyle: "headerTextStyle", rowSeparatorBackground: "rowSeparatorBackground", headerRowSeparatorBackground: "headerRowSeparatorBackground", rowSeparatorStickyRowBackground: "rowSeparatorStickyRowBackground", rowSeparatorLastStickyRowBackground: "rowSeparatorLastStickyRowBackground", rowSeparatorPinnedRowBackground: "rowSeparatorPinnedRowBackground", columnResizingSeparatorWidth: "columnResizingSeparatorWidth", columnResizingSeparatorOpacity: "columnResizingSeparatorOpacity", columnMovingSeparatorWidth: "columnMovingSeparatorWidth", columnMovingSeparatorOpacity: "columnMovingSeparatorOpacity", columnResizingSeparatorBackground: "columnResizingSeparatorBackground", columnMovingSeparatorBackground: "columnMovingSeparatorBackground", shiftSectionContent: "shiftSectionContent", columnOptionsIconAlignment: "columnOptionsIconAlignment", columnOptionsIconColor: "columnOptionsIconColor", columnOptionsIconBehavior: "columnOptionsIconBehavior", border: "border", actualBorderWidth: "actualBorderWidth", borderWidthBottom: "borderWidthBottom", borderWidthLeft: "borderWidthLeft", borderWidthRight: "borderWidthRight", borderWidthTop: "borderWidthTop", notifyOnAllSelectionChanges: "notifyOnAllSelectionChanges", cornerRadiusBottomRight: "cornerRadiusBottomRight", cornerRadiusBottomLeft: "cornerRadiusBottomLeft", cornerRadiusTopLeft: "cornerRadiusTopLeft", cornerRadiusTopRight: "cornerRadiusTopRight", actualCornerRadiusBottomRight: "actualCornerRadiusBottomRight", actualCornerRadiusBottomLeft: "actualCornerRadiusBottomLeft", actualCornerRadiusTopLeft: "actualCornerRadiusTopLeft", actualCornerRadiusTopRight: "actualCornerRadiusTopRight", isActiveCellStyleEnabled: "isActiveCellStyleEnabled", responsiveStates: "responsiveStates", initialSorts: "initialSorts", initialGroups: "initialGroups", initialSummaries: "initialSummaries", summaryScope: "summaryScope", isGroupCollapsable: "isGroupCollapsable", groupHeaderDisplayMode: "groupHeaderDisplayMode", isGroupExpandedDefault: "isGroupExpandedDefault", groupSummaryDisplayMode: "groupSummaryDisplayMode", autoAcceptEdits: "autoAcceptEdits", primaryKey: "primaryKey", actualPrimaryKey: "actualPrimaryKey", actualColumns: "actualColumns", reactsToSortChanges: "reactsToSortChanges", reactsToGroupChanges: "reactsToGroupChanges", reactsToFilterChanges: "reactsToFilterChanges", enterBehavior: "enterBehavior", enterBehaviorAfterEdit: "enterBehaviorAfterEdit", isColumnOptionsSummariesEnabled: "isColumnOptionsSummariesEnabled", isColumnOptionsGroupingEnabled: "isColumnOptionsGroupingEnabled", mergedCellMode: "mergedCellMode", mergedCellEvaluationCriteria: "mergedCellEvaluationCriteria", mergedCellVerticalAlignment: "mergedCellVerticalAlignment", filterUIType: "filterUIType", filterLogicalOperator: "filterLogicalOperator", filterComparisonType: "filterComparisonType", todayOverride: "todayOverride", clearSelectionOnEscape: "clearSelectionOnEscape", pageSize: "pageSize", isToolbarColumnChooserVisible: "isToolbarColumnChooserVisible", isToolbarColumnPinningVisible: "isToolbarColumnPinningVisible", toolbarTitle: "toolbarTitle", toolbarColumnChooserText: "toolbarColumnChooserText", toolbarColumnChooserTitle: "toolbarColumnChooserTitle", toolbarColumnPinningText: "toolbarColumnPinningText", toolbarColumnPinningTitle: "toolbarColumnPinningTitle", scrollbarStyle: "scrollbarStyle", scrollbarBackground: "scrollbarBackground", allowCopyOperation: "allowCopyOperation", deferEventForRowDragSelection: "deferEventForRowDragSelection" }, outputs: { filterExpressionsChanging: "filterExpressionsChanging", filterExpressionsChanged: "filterExpressionsChanged", cellPreviewPointerDown: "cellPreviewPointerDown", cellPreviewPointerUp: "cellPreviewPointerUp", cellPointerDown: "cellPointerDown", cellPointerUp: "cellPointerUp", cellClicked: "cellClicked", sortDescriptionsChanged: "sortDescriptionsChanged", groupDescriptionsChanged: "groupDescriptionsChanged", summaryDescriptionsChanged: "summaryDescriptionsChanged", columnHiddenChanged: "columnHiddenChanged", columnPinnedChanged: "columnPinnedChanged", cellValueChanging: "cellValueChanging", dataCommitted: "dataCommitted", dataCommitting: "dataCommitting", rootSummariesChanged: "rootSummariesChanged", sizeChanged: "sizeChanged", actualColumnsChanged: "actualColumnsChanged", columnsAutoGenerated: "columnsAutoGenerated", selectedItemsChanged: "selectedItemsChanged", selectedKeysChanged: "selectedKeysChanged", selectedCellsChanged: "selectedCellsChanged", selectionChanged: "selectionChanged", activeCellChanged: "activeCellChanged", selectedCellRangesChanged: "selectedCellRangesChanged", columnWidthChanged: "columnWidthChanged", cellEditStarted: "cellEditStarted", cellEditEnded: "cellEditEnded", rowEditStarted: "rowEditStarted", rowEditEnded: "rowEditEnded", customFilterRequested: "customFilterRequested", actualPrimaryKeyChange: "actualPrimaryKeyChange" }, host: { classAttribute: "ig-data-grid igx-data-grid" }, providers: [], queries: [{ propertyName: "contentColumns", predicate: IgxDataGridColumnComponent }], viewQueries: [{ propertyName: "_dynamicContent", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+    <ng-container #dynamicContent></ng-container>
+  `, isInline: true, styles: [":host {\n\t\tdisplay: block;\n        box-sizing: border-box;\n        overflow: hidden;\n\t}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    return IgxDataGridComponent;
+})();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'igx-data-grid',
+                    styles: [`:host {
+		display: block;
+        box-sizing: border-box;
+        overflow: hidden;
+	}`],
+                    template: `
+    <ng-container #dynamicContent></ng-container>
+  `,
+                    host: { 'class': 'ig-data-grid igx-data-grid' },
+                    providers: [],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { contentColumns: [{
+                type: ContentChildren,
+                args: [IgxDataGridColumnComponent]
+            }], _dynamicContent: [{
+                type: ViewChild,
+                args: ["dynamicContent", { read: ViewContainerRef, static: true }]
+            }], height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], columnResizingMode: [{
+                type: Input
+            }], columnMovingMode: [{
+                type: Input
+            }], isRowHoverEnabled: [{
+                type: Input
+            }], rowHoverBackground: [{
+                type: Input
+            }], rowHoverTextColor: [{
+                type: Input
+            }], editRowBorder: [{
+                type: Input
+            }], editRowBorderWidthBottom: [{
+                type: Input
+            }], editRowBorderWidthLeft: [{
+                type: Input
+            }], editRowBorderWidthRight: [{
+                type: Input
+            }], editRowBorderWidthTop: [{
+                type: Input
+            }], sectionHeader: [{
+                type: Input
+            }], summaryRowRoot: [{
+                type: Input
+            }], summaryRowSection: [{
+                type: Input
+            }], rowSeparator: [{
+                type: Input
+            }], headerRowSeparator: [{
+                type: Input
+            }], headerSeparator: [{
+                type: Input
+            }], columnResizingSeparator: [{
+                type: Input
+            }], columnMovingSeparator: [{
+                type: Input
+            }], pinnedAreaSeparator: [{
+                type: Input
+            }], autoGenerateDesiredProperties: [{
+                type: Input
+            }], dataSourceDesiredProperties: [{
+                type: Input
+            }], density: [{
+                type: Input
+            }], actualRowHeight: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], defaultColumnMinWidth: [{
+                type: Input
+            }], actualHeaderHeight: [{
+                type: Input
+            }], headerHeight: [{
+                type: Input
+            }], headerClickAction: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], editModeClickAction: [{
+                type: Input
+            }], editOnKeyPress: [{
+                type: Input
+            }], autoGenerateColumns: [{
+                type: Input
+            }], rowSeparatorHeight: [{
+                type: Input
+            }], isPlaceholderRenderingEnabled: [{
+                type: Input
+            }], columnAddingAnimationMode: [{
+                type: Input
+            }], columnPropertyUpdatingAnimationMode: [{
+                type: Input
+            }], cellDataLoadedAnimationMode: [{
+                type: Input
+            }], rowSelectionAnimationMode: [{
+                type: Input
+            }], rowHoverAnimationMode: [{
+                type: Input
+            }], cellSelectionAnimationMode: [{
+                type: Input
+            }], animationSettings: [{
+                type: Input
+            }], columnResizingAnimationMode: [{
+                type: Input
+            }], columnShowingAnimationMode: [{
+                type: Input
+            }], columnMovingAnimationMode: [{
+                type: Input
+            }], columnHidingAnimationMode: [{
+                type: Input
+            }], columnExchangingAnimationMode: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], activationMode: [{
+                type: Input
+            }], selectionBehavior: [{
+                type: Input
+            }], mouseDragSelectionEnabled: [{
+                type: Input
+            }], selectedItems: [{
+                type: Input
+            }], selectedKeys: [{
+                type: Input
+            }], selectedCells: [{
+                type: Input
+            }], selectedCellRanges: [{
+                type: Input
+            }], pinnedItems: [{
+                type: Input
+            }], pinnedKeys: [{
+                type: Input
+            }], isColumnOptionsEnabled: [{
+                type: Input
+            }], isGroupRowSticky: [{
+                type: Input
+            }], isHeaderSeparatorVisible: [{
+                type: Input
+            }], cellSelectedBackground: [{
+                type: Input
+            }], sectionHeaderSelectedBackground: [{
+                type: Input
+            }], summaryRootBackground: [{
+                type: Input
+            }], summarySectionBackground: [{
+                type: Input
+            }], pinnedRowOpacity: [{
+                type: Input
+            }], editTextStyle: [{
+                type: Input
+            }], editOpacity: [{
+                type: Input
+            }], deletedTextColor: [{
+                type: Input
+            }], stickyRowBackground: [{
+                type: Input
+            }], pinnedRowBackground: [{
+                type: Input
+            }], lastStickyRowBackground: [{
+                type: Input
+            }], activeCell: [{
+                type: Input
+            }], cellBackground: [{
+                type: Input
+            }], cellTextColor: [{
+                type: Input
+            }], headerSortIndicatorColor: [{
+                type: Input
+            }], headerSortIndicatorStyle: [{
+                type: Input
+            }], cellTextStyle: [{
+                type: Input
+            }], sectionHeaderBackground: [{
+                type: Input
+            }], sectionHeaderTextColor: [{
+                type: Input
+            }], sectionHeaderTextStyle: [{
+                type: Input
+            }], summaryRootLabelTextStyle: [{
+                type: Input
+            }], summarySectionLabelTextStyle: [{
+                type: Input
+            }], summaryRootValueTextColor: [{
+                type: Input
+            }], summaryRootValueTextStyle: [{
+                type: Input
+            }], summarySectionValueTextStyle: [{
+                type: Input
+            }], summarySectionValueTextColor: [{
+                type: Input
+            }], summaryRootLabelTextColor: [{
+                type: Input
+            }], summarySectionLabelTextColor: [{
+                type: Input
+            }], summaryRootSelectedBackground: [{
+                type: Input
+            }], summarySectionSelectedBackground: [{
+                type: Input
+            }], pinnedAreaSeparatorWidth: [{
+                type: Input
+            }], headerSeparatorWidth: [{
+                type: Input
+            }], headerSeparatorBackground: [{
+                type: Input
+            }], headerBackground: [{
+                type: Input
+            }], headerTextColor: [{
+                type: Input
+            }], headerTextStyle: [{
+                type: Input
+            }], rowSeparatorBackground: [{
+                type: Input
+            }], headerRowSeparatorBackground: [{
+                type: Input
+            }], rowSeparatorStickyRowBackground: [{
+                type: Input
+            }], rowSeparatorLastStickyRowBackground: [{
+                type: Input
+            }], rowSeparatorPinnedRowBackground: [{
+                type: Input
+            }], columnResizingSeparatorWidth: [{
+                type: Input
+            }], columnResizingSeparatorOpacity: [{
+                type: Input
+            }], columnMovingSeparatorWidth: [{
+                type: Input
+            }], columnMovingSeparatorOpacity: [{
+                type: Input
+            }], columnResizingSeparatorBackground: [{
+                type: Input
+            }], columnMovingSeparatorBackground: [{
+                type: Input
+            }], shiftSectionContent: [{
+                type: Input
+            }], columnOptionsIconAlignment: [{
+                type: Input
+            }], columnOptionsIconColor: [{
+                type: Input
+            }], columnOptionsIconBehavior: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], actualBorderWidth: [{
+                type: Input
+            }], borderWidthBottom: [{
+                type: Input
+            }], borderWidthLeft: [{
+                type: Input
+            }], borderWidthRight: [{
+                type: Input
+            }], borderWidthTop: [{
+                type: Input
+            }], notifyOnAllSelectionChanges: [{
+                type: Input
+            }], cornerRadiusBottomRight: [{
+                type: Input
+            }], cornerRadiusBottomLeft: [{
+                type: Input
+            }], cornerRadiusTopLeft: [{
+                type: Input
+            }], cornerRadiusTopRight: [{
+                type: Input
+            }], actualCornerRadiusBottomRight: [{
+                type: Input
+            }], actualCornerRadiusBottomLeft: [{
+                type: Input
+            }], actualCornerRadiusTopLeft: [{
+                type: Input
+            }], actualCornerRadiusTopRight: [{
+                type: Input
+            }], isActiveCellStyleEnabled: [{
+                type: Input
+            }], responsiveStates: [{
+                type: Input
+            }], initialSorts: [{
+                type: Input
+            }], initialGroups: [{
+                type: Input
+            }], initialSummaries: [{
+                type: Input
+            }], summaryScope: [{
+                type: Input
+            }], isGroupCollapsable: [{
+                type: Input
+            }], groupHeaderDisplayMode: [{
+                type: Input
+            }], isGroupExpandedDefault: [{
+                type: Input
+            }], groupSummaryDisplayMode: [{
+                type: Input
+            }], autoAcceptEdits: [{
+                type: Input
+            }], primaryKey: [{
+                type: Input
+            }], actualPrimaryKey: [{
+                type: Input
+            }], actualColumns: [{
+                type: Input
+            }], reactsToSortChanges: [{
+                type: Input
+            }], reactsToGroupChanges: [{
+                type: Input
+            }], reactsToFilterChanges: [{
+                type: Input
+            }], enterBehavior: [{
+                type: Input
+            }], enterBehaviorAfterEdit: [{
+                type: Input
+            }], isColumnOptionsSummariesEnabled: [{
+                type: Input
+            }], isColumnOptionsGroupingEnabled: [{
+                type: Input
+            }], mergedCellMode: [{
+                type: Input
+            }], mergedCellEvaluationCriteria: [{
+                type: Input
+            }], mergedCellVerticalAlignment: [{
+                type: Input
+            }], filterUIType: [{
+                type: Input
+            }], filterLogicalOperator: [{
+                type: Input
+            }], filterComparisonType: [{
+                type: Input
+            }], todayOverride: [{
+                type: Input
+            }], clearSelectionOnEscape: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], isToolbarColumnChooserVisible: [{
+                type: Input
+            }], isToolbarColumnPinningVisible: [{
+                type: Input
+            }], toolbarTitle: [{
+                type: Input
+            }], toolbarColumnChooserText: [{
+                type: Input
+            }], toolbarColumnChooserTitle: [{
+                type: Input
+            }], toolbarColumnPinningText: [{
+                type: Input
+            }], toolbarColumnPinningTitle: [{
+                type: Input
+            }], scrollbarStyle: [{
+                type: Input
+            }], scrollbarBackground: [{
+                type: Input
+            }], allowCopyOperation: [{
+                type: Input
+            }], deferEventForRowDragSelection: [{
+                type: Input
+            }], filterExpressionsChanging: [{
+                type: Output
+            }], filterExpressionsChanged: [{
+                type: Output
+            }], cellPreviewPointerDown: [{
+                type: Output
+            }], cellPreviewPointerUp: [{
+                type: Output
+            }], cellPointerDown: [{
+                type: Output
+            }], cellPointerUp: [{
+                type: Output
+            }], cellClicked: [{
+                type: Output
+            }], sortDescriptionsChanged: [{
+                type: Output
+            }], groupDescriptionsChanged: [{
+                type: Output
+            }], summaryDescriptionsChanged: [{
+                type: Output
+            }], columnHiddenChanged: [{
+                type: Output
+            }], columnPinnedChanged: [{
+                type: Output
+            }], cellValueChanging: [{
+                type: Output
+            }], dataCommitted: [{
+                type: Output
+            }], dataCommitting: [{
+                type: Output
+            }], rootSummariesChanged: [{
+                type: Output
+            }], sizeChanged: [{
+                type: Output
+            }], actualColumnsChanged: [{
+                type: Output
+            }], columnsAutoGenerated: [{
+                type: Output
+            }], selectedItemsChanged: [{
+                type: Output
+            }], selectedKeysChanged: [{
+                type: Output
+            }], selectedCellsChanged: [{
+                type: Output
+            }], selectionChanged: [{
+                type: Output
+            }], activeCellChanged: [{
+                type: Output
+            }], selectedCellRangesChanged: [{
+                type: Output
+            }], columnWidthChanged: [{
+                type: Output
+            }], cellEditStarted: [{
+                type: Output
+            }], cellEditEnded: [{
+                type: Output
+            }], rowEditStarted: [{
+                type: Output
+            }], rowEditEnded: [{
+                type: Output
+            }], customFilterRequested: [{
+                type: Output
+            }], actualPrimaryKeyChange: [{
+                type: Output
+            }] } });