@catull/igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,189 lines (1,188 loc) • 686 kB
JavaScript
import { __assign, __decorate, __extends, __metadata, __param, __read, __spread, __values } from "tslib";
import { DOCUMENT } from '@angular/common';
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ContentChildren, ContentChild, ElementRef, EventEmitter, HostBinding, Inject, Input, IterableChangeRecord, IterableDiffers, NgZone, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, InjectionToken, Optional, DoCheck, Directive } from '@angular/core';
import ResizeObserver from 'resize-observer-polyfill';
import { Subject, combineLatest, pipe } from 'rxjs';
import { takeUntil, first, filter, throttleTime, map } from 'rxjs/operators';
import { cloneArray, isEdge, isNavigationKey, flatten, mergeObjects, isIE } from '../core/utils';
import { DataType } from '../data-operations/data-util';
import { FilteringLogic } from '../data-operations/filtering-expression.interface';
import { IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
import { AbsoluteScrollStrategy, HorizontalAlignment, VerticalAlignment, IgxOverlayService, OverlaySettings, PositionSettings, ConnectedPositioningStrategy, ContainerPositionStrategy } from '../services/index';
import { GridBaseAPIService } from './api.service';
import { RowEditPositionStrategy } from './grid.common';
import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
import { IgxRowDirective } from './row.directive';
import { IgxOverlayOutletDirective, IgxToggleDirective } from '../directives/toggle/toggle.directive';
import { FilteringExpressionsTree, FilteringExpressionsTreeType } from '../data-operations/filtering-expressions-tree';
import { TransactionType } from '../services/index';
import { IgxRowEditTemplateDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowEditActionsDirective } from './grid.rowEdit.directive';
import { IgxGridNavigationService } from './grid-navigation.service';
import { DisplayDensityToken, DisplayDensityBase, DisplayDensity } from '../core/displayDensity';
import { IgxFilteringService } from './filtering/grid-filtering.service';
import { WatchChanges } from './watch-changes';
import { IgxGridHeaderGroupComponent } from './headers/grid-header-group.component';
import { CurrentResourceStrings } from '../core/i18n/resources';
import { IgxGridSummaryService } from './summaries/grid-summary.service';
import { IgxSummaryRowComponent } from './summaries/summary-row.component';
import { IgxGridSelectionService, GridSelectionRange, IgxGridCRUDService, IgxRow, IgxCell, isChromium } from './selection/selection.service';
import { DragScrollDirection } from './selection/drag-select.directive';
import { IgxTemplateOutletDirective } from '../directives/template-outlet/template_outlet.directive';
import { IgxExcelStyleLoadingValuesTemplateDirective } from './filtering/excel-style/excel-style-search.component';
import { IgxExcelStyleSortingTemplateDirective, IgxExcelStylePinningTemplateDirective, IgxExcelStyleHidingTemplateDirective, IgxExcelStyleMovingTemplateDirective } from './filtering/excel-style/grid.excel-style-filtering.component';
import { IgxGridColumnResizerComponent } from './resizing/resizer.component';
import { IgxGridFilteringRowComponent } from './filtering/base/grid-filtering-row.component';
import { CharSeparatedValueData } from '../services/csv/char-separated-value-data';
import { IgxColumnResizingService } from './resizing/resizing.service';
import { DeprecateProperty } from '../core/deprecateDecorators';
import { IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective } from './grid/grid.directives';
import { GridKeydownTargetType, GridSelectionMode, GridSummaryPosition, GridSummaryCalculationMode, FilterMode } from './common/enums';
import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
import { IgxDecimalPipeComponent, IgxDatePipeComponent } from './common/pipes';
import { DropPosition } from './moving/moving.service';
import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './selection/row-selectors';
import { IgxGridToolbarCustomContentDirective } from './toolbar/toolbar.directive';
import { IgxColumnComponent } from './columns/column.component';
import { IgxColumnGroupComponent } from './columns/column-group.component';
import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective } from './row-drag.directive';
var MINIMUM_COLUMN_WIDTH = 136;
var FILTER_ROW_HEIGHT = 50;
// By default row editing overlay outlet is inside grid body so that overlay is hidden below grid header when scrolling.
// In cases when grid has 1-2 rows there isn't enough space in grid body and row editing overlay should be shown above header.
// Default row editing overlay height is higher then row height that is why the case is valid also for row with 2 rows.
// More accurate calculation is not possible, cause row editing overlay is still not shown and we don't know its height,
// but in the same time we need to set row editing overlay outlet before opening the overlay itself.
var MIN_ROW_EDITING_COUNT_THRESHOLD = 2;
export var IgxGridTransaction = new InjectionToken('IgxGridTransaction');
var IgxGridBaseDirective = /** @class */ (function (_super) {
__extends(IgxGridBaseDirective, _super);
function IgxGridBaseDirective(selectionService, crudService, colResizingService, gridAPI, _transactions, elementRef, zone, document, cdr, resolver, differs, viewRef, navigation, filteringService, overlayService, summaryService, _displayDensityOptions) {
var _this = _super.call(this, _displayDensityOptions) || this;
_this.selectionService = selectionService;
_this.crudService = crudService;
_this.colResizingService = colResizingService;
_this.gridAPI = gridAPI;
_this._transactions = _transactions;
_this.elementRef = elementRef;
_this.zone = zone;
_this.document = document;
_this.cdr = cdr;
_this.resolver = resolver;
_this.differs = differs;
_this.viewRef = viewRef;
_this.navigation = navigation;
_this.filteringService = filteringService;
_this.overlayService = overlayService;
_this.summaryService = summaryService;
_this._displayDensityOptions = _displayDensityOptions;
_this._init = true;
_this._cdrRequests = false;
_this._cdrRequestRepaint = false;
_this._resourceStrings = CurrentResourceStrings.GridResStrings;
_this._emptyGridMessage = null;
_this._emptyFilteredGridMessage = null;
_this._isLoading = false;
_this._locale = null;
_this._destroyed = false;
_this.overlayIDs = [];
_this._advancedFilteringPositionSettings = {
verticalDirection: VerticalAlignment.Middle,
horizontalDirection: HorizontalAlignment.Center,
horizontalStartPoint: HorizontalAlignment.Center,
verticalStartPoint: VerticalAlignment.Middle
};
_this._advancedFilteringOverlaySettings = {
closeOnOutsideClick: false,
modal: false,
positionStrategy: new ConnectedPositioningStrategy(_this._advancedFilteringPositionSettings),
};
/**
* An @Input property that autogenerates the `IgxGridComponent` columns.
* The default value is false.
* ```html
* <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.autoGenerate = false;
/**
* Emitted after filtering is performed.
* Returns the filtering expressions tree of the column for which filtering was performed.
* ```typescript
* filteringExprTreeChange(event: IFilteringExpressionsTree){
* const filteringTree = event;
* }
* ```
* ```html
* <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
* (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.filteringExpressionsTreeChange = new EventEmitter();
/**
* Emitted after advanced filtering is performed.
* Returns the advanced filtering expressions tree.
* ```typescript
* advancedFilteringExprTreeChange(event: IFilteringExpressionsTree){
* const filteringTree = event;
* }
* ```
* ```html
* <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
* (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.advancedFilteringExpressionsTreeChange = new EventEmitter();
/**
*@hidden
*/
_this.pageChange = new EventEmitter();
/**
*@hidden
*/
_this.perPageChange = new EventEmitter();
/**
* @hidden
* @internal
*/
_this.rowDragging = false;
/**
* An @Input property that adds styling classes applied to all even `IgxGridRowComponent`s in the grid.
* ```html
* <igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.evenRowCSS = 'igx-grid__tr--even';
/**
* An @Input property that adds styling classes applied to all odd `IgxGridRowComponent`s in the grid.
* ```html
* <igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.oddRowCSS = 'igx-grid__tr--odd';
/**
* An @Input property that sets the title to be displayed in the built-in column hiding UI.
* ```html
* <igx-grid [showToolbar]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.columnHidingTitle = '';
/**
* An @Input property that sets the title to be displayed in the UI of the column pinning.
* ```html
* <igx-grid #grid [data]="localData" [columnPinning]="'true" [columnPinningTitle]="'Column Hiding'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.columnPinningTitle = '';
/**
* Emitted when `IgxGridCellComponent` is clicked. Returns the `IgxGridCellComponent`.
* ```html
* <igx-grid #grid (onCellClick)="onCellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
* ```typescript
* public onCellClick(e){
* alert("The cell has been clicked!");
* }
* ```
* @memberof IgxGridBaseDirective
*/
_this.onCellClick = new EventEmitter();
/**
* Emitted when `IgxGridCellComponent` is selected. Returns the `IgxGridCellComponent`.
* ```html
* <igx-grid #grid (onSelection)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
* ```typescript
* public onCellSelect(e){
* alert("The cell has been selected!");
* }
* ```
* @memberof IgxGridBaseDirective
*/
_this.onSelection = new EventEmitter();
/**
* Emitted when `IgxGridRowComponent` is selected.
* ```html
* <igx-grid #grid (onRowSelectionChange)="onCellClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
* ```
* ```typescript
* public onCellClickChange(e){
* alert("The selected row has been changed!");
* }
* ```
* @memberof IgxGridBaseDirective
*/
_this.onRowSelectionChange = new EventEmitter();
/**
* Emitted when `IgxColumnComponent` is pinned.
* The index that the column is inserted at may be changed through the `insertAtIndex` property.
* ```typescript
* public columnPinning(event) {
* if (event.column.field === "Name") {
* event.insertAtIndex = 0;
* }
* }
* ```
* @memberof IgxGridBaseDirective
*/
_this.onColumnPinning = new EventEmitter();
/**
* An @Output property emitting an event when `IgxGridCellComponent`
* editing has been performed in the grid and the values have **not** been submitted (e.g. `Esc` key was pressed).
* This event is cancelable.
*
* args: IGridEditEventArgs = {
* cancel: bool,
* cellID: {
* columnID: int,
* rowID: int,
* rowIndex: int
* }
* newValue: object,
* oldValue: object,
* rowID: int
* }
*
* ```typescript
* editCancel(event: IGridEditEventArgs){
* const rowID: IgxColumnComponent = event.rowID;
* }
* ```
* ```html
* <igx-grid #grid3 (onCellEditCancel)="editCancel($event)" [data]="remote | async" [primaryKey]="'ProductID'">
* <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
* <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
* <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
* </igx-grid>
* ```
* @memberof IgxGridComponent
*/
_this.onCellEditCancel = new EventEmitter();
/**
* An @Output property emitting an event when `IgxGridCellComponent` enters edit mode.
* This event is cancelable.
*
* args: IGridEditEventArgs = {
* cancel: bool,
* cellID: {
* columnID: int,
* rowID: int,
* rowIndex: int
* }
* oldValue: object,
* rowID: int
* }
*
* ```typescript
* editStart(event: IGridEditEventArgs){
* const value: IgxColumnComponent = event.newValue;
* }
* ```
* ```html
* <igx-grid #grid3 (onCellEditEnter)="editStart($event)" [data]="remote | async" (onSortingDone)="process($event)"
* [primaryKey]="'ProductID'">
* <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
* <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
* <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
* </igx-grid>
* ```
* @memberof IgxGridComponent
*/
_this.onCellEditEnter = new EventEmitter();
/**
* An @Output property emitting an event when `IgxGridCellComponent` editing has been performed in the grid.
* Event is fired after editing is completed, when the cell is exiting edit mode.
* This event is cancelable.
*
* args: IGridEditEventArgs = {
* cancel: bool,
* cellID: {
* columnID: int,
* rowID: int,
* rowIndex: int
* }
* newValue: object,
* oldValue: object,
* rowID: int
* }
*
* ```typescript
* editDone(event: IGridEditEventArgs){
* const value: IgxColumnComponent = event.newValue;
* }
* ```
* ```html
* <igx-grid #grid3 (onCellEdit)="editDone($event)" [data]="remote | async" (onSortingDone)="process($event)"
* [primaryKey]="'ProductID'">
* <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
* <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
* <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
* </igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onCellEdit = new EventEmitter();
/**
* An @Output property emitting an event when [rowEditable]="true" a row enters edit mode.
* This event is cancelable.
*
* args: IGridEditEventArgs = {
* cancel: bool,
* oldValue: <rowObj>,
* rowID: int
* }
*
* Bind to the event in markup as follows:
* ```html
* <igx-grid #grid3 (onRowEditEnter)="editStart($event)" [data]="remote | async" (onSortingDone)="process($event)"
* [primaryKey]="'ProductID'" [rowEditable]="true">
* <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
* <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
* <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
* </igx-grid>
* ```
* ```typescript
* editStart(event: IGridEditEventArgs) {
* const editedRowObj = event.oldValue;
* const cancelValue = event.cancel;
* const rowID = event.rowID;
* }
* ```
* @memberof IgxGridComponent
*/
_this.onRowEditEnter = new EventEmitter();
/**
* An @Output property emitting an event when [rowEditable]="true" & `endEdit(true)` is called.
* Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row,
* performing paging operation, column resizing, pinning, moving or hitting `Done`
* button inside of the rowEditingOverlay, or hitting the `Enter` key while editing a cell.
* This event is cancelable.
*
* args: IGridEditEventArgs = {
* cancel: bool,
* newValue: <rowObj>,
* oldValue: <rowObj>,
* rowID: int
* }
*
* Bind to the event in markup as follows:
* ```html
* <igx-grid #grid3 (onRowEdit)="editDone($event)" [data]="remote | async" (onSortingDone)="process($event)"
* [primaryKey]="'ProductID'" [rowEditable]="true">
* <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
* <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
* <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
* </igx-grid>
* ```
*
* ```typescript
* editDone(event: IGridEditEventArgs) {
* const originalRowObj = event.oldValue;
* const updatedRowObj = event.newValue;
* const cancelValue = event.cancel;
* const rowID = event.rowID;
* }
* ```
* @memberof IgxGridBaseDirective
*/
_this.onRowEdit = new EventEmitter();
/**
* An @Output property emitting an event when [rowEditable]="true" & `endEdit(false)` is called.
* Emitted when changing hitting `Esc` key during cell editing and when click on the `Cancel` button
* in the row editing overlay.
* This event is cancelable.
*
* args: IGridEditEventArgs = {
* cancel: bool,
* newValue: <rowObj>,
* oldValue: <rowObj>,
* rowID: int
* }
*
* Bind to the event in markup as follows:
* ```html
* <igx-grid #grid3 (onRowEditCancel)="editCancel($event)" [data]="remote | async" (onSortingDone)="process($event)"
* [primaryKey]="'ProductID'" [rowEditable]="true">
* <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
* <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
* <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
* </igx-grid>
* ```
* ```typescript
* editCancel(emitted: { row: IgxGridRowComponent, newValue: any, oldValue: any }): void {
* const originalRowObj = event.oldValue;
* const updatedRowObj = event.newValue;
* const cancelValue = event.cancel;
* const rowID = event.rowID;
* }
* ```
* @memberof IgxGridBaseDirective
*/
_this.onRowEditCancel = new EventEmitter();
/**
* Emitted when a grid column is initialized. Returns the column object.
* ```html
* <igx-grid #grid [data]="localData" [onColumnInit]="initColumns($event)" [autoGenerate]="true"></igx-grid>
* ```
* ```typescript
* initColumns(event: IgxColumnComponent) {
* const column: IgxColumnComponent = event;
* column.filterable = true;
* column.sortable = true;
* column.editable = true;
* }
* ```
* @memberof IgxGridBaseDirective
*/
_this.onColumnInit = new EventEmitter();
/**
* Emitted when sorting is performed through the UI. Returns the sorting expression.
* ```html
* <igx-grid #grid [data]="localData" [autoGenerate]="true" (onSortingDone)="sortingDone($event)"></igx-grid>
* ```
* ```typescript
* sortingDone(event: SortingDirection){
* const sortingDirection = event;
* }
* ```
* @memberof IgxGridBaseDirective
*/
_this.onSortingDone = new EventEmitter();
/**
* Emitted when filtering is performed through the UI.
* Returns the filtering expressions tree of the column for which filtering was performed.
* ```typescript
* filteringDone(event: IFilteringExpressionsTree){
* const filteringTree = event;
*}
* ```
* ```html
* <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onFilteringDone)="filteringDone($event)"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onFilteringDone = new EventEmitter();
/**
* Emitted when paging is performed. Returns an object consisting of the previous and next pages.
* ```typescript
* pagingDone(event: IPageEventArgs){
* const paging = event;
* }
* ```
* ```html
* <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onPagingDone)="pagingDone($event)"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onPagingDone = new EventEmitter();
/**
* Emitted when a `IgxGridRowComponent` is being added to the `IgxGridComponent` through the API.
* Returns the data for the new `IgxGridRowComponent` object.
* ```typescript
* rowAdded(event: IRowDataEventArgs){
* const rowInfo = event;
* }
* ```
* ```html
* <igx-grid #grid [data]="localData" (onRowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onRowAdded = new EventEmitter();
/**
* Emitted when a `IgxGridRowComponent` is deleted through the `IgxGridComponent` API.
* Returns an `IRowDataEventArgs` object.
* ```typescript
* rowDeleted(event: IRowDataEventArgs){
* const rowInfo = event;
* }
* ```
* ```html
* <igx-grid #grid [data]="localData" (onRowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onRowDeleted = new EventEmitter();
/**
* Emitted when a new chunk of data is loaded from virtualization.
* ```typescript
* <igx-grid #grid [data]="localData" [autoGenerate]="true" (onDataPreLoad)='handleDataPreloadEvent()'></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onDataPreLoad = new EventEmitter();
/**
* Emitted when `IgxColumnComponent` is resized.
* Returns the `IgxColumnComponent` object's old and new width.
* ```typescript
* resizing(event: IColumnResizeEventArgs){
* const grouping = event;
* }
* ```
* ```html
* <igx-grid #grid [data]="localData" (onColumnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onColumnResized = new EventEmitter();
/**
* Emitted when a `IgxGridCellComponent` is right clicked. Returns the `IgxGridCellComponent` object.
* ```typescript
* contextMenu(event: IGridCellEventArgs){
* const resizing = event;
* console.log(resizing);
* }
* ```
* ```html
* <igx-grid #grid [data]="localData" (onContextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onContextMenu = new EventEmitter();
/**
* Emitted when a `IgxGridCellComponent` is double clicked. Returns the `IgxGridCellComponent` object.
* ```typescript
* dblClick(event: IGridCellEventArgs){
* const dblClick = event;
* console.log(dblClick);
* }
* ```
* ```html
* <igx-grid #grid [data]="localData" (onDoubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onDoubleClick = new EventEmitter();
/**
* Emitted when `IgxColumnComponent` visibility is changed. Args: { column: any, newValue: boolean }
* ```typescript
* visibilityChanged(event: IColumnVisibilityChangedEventArgs){
* const visiblity = event;
* }
* ```
* ```html
* <igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onColumnVisibilityChanged = new EventEmitter();
/**
* Emitted when `IgxColumnComponent` moving starts. Returns the moved `IgxColumnComponent` object.
* ```typescript
* movingStart(event: IColumnMovingStartEventArgs){
* const movingStarts = event;
* }
* ```
* ```html
* <igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingStart)="movingStart($event)"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onColumnMovingStart = new EventEmitter();
/**
* Emitted throughout the `IgxColumnComponent` moving operation.
* Returns the source and target `IgxColumnComponent` objects. This event is cancelable.
* ```typescript
* moving(event: IColumnMovingEventArgs){
* const moving = event;
* }
* ```
* ```html
* <igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMoving)="moving($event)"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onColumnMoving = new EventEmitter();
/**
* Emitted when `IgxColumnComponent` moving ends.
* Returns the source and target `IgxColumnComponent` objects.
* ```typescript
* movingEnds(event: IColumnMovingEndEventArgs){
* const movingEnds = event;
* }
* ```
* ```html
* <igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingEnd)="movingEnds($event)"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
_this.onColumnMovingEnd = new EventEmitter();
/**
* Emitted when keydown is triggered over element inside grid's body.
* This event is fired only if the key combination is supported in the grid.
* Return the target type, target object and the original event. This event is cancelable.
* ```typescript
* customKeydown(args: IGridKeydownEventArgs) {
* const keydownEvent = args.event;
* }
* ```
* ```html
* <igx-grid (onGridKeydown)="customKeydown($event)"></igx-grid>
* ```
*/
_this.onGridKeydown = new EventEmitter();
/**
* Emitted when start dragging a row.
* Return the dragged row.
*/
_this.onRowDragStart = new EventEmitter();
/**
* Emitted when dropping a row.
* Return the dropped row.
*/
_this.onRowDragEnd = new EventEmitter();
/**
* Emitted when a copy operation is executed.
* Fired only if copy behavior is enabled through the [`clipboardOptions`]{@link IgxGridBaseDirective#clipboardOptions}.
*/
_this.onGridCopy = new EventEmitter();
/**
* @hidden
*/
_this.columnList = new QueryList();
/**
* @hidden
*/
_this.tmpOutlets = new QueryList();
/**
* The custom template, if any, that should be used when rendering a row expand indicator.
*/
_this.rowExpandedIndicatorTemplate = null;
/**
* The custom template, if any, that should be used when rendering a row collapse indicator.
*/
_this.rowCollapsedIndicatorTemplate = null;
/**
* The custom template, if any, that should be used when rendering a header expand indicator.
*/
_this.headerExpandIndicatorTemplate = null;
/**
* The custom template, if any, that should be used when rendering a header collapse indicator.
*/
_this.headerCollapseIndicatorTemplate = null;
/**
* @hidden
*/
_this.tabindex = 0;
/**
* @hidden
*/
_this.hostRole = 'grid';
/**
* Emitted before sorting is performed. Returns the sorting expressions.
* ```html
* <igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
* ```
* ```typescript
* sortingExprChange(event: ISortingExpression[]){
* const sortingExpressions = event;
* }
* ```
* @memberof IgxGridBaseDirective
*/
_this.sortingExpressionsChange = new EventEmitter();
/**
* @hidden
*/
_this.columnsWithNoSetWidths = null;
/* Toolbar related definitions */
_this._showToolbar = false;
_this._exportExcel = false;
_this._exportCsv = false;
_this._toolbarTitle = null;
_this._exportText = null;
_this._exportExcelText = null;
_this._exportCsvText = null;
_this._rowEditable = false;
_this._filteredSortedData = null;
/**
* Provides access to the `IgxToolbarComponent`.
* ```typescript
* const gridToolbar = this.grid.toolbar;
* ```
* @memberof IgxGridBaseDirective
*/
_this.toolbar = null;
_this.toolbarHtml = null;
/**
* Controls the copy behavior of the grid.
*/
_this.clipboardOptions = {
/**
* Enables/disables the copy behavior
*/
enabled: true,
/**
* Include the columns headers in the clipboard output.
*/
copyHeaders: true,
/**
* Apply the columns formatters (if any) on the data in the clipboard output.
*/
copyFormatters: true,
/**
* The separator used for formatting the copy output. Defaults to `\t`.
*/
separator: '\t'
};
/**
* Emitted when an export process is initiated by the user.
* ```typescript
* toolbarExporting(event: IGridToolbarExportEventArgs){
* const toolbarExporting = event;
* }
* ```
* @memberof IgxGridBaseDirective
*/
_this.onToolbarExporting = new EventEmitter();
/* End of toolbar related definitions */
/**
* Emitted when making a range selection either through
* drag selection or through keyboard selection.
*/
_this.onRangeSelection = new EventEmitter();
/**
* @hidden
*/
_this.calcHeight = 0;
/**
* @hidden
*/
_this.chipsGoupingExpressions = [];
/**
* @hidden
*/
_this.disableTransitions = false;
/**
* @hidden
*/
_this.lastSearchInfo = {
searchText: '',
caseSensitive: false,
exactMatch: false,
activeMatchIndex: 0,
matchInfoCache: []
};
/**
* @hidden
*/
_this.columnWidthSetByUser = false;
/**
* @hidden
*/
_this.destroy$ = new Subject();
/**
* @hidden
*/
_this._perPage = 15;
/**
* @hidden
*/
_this._page = 0;
/**
* @hidden
*/
_this._paging = false;
/**
* @hidden
*/
_this._hideRowSelectors = false;
/**
* @hidden
*/
_this._rowDrag = false;
/**
* @hidden
*/
_this._pipeTrigger = 0;
/**
* @hidden
*/
_this._summaryPipeTrigger = 0;
/**
* @hidden
*/
_this._columns = [];
/**
* @hidden
*/
_this._pinnedColumns = [];
/**
* @hidden
*/
_this._unpinnedColumns = [];
/**
* @hidden
*/
_this._filteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
/**
* @hidden
*/
_this._sortingExpressions = [];
/**
* @hidden
*/
_this._maxLevelHeaderDepth = null;
/**
* @hidden
*/
_this._columnHiding = false;
/**
* @hidden
*/
_this._columnPinning = false;
_this._allowFiltering = false;
_this._allowAdvancedFiltering = false;
_this._filterMode = FilterMode.quickFilter;
_this.observer = new ResizeObserver(function () { });
_this.resizeNotify = new Subject();
_this._hiddenColumnsText = '';
_this._pinnedColumnsText = '';
_this._height = '100%';
_this._width = '100%';
_this._horizontalForOfs = [];
_this._multiRowLayoutRowSize = 1;
// Caches
_this._totalWidth = NaN;
_this._pinnedVisible = [];
_this._unpinnedVisible = [];
_this._pinnedWidth = NaN;
_this._unpinnedWidth = NaN;
_this._visibleColumns = [];
_this._columnGroups = false;
_this._defaultTargetRecordNumber = 10;
_this._summaryPosition = GridSummaryPosition.bottom;
_this._summaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
_this._cellSelectionMode = GridSelectionMode.multiple;
_this._rowSelectionMode = GridSelectionMode.none;
_this.rowEditPositioningStrategy = new RowEditPositionStrategy({
horizontalDirection: HorizontalAlignment.Right,
verticalDirection: VerticalAlignment.Bottom,
horizontalStartPoint: HorizontalAlignment.Left,
verticalStartPoint: VerticalAlignment.Bottom,
closeAnimation: null
});
_this.rowEditSettings = {
scrollStrategy: new AbsoluteScrollStrategy(),
modal: false,
closeOnOutsideClick: false,
outlet: _this.rowOutletDirective,
positionStrategy: _this.rowEditPositioningStrategy
};
_this.verticalScrollHandler = function (event) {
_this.verticalScrollContainer.onScroll(event);
if (isEdge()) {
_this.wheelHandler(false);
}
_this.disableTransitions = true;
_this.zone.run(function () {
_this.zone.onStable.pipe(first()).subscribe(function () {
_this.verticalScrollContainer.onChunkLoad.emit(_this.verticalScrollContainer.state);
});
if (_this.rowEditable) {
_this.changeRowEditingOverlayStateOnScroll(_this.rowInEditMode);
}
});
_this.disableTransitions = false;
_this.hideOverlays();
};
_this.horizontalScrollHandler = function (event) {
var scrollLeft = event.target.scrollLeft;
if (isEdge()) {
_this.wheelHandler(true);
}
_this.headerContainer.onHScroll(scrollLeft);
_this._horizontalForOfs.forEach(function (vfor) { return vfor.onHScroll(scrollLeft); });
_this.cdr.markForCheck();
_this.zone.run(function () {
_this.zone.onStable.pipe(first()).subscribe(function () {
_this.parentVirtDir.onChunkLoad.emit(_this.headerContainer.state);
});
});
_this.hideOverlays();
};
_this.keydownHandler = function (event) {
var key = event.key.toLowerCase();
if ((isNavigationKey(key) && event.keyCode !== 32) || key === 'tab' || key === 'pagedown' || key === 'pageup') {
event.preventDefault();
if (key === 'pagedown') {
_this.verticalScrollContainer.scrollNextPage();
_this.nativeElement.focus();
}
else if (key === 'pageup') {
_this.verticalScrollContainer.scrollPrevPage();
_this.nativeElement.focus();
}
}
};
/**
* @hidden
*/
_this.scrollHandler = function (event) {
_this.headerContainer.scrollPosition += event.target.scrollLeft;
_this.verticalScrollContainer.scrollPosition += event.target.scrollTop;
event.target.scrollLeft = 0;
event.target.scrollTop = 0;
};
/**
* @hidden
*/
_this.wheelHandler = function (isScroll) {
if (isScroll === void 0) { isScroll = false; }
if (_this.document.activeElement &&
// tslint:disable-next-line:no-bitwise
(_this.document.activeElement.compareDocumentPosition(_this.tbody.nativeElement) & Node.DOCUMENT_POSITION_CONTAINS ||
// tslint:disable-next-line:no-bitwise
(_this.document.activeElement.
compareDocumentPosition(_this.tfoot.nativeElement) & Node.DOCUMENT_POSITION_CONTAINS && isScroll))) {
_this.document.activeElement.blur();
}
};
/**
* @hidden
*/
_this.rowEditingWheelHandler = function (event) {
if (event.deltaY > 0) {
_this.verticalScrollContainer.scrollNext();
}
else {
_this.verticalScrollContainer.scrollPrev();
}
};
_this.cdr.detach();
return _this;
}
Object.defineProperty(IgxGridBaseDirective.prototype, "scrollWidth", {
get: function () {
return this._scrollWidth;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridBaseDirective.prototype, "resourceStrings", {
/**
* An accessor that returns the resource strings.
*/
get: function () {
return this._resourceStrings;
},
/**
* An accessor that sets the resource strings.
* By default it uses EN resources.
*/
set: function (value) {
this._resourceStrings = Object.assign({}, this._resourceStrings, value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridBaseDirective.prototype, "filteringLogic", {
get: function () {
return this._filteringExpressionsTree.operator;
},
/**
* Sets the filtering logic of the `IgxGridComponent`.
* The default is AND.
* ```html
* <igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
set: function (value) {
this._filteringExpressionsTree.operator = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridBaseDirective.prototype, "filteringExpressionsTree", {
/**
* Returns the filtering state of `IgxGridComponent`.
* ```typescript
* let filteringExpressionsTree = this.grid.filteringExpressionsTree;
* ```
* @memberof IgxGridBaseDirective
*/
get: function () {
return this._filteringExpressionsTree;
},
/**
* Sets the filtering state of the `IgxGridComponent`.
* ```typescript
* const logic = new FilteringExpressionsTree(FilteringLogic.And, "ID");
* logic.filteringOperands = [
* {
* condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
* fieldName: 'ID',
* searchVal: 1
* }
* ];
* this.grid.filteringExpressionsTree = (logic);
* ```
* Two-way data binding.
* ```html
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
set: function (value) {
if (value && value instanceof FilteringExpressionsTree) {
var val = value;
for (var index = 0; index < val.filteringOperands.length; index++) {
if (!(val.filteringOperands[index] instanceof FilteringExpressionsTree)) {
var newExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, val.filteringOperands[index].fieldName);
newExpressionsTree.filteringOperands.push(val.filteringOperands[index]);
val.filteringOperands[index] = newExpressionsTree;
}
}
// clone the filtering expression tree in order to trigger the filtering pipe
var filteringExpressionTreeClone = new FilteringExpressionsTree(value.operator, value.fieldName);
filteringExpressionTreeClone.type = FilteringExpressionsTreeType.Regular;
filteringExpressionTreeClone.filteringOperands = value.filteringOperands;
this._filteringExpressionsTree = filteringExpressionTreeClone;
this.filteringExpressionsTreeChange.emit(this._filteringExpressionsTree);
if (this.filteringService.isFilteringExpressionsTreeEmpty() && !this.advancedFilteringExpressionsTree) {
this.filteredData = null;
}
this.filteringService.refreshExpressions();
this.selectionService.clearHeaderCBState();
this.summaryService.clearSummaryCache();
this.notifyChanges();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridBaseDirective.prototype, "advancedFilteringExpressionsTree", {
/**
* Returns the advanced filtering state of `IgxGridComponent`.
* ```typescript
* let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
* ```
* @memberof IgxGridBaseDirective
*/
get: function () {
return this._advancedFilteringExpressionsTree;
},
/**
* Sets the advanced filtering state of the `IgxGridComponent`.
* ```typescript
* const logic = new FilteringExpressionsTree(FilteringLogic.And);
* logic.filteringOperands = [
* {
* condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
* fieldName: 'ID',
* searchVal: 1
* },
* {
* condition: IgxStringFilteringOperand.instance().condition('contains'),
* fieldName: 'CompanyName',
* searchVal: 'a'
* }
* ];
* this.grid.advancedFilteringExpressionsTree = logic;
* ```
* @memberof IgxGridBaseDirective
*/
set: function (value) {
var _this = this;
if (value && value instanceof FilteringExpressionsTree) {
// clone the filtering expression tree in order to trigger the filtering pipe
var filteringExpressionTreeClone = new FilteringExpressionsTree(value.operator, value.fieldName);
filteringExpressionTreeClone.type = FilteringExpressionsTreeType.Advanced;
filteringExpressionTreeClone.filteringOperands = value.filteringOperands;
this._advancedFilteringExpressionsTree = filteringExpressionTreeClone;
}
else {
this._advancedFilteringExpressionsTree = null;
}
this.advancedFilteringExpressionsTreeChange.emit(this._advancedFilteringExpressionsTree);
if (this.filteringService.isFilteringExpressionsTreeEmpty() && !this.advancedFilteringExpressionsTree) {
this.filteredData = null;
}
this.selectionService.clearHeaderCBState();
this.summaryService.clearSummaryCache();
this.markForCheck();
// Wait for the change detection to update filtered data through the pipes and then emit the event.
requestAnimationFrame(function () { return _this.onFilteringDone.emit(_this._advancedFilteringExpressionsTree); });
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridBaseDirective.prototype, "locale", {
/**
* Returns the locale of the grid.
* If not set, returns browser's language.
*/
get: function () {
if (this._locale) {
return this._locale;
}
else {
return 'en';
}
},
/**
* Sets the locale of the grid.
*/
set: function (value) {
this._locale = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridBaseDirective.prototype, "paging", {
/**
* Returns whether the paging feature is enabled/disabled.
* The default state is disabled (false).
* ```
* const paging = this.grid.paging;
* ```
* @memberof IgxGridBaseDirective
*/
get: function () {
return this._paging;
},
/**
* Enables/Disables the paging feature.
* ```html
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [paging]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
set: function (value) {
this._paging = value;
this._pipeTrigger++;
this.notifyChanges(true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridBaseDirective.prototype, "page", {
/**
* Returns the current page index.
* ```html
* let gridPage = this.grid.page;
* ```
* @memberof IgxGridBaseDirective
*/
get: function () {
return this._page;
},
/**
* Sets the current page index.
* ```html
* <igx-grid #grid [data]="Data" [paging]="true" [page]="5" [autoGenerate]="true"></igx-grid>
*```
* Two-way data binding.
* ```html
* <igx-grid #grid [data]="Data" [paging]="true" [(page)]="model.page" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/