igniteui-angular

import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EnvironmentInjector, EventEmitter, Injector, IterableDiffers, NgZone, OnDestroy, OnInit, QueryList, TemplateRef, ViewContainerRef } from '@angular/core'; import { Subject } from 'rxjs'; import { PlatformUtil } from '../core/utils'; import { FilteringLogic } from '../data-operations/filtering-expression.interface'; import { IGroupByRecord } from '../data-operations/groupby-record.interface'; import { IForOfDataChangingEventArgs, IgxGridForOfDirective } from '../directives/for-of/for_of.directive'; import { IgxTextHighlightService } from '../directives/text-highlight/text-highlight.service'; import { ISummaryExpression } from './summaries/grid-summary'; import type { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component'; import { IgxRowDirective } from './row.directive'; 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/public_api'; import { IgxRowEditTabStopDirective } from './grid.rowEdit.directive'; import { IgxGridNavigationService } from './grid-navigation.service'; 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 } from './selection/selection.service'; import { ICachedViewLoadedEventArgs } from '../directives/template-outlet/template_outlet.directive'; import { IgxExcelStyleLoadingValuesTemplateDirective } from './filtering/excel-style/excel-style-search.component'; import { IgxGridColumnResizerComponent } from './resizing/resizer.component'; import { IgxColumnResizingService } from './resizing/resizing.service'; import { IFilteringStrategy } from '../data-operations/filtering-strategy'; import { GridSelectionMode, GridSummaryPosition, GridSummaryCalculationMode, FilterMode, GridPagingMode, GridValidationTrigger, Size } from './common/enums'; import { IGridCellEventArgs, IRowSelectionEventArgs, IPinColumnEventArgs, IRowDataEventArgs, IColumnResizeEventArgs, IColumnMovingStartEventArgs, IColumnMovingEventArgs, IColumnMovingEndEventArgs, IGridKeydownEventArgs, IRowDragStartEventArgs, IRowDragEndEventArgs, IGridClipboardEvent, IGridToolbarExportEventArgs, ISearchInfo, ICellPosition, IRowToggleEventArgs, IColumnSelectionEventArgs, IPinRowEventArgs, IGridScrollEventArgs, IActiveNodeChangeEventArgs, ISortingEventArgs, IFilteringEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs, IPinColumnCancellableEventArgs, IGridEditEventArgs, IRowDataCancelableEventArgs, IGridEditDoneEventArgs, IGridRowEventArgs, IGridContextMenuEventArgs, IColumnsAutoGeneratedEventArgs } from './common/events'; import { ColumnType, GridServiceType, GridType, IGridFormGroupCreatedEventArgs, IGridValidationStatusEventArgs, IgxGridEmptyTemplateContext, IgxGridHeaderTemplateContext, IgxGridRowDragGhostContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IgxGridRowTemplateContext, IgxGridTemplateContext, IgxHeadSelectorTemplateContext, IgxRowSelectorTemplateContext, ISizeInfo, RowType, IPinningConfig, IClipboardOptions } from './common/grid.interface'; import { DropPosition } from './moving/moving.service'; import { IgxColumnComponent } from './columns/column.component'; import { IgxSnackbarComponent } from '../snackbar/snackbar.component'; import { IgxActionStripToken } from '../action-strip/token'; import { IgxGridRowComponent } from './grid/grid-row.component'; import type { IgxPaginatorComponent } from '../paginator/paginator.component'; import { IgxGridHeaderRowComponent } from './headers/grid-header-row.component'; import { IgxGridGroupByAreaComponent } from './grouping/grid-group-by-area.component'; import { IgxFlatTransactionFactory } from '../services/transaction/transaction-factory.service'; import { ISortingOptions } from './columns/interfaces'; import { GridSelectionRange } from './common/types'; import { OverlaySettings } from '../services/overlay/utilities'; import { IgxOverlayService } from '../services/overlay/overlay'; import { StateUpdateEvent } from '../services/transaction/transaction'; import { ISortingExpression } from '../data-operations/sorting-strategy'; import { IGridSortingStrategy } from './common/strategy'; import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/excel-style-filtering.component'; import { IgxGridHeaderComponent } from './headers/grid-header.component'; import { IgxGridFilteringRowComponent } from './filtering/base/grid-filtering-row.component'; import { IDataCloneStrategy } from '../data-operations/data-clone-strategy'; import { IgxGridValidationService } from './grid/grid-validation.service'; import * as i0 from "@angular/core"; export declare abstract class IgxGridBaseDirective implements GridType, OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit { readonly validation: IgxGridValidationService; /** @hidden @internal */ readonly selectionService: IgxGridSelectionService; protected colResizingService: IgxColumnResizingService; readonly gridAPI: GridServiceType; protected transactionFactory: IgxFlatTransactionFactory; private elementRef; protected zone: NgZone; /** @hidden @internal */ document: any; readonly cdr: ChangeDetectorRef; protected differs: IterableDiffers; protected viewRef: ViewContainerRef; protected injector: Injector; protected envInjector: EnvironmentInjector; navigation: IgxGridNavigationService; /** @hidden @internal */ filteringService: IgxFilteringService; protected textHighlightService: IgxTextHighlightService; protected overlayService: IgxOverlayService; /** @hidden @internal */ summaryService: IgxGridSummaryService; private localeId; protected platform: PlatformUtil; protected _diTransactions?: TransactionService<Transaction, State>; /** * Gets/Sets the display time for the row adding snackbar notification. * * @remarks * By default it is 6000ms. */ snackbarDisplayTime: number; /** * Gets/Sets whether to auto-generate the columns. * * @remarks * The default value is false. When set to true, it will override all columns declared through code or in markup. * @example * ```html * <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid> * ``` */ autoGenerate: boolean; /** * Gets/Sets a list of property keys to be excluded from the generated column collection * @remarks * The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime * unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their * [hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property. * @example * ```html * <igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid> * ``` * ```typescript * const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }] * ``` */ autoGenerateExclude: string[]; /** * Controls whether columns moving is enabled in the grid. * */ moving: boolean; /** * Gets/Sets a custom template when empty. * * @example * ```html * <igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> * ``` */ emptyGridTemplate: TemplateRef<void>; /** * Gets/Sets a custom template for adding row UI when grid is empty. * * @example * ```html * <igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> * ``` */ addRowEmptyTemplate: TemplateRef<void>; /** * Gets/Sets a custom template when loading. * * @example * ```html * <igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid> * ``` */ loadingGridTemplate: TemplateRef<void>; /** * Get/Set IgxSummaryRow height */ set summaryRowHeight(value: number); get summaryRowHeight(): number; /** @hidden @internal */ get hasColumnsToAutosize(): boolean; /** * Gets/Sets the data clone strategy of the grid when in edit mode. * * @example * ```html * <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid> * ``` */ get dataCloneStrategy(): IDataCloneStrategy; set dataCloneStrategy(strategy: IDataCloneStrategy); /** * Controls the copy behavior of the grid. */ clipboardOptions: IClipboardOptions; /** * Emitted after filtering is performed. * * @remarks * Returns the filtering expressions tree of the column for which filtering was performed. * @example * ```html * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" * (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid> * ``` */ filteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>; /** * Emitted after advanced filtering is performed. * * @remarks * Returns the advanced filtering expressions tree. * @example * ```html * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" * (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid> * ``` */ advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>; /** * Emitted when grid is scrolled horizontally/vertically. * * @example * ```html * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" * (gridScroll)="onScroll($event)"></igx-grid> * ``` */ gridScroll: EventEmitter<IGridScrollEventArgs>; /** * Sets a conditional class selector to the grid's row element. * Accepts an object literal, containing key-value pairs, * where the key is the name of the CSS class and the value is * either a callback function that returns a boolean, or boolean, like so: * ```typescript * callback = (row: RowType) => { return row.selected > 6; } * rowClasses = { 'className' : this.callback }; * ``` * ```html * <igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid> * ``` * * @memberof IgxColumnComponent */ rowClasses: any; /** * Sets conditional style properties on the grid row element. * It accepts an object literal where the keys are * the style properties and the value is an expression to be evaluated. * ```typescript * styles = { * background: 'yellow', * color: (row: RowType) => row.selected : 'red': 'white' * } * ``` * ```html * <igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid> * ``` * * @memberof IgxColumnComponent */ rowStyles: any; /** * Gets/Sets the primary key. * * @example * ```html * <igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid> * ``` */ get primaryKey(): string; set primaryKey(value: string); /** * Gets/Sets a unique values strategy used by the Excel Style Filtering * * @remarks * 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. * @example * ```html * <igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid> * ``` */ uniqueColumnValuesStrategy: (column: ColumnType, filteringExpressionsTree: IFilteringExpressionsTree, done: (values: any[]) => void) => void; /** @hidden @internal */ excelStyleFilteringComponents: QueryList<IgxGridExcelStyleFilteringComponent>; /** @hidden @internal */ get excelStyleFilteringComponent(): IgxGridExcelStyleFilteringComponent; /** @hidden @internal */ get headerGroups(): IgxGridHeaderGroupComponent[]; /** * Emitted when a cell is clicked. * * @remarks * Returns the `IgxGridCell`. * @example * ```html * <igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> * ``` */ cellClick: EventEmitter<IGridCellEventArgs>; /** * Emitted when a row is clicked. * * @remarks * Returns the `IgxGridRow`. * @example * ```html * <igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> * ``` */ rowClick: EventEmitter<IGridRowEventArgs>; /** * Emitted when formGroup is created on edit of row/cell. * * @example * ```html * <igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> * ``` */ formGroupCreated: EventEmitter<IGridFormGroupCreatedEventArgs>; /** * Emitted when grid's validation status changes. * * @example * ```html * <igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> * ``` */ validationStatusChange: EventEmitter<IGridValidationStatusEventArgs>; /** * Emitted when a cell is selected. * * @remarks * Returns the `IgxGridCell`. * @example * ```html * <igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid> * ``` */ selected: EventEmitter<IGridCellEventArgs>; /** * Emitted when `IgxGridRowComponent` is selected. * * @example * ```html * <igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> * ``` */ rowSelectionChanging: EventEmitter<IRowSelectionEventArgs>; /** * Emitted when `IgxColumnComponent` is selected. * * @example * ```html * <igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid> * ``` */ columnSelectionChanging: EventEmitter<IColumnSelectionEventArgs>; /** * Emitted before `IgxColumnComponent` is pinned. * * @remarks * The index at which to insert the column may be changed through the `insertAtIndex` property. * @example * ```typescript * public columnPinning(event) { * if (event.column.field === "Name") { * event.insertAtIndex = 0; * } * } * ``` */ columnPin: EventEmitter<IPinColumnCancellableEventArgs>; /** * Emitted after `IgxColumnComponent` is pinned. * * @remarks * The index that the column is inserted at may be changed through the `insertAtIndex` property. * @example * ```typescript * public columnPinning(event) { * if (event.column.field === "Name") { * event.insertAtIndex = 0; * } * } * ``` */ columnPinned: EventEmitter<IPinColumnEventArgs>; /** * Emitted when cell enters edit mode. * * @remarks * This event is cancelable. * @example * ```html * <igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'"> * </igx-grid> * ``` */ cellEditEnter: EventEmitter<IGridEditEventArgs>; /** * Emitted when cell exits edit mode. * * @example * ```html * <igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'"> * </igx-grid> * ``` */ cellEditExit: EventEmitter<IGridEditDoneEventArgs>; /** * Emitted when cell has been edited. * * @remarks * Event is fired after editing is completed, when the cell is exiting edit mode. * This event is cancelable. * @example * ```html * <igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> * </igx-grid> * ``` */ cellEdit: EventEmitter<IGridEditEventArgs>; /** * Emitted after cell has been edited and editing has been committed. * * @example * ```html * <igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> * </igx-grid> * ``` */ cellEditDone: EventEmitter<IGridEditDoneEventArgs>; /** * Emitted when a row enters edit mode. * * @remarks * Emitted when [rowEditable]="true". * This event is cancelable. * @example * ```html * <igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true"> * </igx-grid> * ``` */ rowEditEnter: EventEmitter<IGridEditEventArgs>; /** * Emitted when exiting edit mode for a row. * * @remarks * Emitted 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. * @example * ```html * <igx-grid #grid3 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> * </igx-grid> * ``` */ rowEdit: EventEmitter<IGridEditEventArgs>; /** * Emitted after exiting edit mode for a row and editing has been committed. * * @remarks * Emitted 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. * @example * ```html * <igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> * </igx-grid> * ``` */ rowEditDone: EventEmitter<IGridEditDoneEventArgs>; /** * Emitted when row editing is canceled. * * @remarks * Emits 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. * @example * ```html * <igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> * </igx-grid> * ``` */ rowEditExit: EventEmitter<IGridEditDoneEventArgs>; /** * Emitted when a column is initialized. * * @remarks * Returns the column object. * @example * ```html * <igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid> * ``` */ columnInit: EventEmitter<IgxColumnComponent>; /** * @hidden @internal */ columnsAutogenerated: EventEmitter<IColumnsAutoGeneratedEventArgs>; /** * Emitted before sorting expressions are applied. * * @remarks * Returns an `ISortingEventArgs` object. `sortingExpressions` key holds the sorting expressions. * @example * ```html * <igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid> * ``` */ sorting: EventEmitter<ISortingEventArgs>; /** * Emitted after sorting is completed. * * @remarks * Returns the sorting expression. * @example * ```html * <igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid> * ``` */ sortingDone: EventEmitter<ISortingExpression<any> | ISortingExpression<any>[]>; /** * Emitted before filtering expressions are applied. * * @remarks * Returns an `IFilteringEventArgs` object. `filteringExpressions` key holds the filtering expressions for the column. * @example * ```html * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid> * ``` */ filtering: EventEmitter<IFilteringEventArgs>; /** * Emitted after filtering is performed through the UI. * * @remarks * Returns the filtering expressions tree of the column for which filtering was performed. * @example * ```html * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid> * ``` */ filteringDone: EventEmitter<IFilteringExpressionsTree>; /** * Emitted when a row is added. * * @remarks * Returns the data for the new `IgxGridRowComponent` object. * @example * ```html * <igx-grid #grid [data]="localData" (rowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> * ``` */ rowAdded: EventEmitter<IRowDataEventArgs>; /** * Emitted when a row is deleted. * * @remarks * Returns an `IRowDataEventArgs` object. * @example * ```html * <igx-grid #grid [data]="localData" (rowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> * ``` */ rowDeleted: EventEmitter<IRowDataEventArgs>; /** * Emmited when deleting a row. * * @remarks * This event is cancelable. * Returns an IRowDataCancellableEventArgs` object. * @example * ```html * <igx-grid #grid [data]="localData" (rowDelete)="rowDelete($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> * ``` */ rowDelete: EventEmitter<IRowDataCancelableEventArgs>; /** * Emmited just before the newly added row is commited. * * @remarks * This event is cancelable. * Returns an IRowDataCancellableEventArgs` object. * @example * ```html * <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid> * ``` */ rowAdd: EventEmitter<IRowDataCancelableEventArgs>; /** * Emitted after column is resized. * * @remarks * Returns the `IgxColumnComponent` object's old and new width. * @example * ```html * <igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid> * ``` */ columnResized: EventEmitter<IColumnResizeEventArgs>; /** * Emitted when a cell or row is right clicked. * * @remarks * Returns the `IgxGridCell` object if the immediate context menu target is a cell or an `IgxGridRow` otherwise. * ```html * <igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid> * ``` */ contextMenu: EventEmitter<IGridContextMenuEventArgs>; /** * Emitted when a cell is double clicked. * * @remarks * Returns the `IgxGridCell` object. * @example * ```html * <igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid> * ``` */ doubleClick: EventEmitter<IGridCellEventArgs>; /** * Emitted before column visibility is changed. * * @remarks * Args: { column: any, newValue: boolean } * @example * ```html * <igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid> * ``` */ columnVisibilityChanging: EventEmitter<IColumnVisibilityChangingEventArgs>; /** * Emitted after column visibility is changed. * * @remarks * Args: { column: IgxColumnComponent, newValue: boolean } * @example * ```html * <igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid> * ``` */ columnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs>; /** * Emitted when column moving starts. * * @remarks * Returns the moved `IgxColumnComponent` object. * @example * ```html * <igx-grid (columnMovingStart)="movingStart($event)"></igx-grid> * ``` */ columnMovingStart: EventEmitter<IColumnMovingStartEventArgs>; /** * Emitted during the column moving operation. * * @remarks * Returns the source and target `IgxColumnComponent` objects. This event is cancelable. * @example * ```html * <igx-grid (columnMoving)="moving($event)"></igx-grid> * ``` */ columnMoving: EventEmitter<IColumnMovingEventArgs>; /** * Emitted when column moving ends. * * @remarks * Returns the source and target `IgxColumnComponent` objects. * @example * ```html * <igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid> * ``` */ columnMovingEnd: EventEmitter<IColumnMovingEndEventArgs>; /** * Emitted when keydown is triggered over element inside grid's body. * * @remarks * 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. * @example * ```html * <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid> * ``` */ gridKeydown: EventEmitter<IGridKeydownEventArgs>; /** * Emitted when start dragging a row. * * @remarks * Return the dragged row. */ rowDragStart: EventEmitter<IRowDragStartEventArgs>; /** * Emitted when dropping a row. * * @remarks * Return the dropped row. */ rowDragEnd: EventEmitter<IRowDragEndEventArgs>; /** * Emitted when a copy operation is executed. * * @remarks * Fired only if copy behavior is enabled through the [`clipboardOptions`]{@link IgxGridBaseDirective#clipboardOptions}. */ gridCopy: EventEmitter<IGridClipboardEvent>; /** * @hidden @internal */ expansionStatesChange: EventEmitter<Map<any, boolean>>; /** @hidden @internal */ selectedRowsChange: EventEmitter<any[]>; /** * Emitted when the expanded state of a row gets changed. * * @example * ```html * <igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid> * ``` */ rowToggle: EventEmitter<IRowToggleEventArgs>; /** * Emitted when the pinned state of a row is changed. * * @example * ```html * <igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid> * ``` */ rowPinning: EventEmitter<IPinRowEventArgs>; /** * Emitted when the pinned state of a row is changed. * * @example * ```html * <igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid> * ``` */ rowPinned: EventEmitter<IPinRowEventArgs>; /** * Emmited when the active node is changed. * * @example * ``` * <igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid> * ``` */ activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs>; /** * Emitted before sorting is performed. * * @remarks * Returns the sorting expressions. * @example * ```html * <igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid> * ``` */ sortingExpressionsChange: EventEmitter<ISortingExpression<any>[]>; /** * Emitted when an export process is initiated by the user. * * @example * ```typescript * toolbarExporting(event: IGridToolbarExportEventArgs){ * const toolbarExporting = event; * } * ``` */ toolbarExporting: EventEmitter<IGridToolbarExportEventArgs>; /** * Emitted when making a range selection. * * @remarks * Range selection can be made either through drag selection or through keyboard selection. */ rangeSelected: EventEmitter<GridSelectionRange>; /** Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM */ rendered: EventEmitter<boolean>; /** * @hidden @internal */ localeChange: EventEmitter<boolean>; /** * Emitted before the grid's data view is changed because of a data operation, rebinding, etc. * * @example * ```typescript * <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid> * ``` */ dataChanging: EventEmitter<IForOfDataChangingEventArgs>; /** * Emitted after the grid's data view is changed because of a data operation, rebinding, etc. * * @example * ```typescript * <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid> * ``` */ dataChanged: EventEmitter<any>; /** * @hidden @internal */ addRowSnackbar: IgxSnackbarComponent; /** * @hidden @internal */ resizeLine: IgxGridColumnResizerComponent; /** * @hidden @internal */ loadingOverlay: IgxToggleDirective; /** * @hidden @internal */ loadingOutlet: IgxOverlayOutletDirective; /** * @hidden @internal */ columnList: QueryList<IgxColumnComponent>; /** @hidden @internal */ protected actionStripComponents: QueryList<IgxActionStripToken>; /** @hidden @internal */ get actionStrip(): IgxActionStripToken; /** * @hidden @internal */ excelStyleLoadingValuesTemplateDirective: IgxExcelStyleLoadingValuesTemplateDirective; /** @hidden @internal */ emptyFilteredGridTemplate: TemplateRef<any>; /** @hidden @internal */ emptyGridDefaultTemplate: TemplateRef<any>; /** * @hidden @internal */ loadingGridDefaultTemplate: TemplateRef<any>; /** * @hidden @internal */ parentVirtDir: IgxGridForOfDirective<any, any[]>; /** * @hidden * @internal */ headSelectorsTemplates: QueryList<TemplateRef<IgxHeadSelectorTemplateContext>>; /** * @hidden * @internal */ rowSelectorsTemplates: QueryList<TemplateRef<IgxRowSelectorTemplateContext>>; /** * @hidden * @internal */ dragGhostCustomTemplates: QueryList<TemplateRef<IgxGridRowDragGhostContext>>; /** * Gets the custom template, if any, used for row drag ghost. */ get dragGhostCustomTemplate(): TemplateRef<IgxGridRowDragGhostContext>; /** * Sets a custom template for the row drag ghost. *```html * <ng-template #template igxRowDragGhost> * <igx-icon>menu</igx-icon> * </ng-template> * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.dragGhostCustomTemplate = this.template; * ``` */ set dragGhostCustomTemplate(template: TemplateRef<IgxGridRowDragGhostContext>); /** * @hidden @internal */ verticalScrollContainer: IgxGridForOfDirective<any, any[]>; /** * @hidden @internal */ verticalScroll: IgxGridForOfDirective<any, any[]>; /** * @hidden @internal */ scr: ElementRef; /** @hidden @internal */ headerSelectorBaseTemplate: TemplateRef<any>; /** * @hidden @internal */ footer: ElementRef; /** @hidden @internal */ get headerContainer(): IgxGridForOfDirective<ColumnType, ColumnType[]>; /** @hidden @internal */ get headerSelectorContainer(): ElementRef<HTMLElement>; /** @hidden @internal */ get headerDragContainer(): ElementRef<HTMLElement>; /** @hidden @internal */ get headerGroupContainer(): ElementRef<HTMLElement>; /** @hidden @internal */ get filteringRow(): IgxGridFilteringRowComponent; /** @hidden @internal */ theadRow: IgxGridHeaderRowComponent; /** @hidden @internal */ groupArea: IgxGridGroupByAreaComponent; /** * @hidden @internal */ tbody: ElementRef; protected tbodyContainer: ElementRef; /** * @hidden @internal */ pinContainer: ElementRef; /** * @hidden @internal */ tfoot: ElementRef<HTMLElement>; /** * @hidden @internal */ rowEditingOutletDirective: IgxOverlayOutletDirective; /** * @hidden @internal */ tmpOutlets: QueryList<any>; /** * @hidden * @internal */ dragIndicatorIconBase: TemplateRef<any>; /** * @hidden @internal */ rowEditCustomDirectives: QueryList<TemplateRef<IgxGridRowEditTemplateContext>>; /** * @hidden @internal */ rowEditTextDirectives: QueryList<TemplateRef<IgxGridRowEditTextTemplateContext>>; /** * Gets the row edit text template. */ get rowEditTextTemplate(): TemplateRef<IgxGridRowEditTextTemplateContext>; /** * Sets the row edit text template. *```html * <ng-template #template igxRowEditText let-rowChangesCount> * Changes: {{rowChangesCount}} * </ng-template> * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.rowEditTextTemplate = this.template; * ``` */ set rowEditTextTemplate(template: TemplateRef<IgxGridRowEditTextTemplateContext>); /** * @hidden @internal */ rowAddText: TemplateRef<IgxGridEmptyTemplateContext>; /** * Gets the row add text template. */ get rowAddTextTemplate(): TemplateRef<IgxGridEmptyTemplateContext>; /** * Sets the row add text template. *```html * <ng-template #template igxRowAddText> * Adding Row * </ng-template> * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.rowAddTextTemplate = this.template; * ``` */ set rowAddTextTemplate(template: TemplateRef<IgxGridEmptyTemplateContext>); /** * @hidden @internal */ rowEditActionsDirectives: QueryList<TemplateRef<IgxGridRowEditActionsTemplateContext>>; /** * Gets the row edit actions template. */ get rowEditActionsTemplate(): TemplateRef<IgxGridRowEditActionsTemplateContext>; /** * Sets the row edit actions template. *```html * <ng-template #template igxRowEditActions let-endRowEdit> * <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button> * <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button> * </ng-template> * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.rowEditActionsTemplate = this.template; * ``` */ set rowEditActionsTemplate(template: TemplateRef<IgxGridRowEditActionsTemplateContext>); /** * The custom template, if any, that should be used when rendering a row expand indicator. */ protected rowExpandedIndicatorDirectiveTemplate: TemplateRef<IgxGridRowTemplateContext>; /** * Gets the row expand indicator template. */ get rowExpandedIndicatorTemplate(): TemplateRef<IgxGridRowTemplateContext>; /** * Sets the row expand indicator template. *```html *<ng-template igxRowExpandedIndicator> * <igx-icon role="button">remove</igx-icon> *</ng-template> * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.rowExpandedIndicatorTemplate = this.template; * ``` */ set rowExpandedIndicatorTemplate(template: TemplateRef<IgxGridRowTemplateContext>); /** * The custom template, if any, that should be used when rendering a row collapse indicator. */ protected rowCollapsedIndicatorDirectiveTemplate: TemplateRef<IgxGridRowTemplateContext>; /** * Gets the row collapse indicator template. */ get rowCollapsedIndicatorTemplate(): TemplateRef<IgxGridRowTemplateContext>; /** * Sets the row collapse indicator template. *```html *<ng-template igxRowCollapsedIndicator> * <igx-icon role="button">add</igx-icon> *</ng-template> * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.rowCollapsedIndicatorTemplate = this.template; * ``` */ set rowCollapsedIndicatorTemplate(template: TemplateRef<IgxGridRowTemplateContext>); /** * The custom template, if any, that should be used when rendering a header expand indicator. */ protected headerExpandedIndicatorDirectiveTemplate: TemplateRef<IgxGridTemplateContext>; /** * Gets the header expand indicator template. */ get headerExpandedIndicatorTemplate(): TemplateRef<IgxGridTemplateContext>; /** * Sets the header expand indicator template. *```html *<ng-template igxHeaderExpandedIndicator> * <igx-icon role="button">remove</igx-icon> *</ng-template> * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.headerExpandedIndicatorTemplate = this.template; * ``` */ set headerExpandedIndicatorTemplate(template: TemplateRef<IgxGridTemplateContext>); /** * The custom template, if any, that should be used when rendering a header collapse indicator. */ protected headerCollapsedIndicatorDirectiveTemplate: TemplateRef<IgxGridTemplateContext>; /** * Gets the row collapse indicator template. */ get headerCollapsedIndicatorTemplate(): TemplateRef<IgxGridTemplateContext>; /** * Sets the row collapse indicator template. *```html *<ng-template igxHeaderCollapsedIndicator> * <igx-icon role="button">add</igx-icon> *</ng-template> * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.headerCollapsedIndicatorTemplate = this.template; * ``` */ set headerCollapsedIndicatorTemplate(template: TemplateRef<IgxGridTemplateContext>); /** @hidden @internal */ excelStyleHeaderIconDirectiveTemplate: TemplateRef<IgxGridHeaderTemplateContext>; /** * Gets the excel style header icon. */ get excelStyleHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>; /** * Sets the excel style header icon. *```html *<ng-template #template igxExcelStyleHeaderIcon> * <igx-icon>filter_alt</igx-icon> *</ng-template> * ``` *```typescript * @ViewChild('template', {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.excelStyleHeaderIconTemplate = this.template; * ``` */ set excelStyleHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>); /** * @hidden * @internal */ sortAscendingHeaderIconDirectiveTemplate: TemplateRef<IgxGridHeaderTemplateContext>; /** * The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order. */ get sortAscendingHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>; /** * Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order. *```html * <ng-template #template igxSortAscendingHeaderIcon> * <igx-icon>expand_less</igx-icon> * </ng-template> * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.sortAscendingHeaderIconTemplate = this.template; * ``` */ set sortAscendingHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>); /** @hidden @internal */ sortDescendingHeaderIconDirectiveTemplate: TemplateRef<IgxGridHeaderTemplateContext>; /** * The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order. */ get sortDescendingHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>; /** * Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order. *```html * <ng-template #template igxSortDescendingHeaderIcon> * <igx-icon>expand_more</igx-icon> * </ng-template> * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.sortDescendingHeaderIconTemplate = this.template; * ``` */ set sortDescendingHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>); /** * @hidden * @internal */ sortHeaderIconDirectiveTemplate: TemplateRef<IgxGridHeaderTemplateContext>; /** * Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted. */ get sortHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>; /** * Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted. *```html * <ng-template #template igxSortHeaderIcon> * <igx-icon>unfold_more</igx-icon> * </ng-template> * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.sortHeaderIconTemplate = this.template; * ``` */ set sortHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>); /** * @hidden * @internal */ dragIndicatorIconTemplates: QueryList<TemplateRef<IgxGridEmptyTemplateContext>>; /** * @hidden @internal */ rowEditTabsDEFAULT: QueryList<IgxRowEditTabStopDirective>; /** * @hidden @internal */ rowEditTabsCUSTOM: QueryList<IgxRowEditTabStopDirective>; /** * @hidden @internal */ rowEditingOverlay: IgxToggleDirective; /** * @hidden @internal */ tabindex: number; /** * @hidden @internal */ hostRole: string; /** @hidden @internal */ toolbar: QueryList<IgxGridToolbarComponent>; /** @hidden @internal */ protected paginationComponents: QueryList<IgxPaginatorComponent>; /** * @hidden @internal */ protected _outletDirective: IgxOverlayOutletDirective; /** * @hidden @internal * @igxElementsAnchor */ anchor: ViewContainerRef; /** * @hidden @internal */ protected defaultExpandedTemplate: TemplateRef<any>; /** * @hidden @internal */ protected defaultCollapsedTemplate: TemplateRef<any>; /** * @hidden @internal */ protected defaultESFHeaderIconTemplate: TemplateRef<any>; protected _summaryRowList: QueryList<IgxSummaryRowComponent>; private _rowList; private _pinnedRowList; /** * @hidden @internal */ private defaultRowEditTemplate; private _dataRowList; protected baseClass: string; /** * Gets/Sets the resource strings. * * @remarks * By default it uses EN resources. */ set resourceStrings(value: IGridResourceStrings); get resourceStrings(): IGridResourceStrings; /** * Gets/Sets the filtering logic of the `IgxGridComponent`. * * @remarks * The default is AND. * @example * ```html * <igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid> * ``` */ get filteringLogic(): FilteringLogic; set filteringLogic(value: FilteringLogic); /** * Gets/Sets the filtering state. * * @example * ```html * <igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid> * ``` * @remarks * Supports two-way binding. */ get filteringExpressionsTree(): IFilteringExpressionsTree; set filteringExpressionsTree(value: IFilteringExpressionsTree); /** * Gets/Sets the advanced filtering state. * * @example * ```typescript * let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; * this.grid.advancedFilteringExpressionsTree = logic; * ``` */ get advancedFilteringExpressionsTree(): IFilteringExpressionsTree; set advancedFilteringExpressionsTree(value: IFilteringExpressionsTree); /** * Gets/Sets the locale. * * @remarks * If not set, returns browser's language. */ get locale(): string; set locale(value: string); get pagingMode(): GridPagingMode; set pagingMode(val: GridPagingMode); /** @hidden @internal */ get page(): number; set page(val: number); /** @hidden @internal */ get perPage(): number; set perPage(val: number); /** * Gets/Sets if the row selectors are hidden. * * @remarks * By default row selectors are shown */ get hideRowSelectors(): boolean; set hideRowSelectors(value: boolean); /** * Gets/Sets whether rows can be moved. * * @example * ```html * <igx-grid #grid [rowDraggable]="true"></igx-grid> * ``` */ get rowDraggable(): boolean; set rowDraggable(val: boolean); /** * Gets/Sets the trigger for validators used when editing the grid. * * @example * ```html * <igx-grid #grid validationTrigger='blur'></igx-grid> * ``` */ validationTrigger: GridValidationTrigger; /** * @hidden * @internal */ rowDragging: boolean; /** @hidden @internal */ dragRowID: any; /** * Gets/Sets whether the rows are editable. * * @remarks * By default it is set to false. * @example * ```html * <igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid> * ``` */ get rowEditable(): boolean; set rowEditable(val: boolean); /** * Gets/Sets the height. * * @example * ```html * <igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid> * ``` */ get height(): string | null; set height(value: string | null); /** * @hidden @internal */ get hostWidth(): any; /** * Gets/Sets the width of the grid. * * @example * ```typescript * let gridWidth = this.grid.width; * ``` */ get width(): string | null; set width(value: string | null); /** @hidden @internal */ get headerWidth(): number; /** * Gets/Sets the row height. * * @example * ```html * <igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid> * ``` */ get rowHeight(): number; set rowHeight(value: number | string); /** * Gets/Sets the default width of the columns. * * @example * ```html * <igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid> * ``` */ get columnWidth(): string; set columnWidth(value: string); /** * Get/Sets the message displayed when there are no records. * * @example * ```html * <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid> * ``` */ set emptyGridMessage(value: string); get emptyGridMessage(): string; /** * Gets/Sets whether the grid is going to show a loading indicator. * * @example * ```html * <igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid> * ``` */ set isLoading(value: boolean); get isLoading(): boolean; /** * Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid * * @remarks * 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. * @example * ```typescript * this.grid.shouldGenerate = true;