@catull/igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,395 lines • 95.1 kB
TypeScript
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ElementRef, EventEmitter, IterableDiffers, NgZone, OnDestroy, OnInit, QueryList, TemplateRef, ViewContainerRef, InjectionToken, DoCheck } from '@angular/core';
import ResizeObserver from 'resize-observer-polyfill';
import { Subject } from 'rxjs';
import { DataType } from '../data-operations/data-util';
import { FilteringLogic } from '../data-operations/filtering-expression.interface';
import { IGroupByRecord } from '../data-operations/groupby-record.interface';
import { ISortingExpression } from '../data-operations/sorting-expression.interface';
import { IForOfState, IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
import { IgxOverlayService } from '../services/index';
import { GridBaseAPIService } from './api.service';
import { IgxGridCellComponent } from './cell.component';
import { IColumnVisibilityChangedEventArgs } from './hiding/column-hiding-item.directive';
import { ISummaryExpression } from './summaries/grid-summary';
import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
import { IgxRowDirective } from './row.directive';
import { IgxGridHeaderComponent } from './headers/grid-header.component';
import { IgxOverlayOutletDirective, IgxToggleDirective } from '../directives/toggle/toggle.directive';
import { IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
import { IFilteringOperation } from '../data-operations/filtering-condition';
import { Transaction, TransactionService, State } from '../services/index';
import { IgxRowEditTabStopDirective } from './grid.rowEdit.directive';
import { IgxGridNavigationService } from './grid-navigation.service';
import { IDisplayDensityOptions, DisplayDensityBase } from '../core/displayDensity';
import { IgxFilteringService } from './filtering/grid-filtering.service';
import { IgxGridFilteringCellComponent } from './filtering/base/grid-filtering-cell.component';
import { IgxGridHeaderGroupComponent } from './headers/grid-header-group.component';
import { IGridResourceStrings } from '../core/i18n/grid-resources';
import { IgxGridSummaryService } from './summaries/grid-summary.service';
import { IgxSummaryRowComponent } from './summaries/summary-row.component';
import { IgxGridSelectionService, GridSelectionRange, IgxGridCRUDService, IgxRow } from './selection/selection.service';
import { DragScrollDirection } from './selection/drag-select.directive';
import { ICachedViewLoadedEventArgs } 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 { IgxColumnResizingService } from './resizing/resizing.service';
import { IFilteringStrategy } from '../data-operations/filtering-strategy';
import { GridSelectionMode, GridSummaryPosition, GridSummaryCalculationMode, FilterMode } from './common/enums';
import { IGridCellEventArgs, IRowSelectionEventArgs, IPinColumnEventArgs, IGridEditEventArgs, IPageEventArgs, IRowDataEventArgs, IColumnResizeEventArgs, IColumnMovingStartEventArgs, IColumnMovingEventArgs, IColumnMovingEndEventArgs, IGridKeydownEventArgs, IRowDragStartEventArgs, IRowDragEndEventArgs, IGridClipboardEvent, IGridToolbarExportEventArgs, ISearchInfo, ICellPosition } from './common/events';
import { GridType } from './common/grid.interface';
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 { IGridSortingStrategy } from '../data-operations/sorting-strategy';
export declare const IgxGridTransaction: InjectionToken<string>;
export declare class IgxGridBaseDirective extends DisplayDensityBase implements OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit {
selectionService: IgxGridSelectionService;
crudService: IgxGridCRUDService;
colResizingService: IgxColumnResizingService;
protected gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>;
protected _transactions: TransactionService<Transaction, State>;
private elementRef;
private zone;
document: any;
cdr: ChangeDetectorRef;
protected resolver: ComponentFactoryResolver;
protected differs: IterableDiffers;
protected viewRef: ViewContainerRef;
navigation: IgxGridNavigationService;
filteringService: IgxFilteringService;
protected overlayService: IgxOverlayService;
summaryService: IgxGridSummaryService;
protected _displayDensityOptions: IDisplayDensityOptions;
private _scrollWidth;
private _customDragIndicatorIconTemplate;
protected _init: boolean;
private _cdrRequests;
protected _cdrRequestRepaint: boolean;
readonly scrollWidth: number;
private _resourceStrings;
private _emptyGridMessage;
private _emptyFilteredGridMessage;
private _isLoading;
private _locale;
_destroyed: boolean;
private overlayIDs;
private _filteringStrategy;
private _sortingStrategy;
private _hostWidth;
private _advancedFilteringOverlayId;
private _advancedFilteringPositionSettings;
private _advancedFilteringOverlaySettings;
/**
* @hidden
*/
protected defaultExpandedTemplate: TemplateRef<any>;
/**
* @hidden
*/
protected defaultCollapsedTemplate: TemplateRef<any>;
/**
* An accessor that sets the resource strings.
* By default it uses EN resources.
*/
/**
* An accessor that returns the resource strings.
*/
resourceStrings: IGridResourceStrings;
/**
* An @Input property that autogenerates the `IgxGridComponent` columns.
* The default value is false.
* ```html
* <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
autoGenerate: boolean;
id: string;
/**
* An @Input property that sets a custom template when the `IgxGridComponent` is empty.
* ```html
* <igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
emptyGridTemplate: TemplateRef<any>;
/**
* An @Input property that sets a custom template when the `IgxGridComponent` is loading.
* ```html
* <igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
loadingGridTemplate: TemplateRef<any>;
/**
* Sets the filtering logic of the `IgxGridComponent`.
* The default is AND.
* ```html
* <igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
filteringLogic: FilteringLogic;
/**
* Returns the filtering state of `IgxGridComponent`.
* ```typescript
* let filteringExpressionsTree = this.grid.filteringExpressionsTree;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* 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
*/
filteringExpressionsTree: IFilteringExpressionsTree;
/**
* 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
*/
filteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>;
/**
* 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
*/
advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>;
/**
* Returns the advanced filtering state of `IgxGridComponent`.
* ```typescript
* let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* 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
*/
advancedFilteringExpressionsTree: IFilteringExpressionsTree;
/**
* Returns the locale of the grid.
* If not set, returns browser's language.
*/
/**
* Sets the locale of the grid.
*/
locale: string;
/**
* Returns whether the paging feature is enabled/disabled.
* The default state is disabled (false).
* ```
* const paging = this.grid.paging;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Enables/Disables the paging feature.
* ```html
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [paging]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
paging: boolean;
/**
* Returns the current page index.
* ```html
* let gridPage = this.grid.page;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* 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
*/
page: number;
/**
*@hidden
*/
pageChange: EventEmitter<number>;
/**
* Returns the number of visible items per page of the `IgxGridComponent`.
* The default is 15.
* ```html
* let itemsPerPage = this.grid.perPage;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets the number of visible items per page of the `IgxGridComponent`.
* ```html
* <igx-grid #grid [data]="Data" [paging]="true" [perPage]="5" [autoGenerate]="true"></igx-grid>
* ```
*
* Two-way data binding.
* ```html
* <igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
perPage: number;
/**
*@hidden
*/
perPageChange: EventEmitter<number>;
/**
* You can provide a custom `ng-template` for the pagination UI of the grid.
* ```html
* <igx-grid #grid [paging]="true" [myTemplate]="myTemplate" [height]="'305px'"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
paginationTemplate: TemplateRef<any>;
/**
* Returns whether the column hiding UI for the `IgxGridComponent` is enabled.
* By default it is disabled (false).
* ```typescript
* let gridColHiding = this.grid.columnHiding;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets whether the column hiding UI for the `IgxGridComponent` is enabled.
* In order for the UI to work, you need to enable the toolbar as shown in the example below.
* ```html
* <igx-grid [data]="Data" [autoGenerate]="true" [showToolbar]="true" [columnHiding]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
columnHiding: boolean;
rowSelectable: boolean;
/**
* Returns if the row selectors are hidden
* @memberof IgxGridBaseDirective
*/
/**
* Allows you to change the visibility of the row selectors
* By default row selectors are shown
* @memberof IgxGridBaseDirective
*/
hideRowSelectors: boolean;
/**
* Sets whether rows can be moved.
* ```html
* <igx-grid #grid [rowDraggable]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
rowDraggable: boolean;
/**
* @hidden
* @internal
*/
rowDragging: boolean;
/**
* Sets whether the `IgxGridRowComponent` is editable.
* By default it is set to false.
* ```typescript
* let rowEditable = this.grid.rowEditable;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets whether rows can be edited.
* ```html
* <igx-grid #grid [showToolbar]="true" [rowEditable]="true" [primaryKey]="'ProductID'" [columnHiding]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
rowEditable: boolean;
/**
* Returns the height of the `IgxGridComponent`.
* ```typescript
* let gridHeight = this.grid.height;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets the height of the `IgxGridComponent`.
* ```html
* <igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
height: string;
/**
* @hidden
*/
readonly hostWidth: any;
/**
* Returns the width of the `IgxGridComponent`.
* ```typescript
* let gridWidth = this.grid.width;
* ```
* @memberof IgxGridBaseDirective
*/
width: string;
/**
* Returns the width of the header of the `IgxGridComponent`.
* ```html
* let gridHeaderWidth = this.grid.headerWidth;
* ```
* @memberof IgxGridBaseDirective
*/
readonly headerWidth: number;
/**
* 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
*/
evenRowCSS: string;
/**
* 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
*/
oddRowCSS: string;
/**
* Returns the row height.
* ```typescript
* const rowHeight = this.grid.rowHeight;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets the row height.
* ```html
* <igx-grid #grid [data]="localData" [showToolbar]="true" [rowHeight]="100" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
rowHeight: any;
/**
* An @Input property that sets the default width of the `IgxGridComponent`'s columns.
* ```html
* <igx-grid #grid [data]="localData" [showToolbar]="true" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
columnWidth: string;
/**
* An @Input property that sets the primary key of the `IgxGridComponent`.
* ```html
* <igx-grid #grid [data]="localData" [showToolbar]="true" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
primaryKey: any;
/**
* An @Input property that sets the message displayed when there are no records.
* ```html
* <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
/**
* An accessor that returns the message displayed when there are no records.
*/
emptyGridMessage: string;
/**
* An @Input property that sets whether the grid is going to show loading indicator.
* ```html
* <igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
/**
* An accessor that returns whether the grid is showing loading indicator.
*/
isLoading: boolean;
/**
* A property that allows the columns to be auto-generated once again after the initialization of the grid.
* This will allow to bind the grid to remote data and having auto-generated columns at the same time.
* Note that after generating the columns, this property would be disabled to avoid re-creating
* columns each time a new data is assigned.
* ```typescript
* this.grid.shouldGenerate = true;
* this.remoteData = this.remoteService.remoteData;
* ```
*/
shouldGenerate: boolean;
/**
* An @Input property that sets the message displayed when there are no records and the grid is filtered.
* ```html
* <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
/**
* An accessor that returns the message displayed when there are no records and the grid is filtered.
*/
emptyFilteredGridMessage: string;
/**
* 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
*/
columnHidingTitle: string;
/**
* Returns if the built-in column pinning UI should be shown in the toolbar.
* ```typescript
* let colPinning = this.grid.columnPinning;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets if the built-in column pinning UI should be shown in the toolbar.
* By default it's disabled.
* ```html
* <igx-grid #grid [data]="localData" [columnPinning]="'true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
columnPinning: boolean;
/**
* 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
*/
columnPinningTitle: string;
/**
* Returns if the filtering is enabled.
* ```typescript
* let filtering = this.grid.allowFiltering;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets if the filtering is enabled.
* By default it's disabled.
* ```html
* <igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
allowFiltering: boolean;
/**
* Returns a value indicating whether the advanced filtering is enabled.
* ```typescript
* let filtering = this.grid.allowAdvancedFiltering;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets a value indicating whether the advanced filtering is enabled.
* By default it's disabled.
* ```html
* <igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [showToolbar]="true" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
allowAdvancedFiltering: boolean;
/**
* Returns the filter mode.
* ```typescript
* let filtering = this.grid.filterMode;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets filter mode.
* By default it's set to FilterMode.quickFilter.
* ```html
* <igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
filterMode: FilterMode;
/**
* Returns the summary position.
* ```typescript
* let summaryPosition = this.grid.summaryPosition;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets summary position.
* By default it is bottom.
* ```html
* <igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
summaryPosition: GridSummaryPosition;
/**
* Returns the summary calculation mode.
* ```typescript
* let summaryCalculationMode = this.grid.summaryCalculationMode;
* ```
* @memberof IgxGridBaseDirective
*/
/**
* Sets summary calculation mode.
* By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level.
* ```html
* <igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridBaseDirective
*/
summaryCalculationMode: GridSummaryCalculationMode;
/**
* Gets the filtering strategy of the grid.
* ```typescript
* let filterStrategy = this.grid.filterStrategy
* ```
*/
/**
* Sets the filtering strategy of the grid.
* ```html
* <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>
* ```
*/
filterStrategy: IFilteringStrategy;
/**
* Gets the sorting strategy of the grid.
* ```typescript
* let sortStrategy = this.grid.sortStrategy
* ```
*/
/**
* Sets the sorting strategy of the grid.
* ```html
* <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>
* ```
*/
sortStrategy: IGridSortingStrategy;
/**
* An @Input property that provides a callback for loading unique column values on demand.
* If this property is provided, the unique values it generates will be used by the Excel Style Filtering.
* ```html
* <igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>
* ```
*
* ```typescript
* public columnValuesStrategy = (column: IgxColumnComponent,
* filteringExpressionsTree: IFilteringExpressionsTree,
* done: (uniqueValues: any[]) => void) => {
* this.dataService.getColumnData(column, filteringExpressionsTree, uniqueValues => done(uniqueValues));
* }
* ```
* @memberof IgxGridBaseDirective
*/
uniqueColumnValuesStrategy: (column: IgxColumnComponent, filteringExpressionsTree: IFilteringExpressionsTree, done: (values: any[]) => void) => void;
/**
* 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
*/
onCellClick: EventEmitter<IGridCellEventArgs>;
/**
* 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
*/
onSelection: EventEmitter<IGridCellEventArgs>;
/**
* 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
*/
onRowSelectionChange: EventEmitter<IRowSelectionEventArgs>;
/**
* 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
*/
onColumnPinning: EventEmitter<IPinColumnEventArgs>;
/**
* 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
*/
onCellEditCancel: EventEmitter<IGridEditEventArgs>;
/**
* 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
*/
onCellEditEnter: EventEmitter<IGridEditEventArgs>;
/**
* 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
*/
onCellEdit: EventEmitter<IGridEditEventArgs>;
/**
* 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
*/
onRowEditEnter: EventEmitter<IGridEditEventArgs>;
/**
* 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
*/
onRowEdit: EventEmitter<IGridEditEventArgs>;
/**
* 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
*/
onRowEditCancel: EventEmitter<IGridEditEventArgs>;
/**
* 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
*/
onColumnInit: EventEmitter<IgxColumnComponent>;
/**
* 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
*/
onSortingDone: EventEmitter<ISortingExpression | ISortingExpression[]>;
/**
* 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
*/
onFilteringDone: EventEmitter<IFilteringExpressionsTree>;
/**
* 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
*/
onPagingDone: EventEmitter<IPageEventArgs>;
/**
* 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
*/
onRowAdded: EventEmitter<IRowDataEventArgs>;
/**
* 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
*/
onRowDeleted: EventEmitter<IRowDataEventArgs>;
/**
* 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
*/
onDataPreLoad: EventEmitter<IForOfState>;
/**
* 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
*/
onColumnResized: EventEmitter<IColumnResizeEventArgs>;
/**
* 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
*/
onContextMenu: EventEmitter<IGridCellEventArgs>;
/**
* 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
*/
onDoubleClick: EventEmitter<IGridCellEventArgs>;
/**
* 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
*/
onColumnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs>;
/**
* 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
*/
onColumnMovingStart: EventEmitter<IColumnMovingStartEventArgs>;
/**
* 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
*/
onColumnMoving: EventEmitter<IColumnMovingEventArgs>;
/**
* 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
*/
onColumnMovingEnd: EventEmitter<IColumnMovingEndEventArgs>;
/**
* 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>
* ```
*/
onGridKeydown: EventEmitter<IGridKeydownEventArgs>;
/**
* Emitted when start dragging a row.
* Return the dragged row.
*/
onRowDragStart: EventEmitter<IRowDragStartEventArgs>;
/**
* Emitted when dropping a row.
* Return the dropped row.
*/
onRowDragEnd: EventEmitter<IRowDragEndEventArgs>;
/**
* Emitted when a copy operation is executed.
* Fired only if copy behavior is enabled through the [`clipboardOptions`]{@link IgxGridBaseDirective#clipboardOptions}.
*/
onGridCopy: EventEmitter<IGridClipboardEvent>;
/**
* @hidden
*/
resizeLine: IgxGridColumnResizerComponent;
/**
* @hidden
*/
loadingOverlay: ElementRef;
/**
* @hidden
*/
loadingOutlet: IgxOverlayOutletDirective;
/**
* @hidden
*/
columnList: QueryList<IgxColumnComponent>;
/**
*@hidden
*/
excelStyleSortingTemplateDirective: IgxExcelStyleSortingTemplateDirective;
/**
*@hidden
*/
excelStyleMovingTemplateDirective: IgxExcelStyleMovingTemplateDirective;
/**
*@hidden
*/
excelStyleHidingTemplateDirective: IgxExcelStyleHidingTemplateDirective;
/**
*@hidden
*/
excelStylePinningTemplateDirective: IgxExcelStylePinningTemplateDirective;
/**
*@hidden
*/
excelStyleLoadingValuesTemplateDirective: IgxExcelStyleLoadingValuesTemplateDirective;
/**
* @hidden
*/
headerGroups: QueryList<IgxGridHeaderGroupComponent>;
/**
* A list of all `IgxGridHeaderGroupComponent`.
* ```typescript
* const headerGroupsList = this.grid.headerGroupsList;
* ```
* @memberof IgxGridBaseDirective
*/
readonly headerGroupsList: IgxGridHeaderGroupComponent[];
/**
* A list of all `IgxGridHeaderComponent`.
* ```typescript
* const headers = this.grid.headerCellList;
* ```
* @memberof IgxGridBaseDirective
*/
readonly headerCellList: IgxGridHeaderComponent[];
/**
* A list of all `IgxGridFilteringCellComponent`.
* ```typescript
* const filterCells = this.grid.filterCellList;
* ```
* @memberof IgxGridBaseDirective
*/
readonly filterCellList: IgxGridFilteringCellComponent[];
private _rowList;
protected _summaryRowList: QueryList<IgxSummaryRowComponent>;
readonly summariesRowList: QueryList<any>;
/**
* A list of `IgxGridRowComponent`.
* ```typescript
* const rowList = this.grid.rowList;
* ```
* @memberof IgxGridBaseDirective
*/
readonly rowList: QueryList<any>;
private _dataRowList;
/**
* A list of `IgxGridRowComponent`, currently rendered.
* ```typescript
* const dataList = this.grid.dataRowList;
* ```
* @memberof IgxGridBaseDirective
*/
readonly dataRowList: QueryList<IgxRowDirective<IgxGridBaseDirective>>;
/**
* A template reference for the template when the filtered `IgxGridComponent` is empty.
* ```
* const emptyTempalte = this.grid.emptyGridTemplate;
* ```
* @memberof IgxGridBaseDirective
*/
emptyFilteredGridTemplate: TemplateRef<any>;
/**
* A template reference for the template when the `IgxGridComponent` is empty.
* ```
* const emptyTempalte = this.grid.emptyGridTemplate;
* ```
* @memberof IgxGridBaseDirective
*/
emptyGridDefaultTemplate: TemplateRef<any>;
loadingGridDefaultTemplate: TemplateRef<any>;
/**
* @hidden
*/
parentVirtDir: IgxGridForOfDirective<any>;
/**
* Returns the template which will be used by the toolbar to show custom content.
* ```typescript
* let customContentTemplate = this.grid.toolbarCustomContentTemplate;
* ```
* @memberof IgxGridBaseDirective
*/
readonly toolbarCustomContentTemplate: IgxGridToolbarCustomContentDirective;
/**
* @hidden
* @internal
*/
toolbarCustomContentTemplates: QueryList<IgxGridToolbarCustomContentDirective>;
/**
* @hidden
* @internal
*/
readonly headSelectorTemplate: TemplateRef<IgxHeadSelectorDirective>;
/**
* @hidden
* @internal
*/
headSelectorsTemplates: QueryList<IgxHeadSelectorDirective>;
/**
* @hidden
* @internal
*/
readonly rowSelectorTemplate: TemplateRef<IgxRowSelectorDirective>;
/**
* @hidden
* @internal
*/
rowSelectorsTemplates: QueryList<IgxRowSelectorDirective>;
/**
* @hidden
* @internal
*/
dragGhostCustomTemplates: QueryList<TemplateRef<any>>;
/**
* @hidden
*/
verticalScrollContainer: IgxGridForOfDirective<any>;
/**
* @hidden
*/
verticalScroll: IgxGridForOfDirective<any>;
/**
* @hidden
*/
scr: ElementRef;
/**
* @hidden
*/
footer: ElementRef;
/**
* @hidden
*/
headerContainer: IgxGridForOfDirective<any>;
/**
* @hidden
*/
headerSelectorContainer: ElementRef;
/**
* @hidden
*/
headerDragContainer: ElementRef;
/**
* @hidden
*/
headerGroupContainer: ElementRef;
/**
* @hidden
*/
filteringRow: IgxGridFilteringRowComponent;
/**
* @hidden
*/
theadRow: ElementRef;
/**
* @hidden
*/
tbody: ElementRef;
/**
* @hidden
*/
tfoot: ElementRef;
/**
* @hidden
*/
protected _outletDirective: IgxOverlayOutletDirective;
/**
* @hidden
*/
readonly outletDirective: IgxOverlayOutletDirective;
/**
* @hidden
*/
rowEditingOutletDirective: IgxOverlayOutletDirective;
/**
* @hidden
*/
tmpOutlets: QueryList<any>;
/**
* @hidden
*/
readonly rowOutletDirective: IgxOverlayOutletDirective;
/**
* @hidden
*/
readonly parentRowOutletDirective: IgxOverlayOutletDirective;
/**
* @hidden
* @internal
*/
dragIndicatorIconBase: TemplateRef<any>;
/**
* @hidden
*/
private defaultRowEditTemplate;
/**
* @hidden
*/
rowEditCustom: TemplateRef<any>;
/** @hidden */
readonly rowEditContainer: TemplateRef<any>;
/** @hidden */
rowEditText: TemplateRef<any>;
/** @hidden */
rowEditActions: TemplateRef<any>;
/**
* The custom template, if any, that should be used when rendering a row expand indicator.
*/
rowExpandedIndicatorTemplate: TemplateRef<any>;
/**
* The custom template, if any, that should be used when rendering a row collapse indicator.
*/
rowCollapsedIndicatorTemplate: TemplateRef<any>;
/**
* The custom template, if any, that should be used when rendering a header expand indicator.
*/
headerExpandIndicatorTemplate: TemplateRef<any>;
/**
* The custom template, if any, that should be used when rendering a header collapse indicator.
*/
headerCollapseIndicatorTemplate: TemplateRef<any>;
/**
* @hidden
* @internal
*/
dragIndicatorIconTemplates: QueryList<TemplateRef<any>>;
/**
* The custom template, if any, that should be used when rendering the row drag indicator icon
*/
dragIndicatorIconTemplate: TemplateRef<any>;
/**
* @hidden
*/
readonly rowInEditMode: IgxRowDirective<IgxGridBaseDirective & GridType>;
/**
* @hidden
*/
readonly firstEditableColumnIndex: number;
/**
* @hidden
*/
readonly lastEditableColumnIndex: number;
/**
* @hidden
*/
rowEditTabsDEFAULT: QueryList<IgxRowEditTabStopDirective>;
/**
* @hidden
*/
rowEditTabsCUSTOM: QueryList<IgxRowEditTabStopDirective>;
/**
* @hidden
* TODO: Nav service logic doesn't handle 0 results from this querylist
*/
readonly rowEditTabs: QueryList<IgxRowEditTabStopDirective>;
/**
* @hidden
*/
rowEditingOverlay: IgxToggleDirective;
/**
* @hidden
*/
tabindex: number;
/**
* @hidden
*/