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; export declare class IgxGridBaseDirective extends DisplayDensityBase implements OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit { selectionService: IgxGridSelectionService; crudService: IgxGridCRUDService; colResizingService: IgxColumnResizingService; protected gridAPI: GridBaseAPIService; protected _transactions: TransactionService; 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; /** * @hidden */ protected defaultCollapsedTemplate: TemplateRef; /** * 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 * * ``` * @memberof IgxGridBaseDirective */ autoGenerate: boolean; id: string; /** * An @Input property that sets a custom template when the `IgxGridComponent` is empty. * ```html * * ``` * @memberof IgxGridBaseDirective */ emptyGridTemplate: TemplateRef; /** * An @Input property that sets a custom template when the `IgxGridComponent` is loading. * ```html * * ``` * @memberof IgxGridBaseDirective */ loadingGridTemplate: TemplateRef; /** * Sets the filtering logic of the `IgxGridComponent`. * The default is AND. * ```html * * ``` * @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 * * ``` * @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 * * ``` * @memberof IgxGridBaseDirective */ filteringExpressionsTreeChange: EventEmitter; /** * Emitted after advanced filtering is performed. * Returns the advanced filtering expressions tree. * ```typescript * advancedFilteringExprTreeChange(event: IFilteringExpressionsTree){ * const filteringTree = event; * } * ``` * ```html * * ``` * @memberof IgxGridBaseDirective */ advancedFilteringExpressionsTreeChange: EventEmitter; /** * 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 * * ``` * @memberof IgxGridBaseDirective */ paging: boolean; /** * Returns the current page index. * ```html * let gridPage = this.grid.page; * ``` * @memberof IgxGridBaseDirective */ /** * Sets the current page index. * ```html * *``` * Two-way data binding. * ```html * * ``` * @memberof IgxGridBaseDirective */ page: number; /** *@hidden */ pageChange: EventEmitter; /** * 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 * * ``` * * Two-way data binding. * ```html * * ``` * @memberof IgxGridBaseDirective */ perPage: number; /** *@hidden */ perPageChange: EventEmitter; /** * You can provide a custom `ng-template` for the pagination UI of the grid. * ```html * * ``` * @memberof IgxGridBaseDirective */ paginationTemplate: TemplateRef; /** * 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 * * ``` * @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 * * ``` * @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 * * ``` * @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 * * ``` * @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 * * ``` * @memberof IgxGridBaseDirective */ evenRowCSS: string; /** * An @Input property that adds styling classes applied to all odd `IgxGridRowComponent`s in the grid. * ```html * * ``` * @memberof IgxGridBaseDirective */ oddRowCSS: string; /** * Returns the row height. * ```typescript * const rowHeight = this.grid.rowHeight; * ``` * @memberof IgxGridBaseDirective */ /** * Sets the row height. * ```html * * ``` * @memberof IgxGridBaseDirective */ rowHeight: any; /** * An @Input property that sets the default width of the `IgxGridComponent`'s columns. * ```html * * ``` * @memberof IgxGridBaseDirective */ columnWidth: string; /** * An @Input property that sets the primary key of the `IgxGridComponent`. * ```html * * ``` * @memberof IgxGridBaseDirective */ primaryKey: any; /** * An @Input property that sets the message displayed when there are no records. * ```html * * ``` * @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 * * ``` * @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 * * ``` * @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 * * ``` * @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 * * ``` * @memberof IgxGridBaseDirective */ columnPinning: boolean; /** * An @Input property that sets the title to be displayed in the UI of the column pinning. * ```html * * ``` * @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 * * ``` * @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 * * ``` * @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 * * ``` * @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 * * ``` * @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 * * ``` * @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 * * ``` */ filterStrategy: IFilteringStrategy; /** * Gets the sorting strategy of the grid. * ```typescript * let sortStrategy = this.grid.sortStrategy * ``` */ /** * Sets the sorting strategy of the grid. * ```html * * ``` */ 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 * * ``` * * ```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 * * ``` * ```typescript * public onCellClick(e){ * alert("The cell has been clicked!"); * } * ``` * @memberof IgxGridBaseDirective */ onCellClick: EventEmitter; /** * Emitted when `IgxGridCellComponent` is selected. Returns the `IgxGridCellComponent`. * ```html * * ``` * ```typescript * public onCellSelect(e){ * alert("The cell has been selected!"); * } * ``` * @memberof IgxGridBaseDirective */ onSelection: EventEmitter; /** * Emitted when `IgxGridRowComponent` is selected. * ```html * * ``` * ```typescript * public onCellClickChange(e){ * alert("The selected row has been changed!"); * } * ``` * @memberof IgxGridBaseDirective */ onRowSelectionChange: 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 */ onColumnPinning: 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 * * * * * * ``` * @memberof IgxGridComponent */ onCellEditCancel: 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 * * * * * * ``` * @memberof IgxGridComponent */ onCellEditEnter: 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 * * * * * * ``` * @memberof IgxGridBaseDirective */ onCellEdit: EventEmitter; /** * An @Output property emitting an event when [rowEditable]="true" a row enters edit mode. * This event is cancelable. * * args: IGridEditEventArgs = { * cancel: bool, * oldValue: , * rowID: int * } * * Bind to the event in markup as follows: * ```html * * * * * * ``` * ```typescript * editStart(event: IGridEditEventArgs) { * const editedRowObj = event.oldValue; * const cancelValue = event.cancel; * const rowID = event.rowID; * } * ``` * @memberof IgxGridComponent */ onRowEditEnter: 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: , * oldValue: , * rowID: int * } * * Bind to the event in markup as follows: * ```html * * * * * * ``` * * ```typescript * editDone(event: IGridEditEventArgs) { * const originalRowObj = event.oldValue; * const updatedRowObj = event.newValue; * const cancelValue = event.cancel; * const rowID = event.rowID; * } * ``` * @memberof IgxGridBaseDirective */ onRowEdit: 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: , * oldValue: , * rowID: int * } * * Bind to the event in markup as follows: * ```html * * * * * * ``` * ```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; /** * Emitted when a grid column is initialized. Returns the column object. * ```html * * ``` * ```typescript * initColumns(event: IgxColumnComponent) { * const column: IgxColumnComponent = event; * column.filterable = true; * column.sortable = true; * column.editable = true; * } * ``` * @memberof IgxGridBaseDirective */ onColumnInit: EventEmitter; /** * Emitted when sorting is performed through the UI. Returns the sorting expression. * ```html * * ``` * ```typescript * sortingDone(event: SortingDirection){ * const sortingDirection = event; * } * ``` * @memberof IgxGridBaseDirective */ onSortingDone: 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 * * ``` * @memberof IgxGridBaseDirective */ onFilteringDone: EventEmitter; /** * Emitted when paging is performed. Returns an object consisting of the previous and next pages. * ```typescript * pagingDone(event: IPageEventArgs){ * const paging = event; * } * ``` * ```html * * ``` * @memberof IgxGridBaseDirective */ onPagingDone: 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 * * ``` * @memberof IgxGridBaseDirective */ onRowAdded: EventEmitter; /** * Emitted when a `IgxGridRowComponent` is deleted through the `IgxGridComponent` API. * Returns an `IRowDataEventArgs` object. * ```typescript * rowDeleted(event: IRowDataEventArgs){ * const rowInfo = event; * } * ``` * ```html * * ``` * @memberof IgxGridBaseDirective */ onRowDeleted: EventEmitter; /** * Emitted when a new chunk of data is loaded from virtualization. * ```typescript * * ``` * @memberof IgxGridBaseDirective */ onDataPreLoad: EventEmitter; /** * Emitted when `IgxColumnComponent` is resized. * Returns the `IgxColumnComponent` object's old and new width. * ```typescript * resizing(event: IColumnResizeEventArgs){ * const grouping = event; * } * ``` * ```html * * ``` * @memberof IgxGridBaseDirective */ onColumnResized: EventEmitter; /** * Emitted when a `IgxGridCellComponent` is right clicked. Returns the `IgxGridCellComponent` object. * ```typescript * contextMenu(event: IGridCellEventArgs){ * const resizing = event; * console.log(resizing); * } * ``` * ```html * * ``` * @memberof IgxGridBaseDirective */ onContextMenu: EventEmitter; /** * Emitted when a `IgxGridCellComponent` is double clicked. Returns the `IgxGridCellComponent` object. * ```typescript * dblClick(event: IGridCellEventArgs){ * const dblClick = event; * console.log(dblClick); * } * ``` * ```html * * ``` * @memberof IgxGridBaseDirective */ onDoubleClick: EventEmitter; /** * Emitted when `IgxColumnComponent` visibility is changed. Args: { column: any, newValue: boolean } * ```typescript * visibilityChanged(event: IColumnVisibilityChangedEventArgs){ * const visiblity = event; * } * ``` * ```html * * ``` * @memberof IgxGridBaseDirective */ onColumnVisibilityChanged: EventEmitter; /** * Emitted when `IgxColumnComponent` moving starts. Returns the moved `IgxColumnComponent` object. * ```typescript * movingStart(event: IColumnMovingStartEventArgs){ * const movingStarts = event; * } * ``` * ```html * * ``` * @memberof IgxGridBaseDirective */ onColumnMovingStart: 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 * * ``` * @memberof IgxGridBaseDirective */ onColumnMoving: EventEmitter; /** * Emitted when `IgxColumnComponent` moving ends. * Returns the source and target `IgxColumnComponent` objects. * ```typescript * movingEnds(event: IColumnMovingEndEventArgs){ * const movingEnds = event; * } * ``` * ```html * * ``` * @memberof IgxGridBaseDirective */ onColumnMovingEnd: 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 * * ``` */ onGridKeydown: EventEmitter; /** * Emitted when start dragging a row. * Return the dragged row. */ onRowDragStart: EventEmitter; /** * Emitted when dropping a row. * Return the dropped row. */ onRowDragEnd: EventEmitter; /** * Emitted when a copy operation is executed. * Fired only if copy behavior is enabled through the [`clipboardOptions`]{@link IgxGridBaseDirective#clipboardOptions}. */ onGridCopy: EventEmitter; /** * @hidden */ resizeLine: IgxGridColumnResizerComponent; /** * @hidden */ loadingOverlay: ElementRef; /** * @hidden */ loadingOutlet: IgxOverlayOutletDirective; /** * @hidden */ columnList: QueryList; /** *@hidden */ excelStyleSortingTemplateDirective: IgxExcelStyleSortingTemplateDirective; /** *@hidden */ excelStyleMovingTemplateDirective: IgxExcelStyleMovingTemplateDirective; /** *@hidden */ excelStyleHidingTemplateDirective: IgxExcelStyleHidingTemplateDirective; /** *@hidden */ excelStylePinningTemplateDirective: IgxExcelStylePinningTemplateDirective; /** *@hidden */ excelStyleLoadingValuesTemplateDirective: IgxExcelStyleLoadingValuesTemplateDirective; /** * @hidden */ headerGroups: QueryList; /** * 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; readonly summariesRowList: QueryList; /** * A list of `IgxGridRowComponent`. * ```typescript * const rowList = this.grid.rowList; * ``` * @memberof IgxGridBaseDirective */ readonly rowList: QueryList; private _dataRowList; /** * A list of `IgxGridRowComponent`, currently rendered. * ```typescript * const dataList = this.grid.dataRowList; * ``` * @memberof IgxGridBaseDirective */ readonly dataRowList: QueryList>; /** * A template reference for the template when the filtered `IgxGridComponent` is empty. * ``` * const emptyTempalte = this.grid.emptyGridTemplate; * ``` * @memberof IgxGridBaseDirective */ emptyFilteredGridTemplate: TemplateRef; /** * A template reference for the template when the `IgxGridComponent` is empty. * ``` * const emptyTempalte = this.grid.emptyGridTemplate; * ``` * @memberof IgxGridBaseDirective */ emptyGridDefaultTemplate: TemplateRef; loadingGridDefaultTemplate: TemplateRef; /** * @hidden */ parentVirtDir: IgxGridForOfDirective; /** * 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; /** * @hidden * @internal */ readonly headSelectorTemplate: TemplateRef; /** * @hidden * @internal */ headSelectorsTemplates: QueryList; /** * @hidden * @internal */ readonly rowSelectorTemplate: TemplateRef; /** * @hidden * @internal */ rowSelectorsTemplates: QueryList; /** * @hidden * @internal */ dragGhostCustomTemplates: QueryList>; /** * @hidden */ verticalScrollContainer: IgxGridForOfDirective; /** * @hidden */ verticalScroll: IgxGridForOfDirective; /** * @hidden */ scr: ElementRef; /** * @hidden */ footer: ElementRef; /** * @hidden */ headerContainer: IgxGridForOfDirective; /** * @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; /** * @hidden */ readonly rowOutletDirective: IgxOverlayOutletDirective; /** * @hidden */ readonly parentRowOutletDirective: IgxOverlayOutletDirective; /** * @hidden * @internal */ dragIndicatorIconBase: TemplateRef; /** * @hidden */ private defaultRowEditTemplate; /** * @hidden */ rowEditCustom: TemplateRef; /** @hidden */ readonly rowEditContainer: TemplateRef; /** @hidden */ rowEditText: TemplateRef; /** @hidden */ rowEditActions: TemplateRef; /** * The custom template, if any, that should be used when rendering a row expand indicator. */ rowExpandedIndicatorTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering a row collapse indicator. */ rowCollapsedIndicatorTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering a header expand indicator. */ headerExpandIndicatorTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering a header collapse indicator. */ headerCollapseIndicatorTemplate: TemplateRef; /** * @hidden * @internal */ dragIndicatorIconTemplates: QueryList>; /** * The custom template, if any, that should be used when rendering the row drag indicator icon */ dragIndicatorIconTemplate: TemplateRef; /** * @hidden */ readonly rowInEditMode: IgxRowDirective; /** * @hidden */ readonly firstEditableColumnIndex: number; /** * @hidden */ readonly lastEditableColumnIndex: number; /** * @hidden */ rowEditTabsDEFAULT: QueryList; /** * @hidden */ rowEditTabsCUSTOM: QueryList; /** * @hidden * TODO: Nav service logic doesn't handle 0 results from this querylist */ readonly rowEditTabs: QueryList; /** * @hidden */ rowEditingOverlay: IgxToggleDirective; /** * @hidden */ tabindex: number; /** * @hidden */ readonly hostClass: string; readonly bannerClass: string; /** * @hidden */ hostRole: string; /** * @hidden */ readonly pipeTrigger: number; /** * @hidden */ readonly summaryPipeTrigger: number; /** * Returns the sorting state of the `IgxGridComponent`. * ```typescript * const sortingState = this.grid.sortingExpressions; * ``` * @memberof IgxGridBaseDirective */ /** * Sets the sorting state of the `IgxGridComponent`. * ```typescript * this.grid.sortingExpressions = [{ * fieldName: "ID", * dir: SortingDirection.Desc, * ignoreCase: true * }]; * ``` * * Two-way data binding. * ```html * * ``` * @memberof IgxGridBaseDirective */ sortingExpressions: ISortingExpression[]; /** * Emitted before sorting is performed. Returns the sorting expressions. * ```html * * ``` * ```typescript * sortingExprChange(event: ISortingExpression[]){ * const sortingExpressions = event; * } * ``` * @memberof IgxGridBaseDirective */ sortingExpressionsChange: EventEmitter; /** * @hidden */ readonly maxLevelHeaderDepth: any; /** * Returns the number of hidden `IgxColumnComponent`. * ```typescript * const hiddenCol = this.grid.hiddenColumnsCount; * `` */ readonly hiddenColumnsCount: number; /** * Returns the text to be displayed inside the toggle button * for the built-in column hiding UI of the`IgxColumnComponent`. * ```typescript * const hiddenColText = this.grid.hiddenColumnsText; * ``` * @memberof IgxGridBaseDirective */ /** * Sets the text to be displayed inside the toggle button * for the built-in column hiding UI of the`IgxColumnComponent`. * ```typescript * * ``` * @memberof IgxGridBaseDirective */ hiddenColumnsText: string; /** * Returns the text to be displayed inside the toggle button * for the built-in column pinning UI of the`IgxColumnComponent`. * ```typescript * const pinnedText = this.grid.pinnedColumnsText; * ``` * @memberof IgxGridBaseDirective */ /** * Sets the text to be displayed inside the toggle button * for the built-in column pinning UI of the`IgxColumnComponent`. * ```html * * ``` * @memberof IgxGridBaseDirective */ pinnedColumnsText: string; /** * Get transactions service for the grid. */ readonly transactions: TransactionService; /** * @hidden */ columnsWithNoSetWidths: any; private _showToolbar; private _exportExcel; private _exportCsv; private _toolbarTitle; private _exportText; private _exportExcelText; private _exportCsvText; private _rowEditable; private _currentRowState; private _filteredSortedData; /** * @hidden */ readonly currentRowState: any; /** * Provides access to the `IgxToolbarComponent`. * ```typescript * const gridToolbar = this.grid.toolbar; * ``` * @memberof IgxGridBaseDirective */ toolbar: IgxGridToolbarComponent; private toolbarHtml; /** * Returns whether the `IgxGridComponent`'s toolbar is shown or hidden. * ```typescript * const toolbarGrid = this.grid.showToolbar; * ``` * @memberof IgxGridBaseDirective */ /** * Shows or hides the `IgxGridComponent`'s toolbar. * ```html * * ``` * @memberof IgxGridBaseDirective */ showToolbar: boolean; /** * Returns the toolbar's title. * ```typescript * const toolbarTitle = this.grid.toolbarTitle; * ``` * @memberof IgxGridBaseDirective */ /** * Sets the toolbar's title. * ```html * * ``` * @memberof IgxGridBaseDirective */ toolbarTitle: string; /** * Returns whether the option for exporting to MS Excel is enabled or disabled. * ```typescript * cosnt excelExporter = this.grid.exportExcel; * ``` * @memberof IgxGridBaseDirective */ /** * Enable or disable the option for exporting to MS Excel. * ```html * * ``` * @memberof IgxGridBaseDirective */ exportExcel: boolean; /** * Returns whether the option for exporting to CSV is enabled or disabled. * ```typescript * const exportCsv = this.grid.exportCsv; * ``` * @memberof IgxGridBaseDirective */ /** * Enable or disable the option for exporting to CSV. * ```html * * ``` * @memberof IgxGridBaseDirective */ exportCsv: boolean; /** * Returns the textual content for the main export button. * ```typescript * const exportText = this.grid.exportText; * ``` * @memberof IgxGridBaseDirective */ /** * Sets the textual content for the main export button. * ```html * * ``` * @memberof IgxGridBaseDirective */ exportText: string; /** * Returns the textual content for the MS Excel export button. * ```typescript * const excelText = this.grid.exportExcelText; * ``` * @memberof IgxGridBaseDirective */ /** * Sets the textual content for the MS Excel export button. * ```html * * ``` * @memberof IgxGridBaseDirective */ exportExcelText: string; /** * Returns the textual content for the CSV export button. * ```typescript * const csvText = this.grid.exportCsvText; * ``` * @memberof IgxGridBaseDirective */ /** * Sets the textual content for the CSV export button. * ```html * * ``` * @memberof IgxGridBaseDirective */ exportCsvText: string; /** * Controls the copy behavior of the grid. */ clipboardOptions: { /** * Enables/disables the copy behavior */ enabled: boolean; /** * Include the columns headers in the clipboard output. */ copyHeaders: boolean; /** * Apply the columns formatters (if any) on the data in the clipboard output. */ copyFormatters: boolean; /** * The separator used for formatting the copy output. Defaults to `\t`. */ separator: string; }; /** * Returns the current cell selection state, which can be none, single or multiple * @memberof IgxGridBaseDirective */ /** * Allows you to set cell selection mode * By default the cell selection mode is multiple * @param selectionMode: GridSelectionMode * @memberof IgxGridBaseDirective */ cellSelection: GridSelectionMode; /** * Returns the current row selection state, which can be none, single or multiple * @memberof IgxGridBaseDirective */ /** * Allows you to set row selection mode * By default the row selection mode is none * @param selectionMode: GridSelectionMode * @memberof IgxGridBaseDirective */ rowSelection: GridSelectionMode; /** * @hidden */ rowEditMessage: any; /** * Emitted when an export process is initiated by the user. * ```typescript * toolbarExporting(event: IGridToolbarExportEventArgs){ * const toolbarExporting = event; * } * ``` * @memberof IgxGridBaseDirective */ onToolbarExporting: EventEmitter; /** * Emitted when making a range selection either through * drag selection or through keyboard selection. */ onRangeSelection: EventEmitter; /** * @hidden */ pagingState: any; /** * @hidden */ calcWidth: number; /** * @hidden */ calcHeight: number; /** * @hidden */ tfootHeight: number; /** * @hidden */ chipsGoupingExpressions: any[]; /** * @hidden */ summariesHeight: number; /** * @hidden */ draggedColumn: IgxColumnComponent; /** * @hidden */ disableTransitions: boolean; /** * @hidden */ lastSearchInfo: ISearchInfo; /** * @hidden */ columnWidthSetByUser: boolean; data: any[]; filteredData: any[]; /** * @hidden */ protected destroy$: Subject; /** * @hidden */ protected _perPage: number; /** * @hidden */ protected _page: number; /** * @hidden */ protected _paging: boolean; /** * @hidden */ protected _hideRowSelectors: boolean; /** * @hidden */ protected _rowDrag: boolean; /** * @hidden */ protected _pipeTrigger: number; /** * @hidden */ protected _summaryPipeTrigger: number; /** * @hidden */ protected _columns: IgxColumnComponent[]; /** * @hidden */ protected _pinnedColumns: IgxColumnComponent[]; /** * @hidden */ protected _unpinnedColumns: IgxColumnComponent[]; /** * @hidden */ protected _filteringExpressionsTree: IFilteringExpressionsTree; /** * @hidden */ protected _advancedFilteringExpressionsTree: IFilteringExpressionsTree; /** * @hidden */ protected _sortingExpressions: Array; /** * @hidden */ protected _maxLevelHeaderDepth: any; /** * @hidden */ protected _columnHiding: boolean; /** * @hidden */ protected _columnPinning: boolean; /** * @hidden */ protected _hasVisibleColumns: any; protected _allowFiltering: boolean; protected _allowAdvancedFiltering: boolean; protected _filterMode: FilterMode; protected observer: ResizeObserver; protected resizeNotify: Subject; private columnListDiffer; private _hiddenColumnsText; private _pinnedColumnsText; private _height; private _width; private _rowHeight; protected _baseFontSize: number; private _horizontalForOfs; private _multiRowLayoutRowSize; protected _loadingId: any; private _totalWidth; private _pinnedVisible; private _unpinnedVisible; private _pinnedWidth; private _unpinnedWidth; private _visibleColumns; private _columnGroups; private _columnWidth; protected _defaultTargetRecordNumber: number; private _summaryPosition; private _summaryCalculationMode; private _cellSelectionMode; private _rowSelectionMode; private rowEditPositioningStrategy; private rowEditSettings; private verticalScrollHandler; private horizontalScrollHandler; /** * @hidden * @internal */ isDetailRecord(rec: any): boolean; /** * @hidden * @internal */ readonly hasDetails: boolean; /** * @hidden * @internal */ hideOverlays(): void; private keydownHandler; constructor(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, colResizingService: IgxColumnResizingService, gridAPI: GridBaseAPIService, _transactions: TransactionService, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions); _setupServices(): void; _setupListeners(): void; /** * @hidden */ ngOnInit(): void; protected setupColumns(): void; /** * @hidden * @internal */ resetColumnsCaches(): void; /** * @hidden * @internal */ resetForOfCache(): void; /** * @hidden * @internal */ resetColumnCollections(): void; /** * @hidden * @internal */ resetCachedWidths(): void; /** * @hidden * @internal */ resetCaches(): void; /** * @hidden */ ngAfterContentInit(): void; _setupRowObservers(): void; _zoneBegoneListeners(): void; /** * @hidden */ ngAfterViewInit(): void; notifyChanges(repaint?: boolean): void; protected resetNotifyChanges(): void; ngDoCheck(): void; /** * @hidden * @internal */ getDragGhostCustomTemplate(): TemplateRef; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ dataLoading(event: any): void; /** * Toggles the specified column's visibility. * ```typescript * this.grid1.toggleColumnVisibility({ * column: this.grid1.columns[0], * newValue: true * }); * ``` * @memberof IgxGridBaseDirective */ toggleColumnVisibility(args: IColumnVisibilityChangedEventArgs): void; /** * Returns the native element of the `IgxGridComponent`. * ```typescript * const nativeEl = this.grid.nativeElement. * ``` * @memberof IgxGridBaseDirective */ readonly nativeElement: any; /** * @hidden */ protected readonly outlet: IgxOverlayOutletDirective; /** * Returns the `IgxGridComponent`'s rows height. * ```typescript * const rowHeigh = this.grid.defaultRowHeight; * ``` * @memberof IgxGridBaseDirective */ readonly defaultRowHeight: number; readonly defaultSummaryHeight: number; /** * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width. * Used internally for restricting header group component width. * The values below depend on the header cell default right/left padding values. * @memberof IgxGridBaseDirective */ readonly defaultHeaderGroupMinWidth: number; paginatorClassName(): string; /** * Returns the current width of the container for the pinned `IgxColumnComponent`s. * ```typescript * const pinnedWidth = this.grid.getPinnedWidth; * ``` * @memberof IgxGridBaseDirective */ readonly pinnedWidth: number; /** * Returns the current width of the container for the unpinned `IgxColumnComponent`s. * ```typescript * const unpinnedWidth = this.grid.getUnpinnedWidth; * ``` * @memberof IgxGridBaseDirective */ readonly unpinnedWidth: number; readonly isHorizontalScrollHidden: boolean; /** * @hidden * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed. * TODO: Update for Angular 8. Calling parent class getter using super is not supported for now. */ readonly featureColumnsWidth: number; /** * @hidden */ readonly summariesMargin: number; /** * Returns an array of `IgxColumnComponent`s. * ```typescript * const colums = this.grid.columns. * ``` * @memberof IgxGridBaseDirective */ readonly columns: IgxColumnComponent[]; /** * Returns an array of the pinned `IgxColumnComponent`s. * ```typescript * const pinnedColumns = this.grid.pinnedColumns. * ``` * @memberof IgxGridBaseDirective */ readonly pinnedColumns: IgxColumnComponent[]; /** * Returns an array of unpinned `IgxColumnComponent`s. * ```typescript * const unpinnedColumns = this.grid.unpinnedColumns. * ``` * @memberof IgxGridBaseDirective */ readonly unpinnedColumns: IgxColumnComponent[]; /** * Returns the `width` to be set on `IgxGridHeaderGroupComponent`. * @memberof IgxGridBaseDirective */ getHeaderGroupWidth(column: IgxColumnComponent): string; /** * Returns the `IgxColumnComponent` by field name. * ```typescript * const myCol = this.grid1.getColumnByName("ID"); * ``` * @param name * @memberof IgxGridBaseDirective */ getColumnByName(name: string): IgxColumnComponent; /** * Returns the `IgxRowDirective` by index. * ```typescript * const myRow = this.grid1.getRowByIndex(1); * ``` * @param index * @memberof IgxGridBaseDirective */ getRowByIndex(index: number): IgxRowDirective; /** * Returns `IgxGridRowComponent` object by the specified primary key . * Requires that the `primaryKey` property is set. * ```typescript * const myRow = this.grid1.getRowByKey("cell5"); * ``` * @param keyValue * @memberof IgxGridBaseDirective */ getRowByKey(keyValue: any): IgxRowDirective; /** * Returns an array of visible `IgxColumnComponent`s. * ```typescript * const visibleColumns = this.grid.visibleColumns. * ``` * @memberof IgxGridBaseDirective */ readonly visibleColumns: IgxColumnComponent[]; /** * Returns the `IgxGridCellComponent` that matches the conditions. * ```typescript * const myCell = this.grid1.getCellByColumn(2,"UnitPrice"); * ``` * @param rowIndex * @param columnField * @memberof IgxGridBaseDirective */ getCellByColumn(rowIndex: number, columnField: string): IgxGridCellComponent; /** * Returns an `IgxGridCellComponent` object by the specified primary key and column field. * Requires that the primaryKey property is set. * ```typescript * grid.getCellByKey(1, 'index'); * ``` * @param rowSelector match any rowID * @param columnField * @memberof IgxGridBaseDirective */ getCellByKey(rowSelector: any, columnField: string): IgxGridCellComponent; /** * Returns the total number of pages. * ```typescript * const totalPages = this.grid.totalPages; * ``` * @memberof IgxGridBaseDirective */ readonly totalPages: number; /** * Returns if the current page is the first page. * ```typescript * const firstPage = this.grid.isFirstPage; * ``` * @memberof IgxGridBaseDirective */ readonly isFirstPage: boolean; /** * Goes to the next page of the `IgxGridComponent`, if the grid is not already at the last page. * ```typescript * this.grid1.nextPage(); * ``` * @memberof IgxGridBaseDirective */ nextPage(): void; /** * Goes to the previous page of the `IgxGridComponent`, if the grid is not already at the first page. * ```typescript * this.grid1.previousPage(); * ``` * @memberof IgxGridBaseDirective */ previousPage(): void; /** * Returns the total number of records. * Only functions when paging is enabled. * ```typescript * const totalRecords = this.grid.totalRecords; * ``` * @memberof IgxGridBaseDirective */ readonly totalRecords: number; /** * Returns if the current page is the last page. * ```typescript * const lastPage = this.grid.isLastPage; * ``` * @memberof IgxGridBaseDirective */ readonly isLastPage: boolean; /** * Returns the total width of the `IgxGridComponent`. * ```typescript * const gridWidth = this.grid.totalWidth; * ``` * @memberof IgxGridBaseDirective */ readonly totalWidth: number; /** * @hidden * @internal */ readonly showRowSelectors: boolean; /** * @hidden * @internal */ readonly showDragIcons: boolean; /** * @hidden */ protected _moveColumns(from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition): void; /** * @hidden */ protected _resetColumnList(list?: any): any[]; /** * @hidden */ protected _reorderColumns(from: IgxColumnComponent, to: IgxColumnComponent, position: DropPosition, columnCollection: any[]): void; /** * @hidden */ protected _moveChildColumns(parent: IgxColumnComponent, from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition): void; /** * Moves a column to the specified drop target. * ```typescript * grid.moveColumn(compName, persDetails); * ``` * @memberof IgxGridBaseDirective */ moveColumn(column: IgxColumnComponent, dropTarget: IgxColumnComponent, pos?: DropPosition): void; /** * Goes to the desired page index. * ```typescript * this.grid1.paginate(1); * ``` * @param val * @memberof IgxGridBaseDirective */ paginate(val: number): void; /** * Manually marks the `IgxGridComponent` for change detection. * ```typescript * this.grid1.markForCheck(); * ``` * @memberof IgxGridBaseDirective */ markForCheck(): void; /** * Creates a new `IgxGridRowComponent` and adds the data record to the end of the data source. * ```typescript * const record = { * ID: this.grid1.data[this.grid1.data.length - 1].ID + 1, * Name: this.newRecord * }; * this.grid1.addRow(record); * ``` * @param data * @memberof IgxGridBaseDirective */ addRow(data: any): void; /** * Removes the `IgxGridRowComponent` and the corresponding data record by primary key. * Requires that the `primaryKey` property is set. * The method accept rowSelector as a parameter, which is the rowID. * ```typescript * this.grid1.deleteRow(0); * ``` * @param rowSelector * @memberof IgxGridBaseDirective */ deleteRow(rowSelector: any): void; /** @hidden */ deleteRowById(rowId: any): void; /** * @hidden */ protected deleteRowFromData(rowID: any, index: number): void; /** * Updates the `IgxGridRowComponent` and the corresponding data record by primary key. * Requires that the `primaryKey` property is set. * ```typescript * this.gridWithPK.updateCell('Updated', 1, 'ProductName'); * ``` * @param value the new value which is to be set. * @param rowSelector corresponds to rowID. * @param column corresponds to column field. * @memberof IgxGridBaseDirective */ updateCell(value: any, rowSelector: any, column: string): void; /** * Updates the `IgxGridRowComponent`, which is specified by * rowSelector parameter and the data source record with the passed value. * This method will apply requested update only if primary key is specified in the grid. * ```typescript * grid.updateRow({ * ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21') * }, 1); * ``` * @param value * @param rowSelector correspond to rowID * @memberof IgxGridBaseDirective */ updateRow(value: any, rowSelector: any): void; /** * Sort a single `IgxColumnComponent`. * Sort the `IgxGridComponent`'s `IgxColumnComponent` based on the provided array of sorting expressions. * ```typescript * this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); * ``` * @memberof IgxGridBaseDirective */ sort(expression: ISortingExpression | Array): void; /** * Filters a single `IgxColumnComponent`. * ```typescript * public filter(term) { * this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains")); * } * ``` * @param name * @param value * @param conditionOrExpressionTree * @param ignoreCase * @memberof IgxGridBaseDirective */ filter(name: string, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree, ignoreCase?: boolean): void; /** * Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition. * ```typescript * grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains')); * ``` * @param value * @param condition * @param ignoreCase * @memberof IgxGridBaseDirective */ filterGlobal(value: any, condition: any, ignoreCase?: any): void; /** * Enables summaries for the specified column and applies your customSummary. * If you do not provide the customSummary, then the default summary for the column data type will be applied. * ```typescript * grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]); * ``` * Enable summaries for the listed columns. * ```typescript * grid.enableSummaries('ProductName'); * ``` * @param rest * @memberof IgxGridBaseDirective */ enableSummaries(...rest: any[]): void; /** * Disable summaries for the specified column. * ```typescript * grid.disableSummaries('ProductName'); * ``` * * Disable summaries for the listed columns. * ```typescript * grid.disableSummaries([{ fieldName: 'ProductName' }]); * ``` * @memberof IgxGridBaseDirective */ disableSummaries(...rest: any[]): void; /** * If name is provided, clears the filtering state of the corresponding `IgxColumnComponent`, * otherwise clears the filtering state of all `IgxColumnComponent`s. * ```typescript * this.grid.clearFilter(); * ``` * @param name * @memberof IgxGridBaseDirective */ clearFilter(name?: string): void; /** * If name is provided, clears the sorting state of the corresponding `IgxColumnComponent`, * otherwise clears the sorting state of all `IgxColumnComponent`. * ```typescript * this.grid.clearSort(); * ``` * @param name * @memberof IgxGridBaseDirective */ clearSort(name?: string): void; /** * @hidden */ refreshGridState(args?: any): void; /** * Pins a column by field name. Returns whether the operation is successful. * ```typescript * this.grid.pinColumn("ID"); * ``` * @param columnName * @param index * @memberof IgxGridBaseDirective */ pinColumn(columnName: string | IgxColumnComponent, index?: any): boolean; /** * Unpins a column by field name. Returns whether the operation is successful. * ```typescript * this.grid.pinColumn("ID"); * ``` * @param columnName * @param index * @memberof IgxGridBaseDirective */ unpinColumn(columnName: string | IgxColumnComponent, index?: any): boolean; /** * Recalculates grid width/height dimensions. Should be run when changing DOM elements dimentions manually that affect the grid's size. * ```typescript * this.grid.reflow(); * ``` * @memberof IgxGridBaseDirective */ reflow(): void; /** * Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible. * Returns how many times the grid contains the string. * ```typescript * this.grid.findNext("financial"); * ``` * @param text the string to search. * @param caseSensitive optionally, if the search should be case sensitive (defaults to false). * @param exactMatch optionally, if the text should match the entire value (defaults to false). * @memberof IgxGridBaseDirective */ findNext(text: string, caseSensitive?: boolean, exactMatch?: boolean): number; /** * Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible. * Returns how many times the grid contains the string. * ```typescript * this.grid.findPrev("financial"); * ``` * @param text the string to search. * @param caseSensitive optionally, if the search should be case sensitive (defaults to false). * @param exactMatch optionally, if the text should match the entire value (defaults to false). * @memberof IgxGridBaseDirective */ findPrev(text: string, caseSensitive?: boolean, exactMatch?: boolean): number; /** * Reapplies the existing search. * Returns how many times the grid contains the last search. * ```typescript * this.grid.refreshSearch(); * ``` * @param updateActiveInfo * @memberof IgxGridBaseDirective */ refreshSearch(updateActiveInfo?: boolean): number; /** * Removes all the highlights in the cell. * ```typescript * this.grid.clearSearch(); * ``` * @memberof IgxGridBaseDirective */ clearSearch(): void; /** * Returns if the `IgxGridComponent` has sortable columns. * ```typescript * const sortableGrid = this.grid.hasSortableColumns; * ``` * @memberof IgxGridBaseDirective */ readonly hasSortableColumns: boolean; /** * Returns if the `IgxGridComponent` has editable columns. * ```typescript * const editableGrid = this.grid.hasEditableColumns; * ``` * @memberof IgxGridBaseDirective */ readonly hasEditableColumns: boolean; /** * Returns if the `IgxGridComponent` has fiterable columns. * ```typescript * const filterableGrid = this.grid.hasFilterableColumns; * ``` * @memberof IgxGridBaseDirective */ readonly hasFilterableColumns: boolean; /** * Returns if the `IgxGridComponent` has summarized columns. * ```typescript * const summarizedGrid = this.grid.hasSummarizedColumns; * ``` * @memberof IgxGridBaseDirective */ readonly hasSummarizedColumns: boolean; /** * @hidden */ readonly rootSummariesEnabled: boolean; /** * @hidden */ hasVisibleColumns: boolean; /** * Returns if the `IgxGridComponent` has moveable columns. * ```typescript * const movableGrid = this.grid.hasMovableColumns; * ``` * @memberof IgxGridBaseDirective */ readonly hasMovableColumns: boolean; /** * Returns if the `IgxGridComponent` has column groups. * ```typescript * const groupGrid = this.grid.hasColumnGroups; * ``` * @memberof IgxGridBaseDirective */ readonly hasColumnGroups: boolean; /** * Returns if the `IgxGridComponent` has column layouts for multi-row layout definition. * ```typescript * const layoutGrid = this.grid.hasColumnLayouts; * ``` * @memberof IgxGridBaseDirective */ readonly hasColumnLayouts: boolean; /** * Returns an array of the selected `IgxGridCellComponent`s. * ```typescript * const selectedCells = this.grid.selectedCells; * ``` * @memberof IgxGridBaseDirective */ readonly selectedCells: IgxGridCellComponent[] | any[]; /** * @hidden */ readonly multiRowLayoutRowSize: number; /** * @hidden */ protected readonly rowBasedHeight: number; /** * @hidden */ protected readonly isPercentWidth: boolean; /** * @hidden @internal */ readonly isPercentHeight: boolean; /** * @hidden * Sets columns defaultWidth property */ protected _derivePossibleWidth(): void; /** * @hidden */ protected readonly defaultTargetBodyHeight: number; /** * @hidden @internal * The rowHeight input is bound to min-height css prop of rows that adds a 1px border in all cases */ readonly renderedRowHeight: number; /** * @hidden * @internal */ protected calcGridHeadRow(): void; /** * @hidden * Sets TBODY height i.e. this.calcHeight */ protected calculateGridHeight(): void; /** * @hidden */ protected getGroupAreaHeight(): number; /** * @hidden */ protected getToolbarHeight(): number; /** * @hidden */ protected getPagingHeight(): number; /** * @hidden */ protected getFilterCellHeight(): number; /** * @hidden */ protected _calculateGridBodyHeight(): number; protected checkContainerSizeChange(): boolean; protected _shouldAutoSize(renderedHeight: any): boolean; readonly outerWidth: number; /** * @hidden * Gets the visible content height that includes header + tbody + footer. */ getVisibleContentHeight(): any; /** * @hidden */ getPossibleColumnWidth(baseWidth?: number): string; /** * @hidden * Sets grid width i.e. this.calcWidth */ protected calculateGridWidth(): void; private getColumnWidthSum; hasVerticalSroll(): boolean; /** * @hidden @internal */ protected getDataBasedBodyHeight(): number; /** * @hidden */ protected onColumnsChanged(change: QueryList): void; /** * @hidden */ protected calculateGridSizes(): void; private _applyWidthHostBinding; /** * @hidden * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed. * Method used to override the calculations. * TODO: Remove for Angular 8. Calling parent class getter using super is not supported for now. */ getFeatureColumnsWidth(): number; /** * Gets calculated width of the pinned area. * ```typescript * const pinnedWidth = this.grid.getPinnedWidth(); * ``` * @param takeHidden If we should take into account the hidden columns in the pinned area. * @memberof IgxGridBaseDirective */ getPinnedWidth(takeHidden?: boolean): number; /** * @hidden * Gets calculated width of the unpinned area * @param takeHidden If we should take into account the hidden columns in the pinned area. * @memberof IgxGridBaseDirective */ protected getUnpinnedWidth(takeHidden?: boolean): number; /** * @hidden */ protected _summaries(fieldName: string, hasSummary: boolean, summaryOperand?: any): void; /** * @hidden */ protected _multipleSummaries(expressions: ISummaryExpression[], hasSummary: boolean): void; /** * @hidden */ protected _disableMultipleSummaries(expressions: any): void; /** * @hidden */ protected resolveDataTypes(rec: any): DataType; private getScrollWidth; /** * @hidden */ protected autogenerateColumns(): void; protected generateDataFields(data: any[]): string[]; /** * @hidden */ onlyTopLevel(arr: any): any; /** * @hidden */ protected initColumns(collection: QueryList, cb?: Function): void; /** * @hidden */ protected reinitPinStates(): void; /** * @hidden */ isColumnGrouped(fieldName: string): boolean; /** * @hidden */ onHeaderSelectorClick(event: any): void; /** * @hidden */ readonly headSelectorBaseAriaLabel: "Deselect all filtered" | "Select all filtered" | "Deselect all" | "Select all"; /** * @hidden * @internal */ readonly totalRowsCountAfterFilter: number; /** * Returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid. * ```typescript * const dataView = this.grid.dataView; * ``` * @memberof IgxGridComponent */ readonly dataView: any[]; /** * Get current selection state. * Returns an array with selected rows' IDs (primaryKey or rowData) * ```typescript * const selectedRows = this.grid.selectedRows(); * ``` * @memberof IgxGridBaseDirective */ selectedRows(): any[]; /** * Select specified rows by ID. * ```typescript * this.grid.selectRows([1,2,5], true); * ``` * @param rowIDs * @param clearCurrentSelection if true clears the current selection * @memberof IgxGridBaseDirective */ selectRows(rowIDs: any[], clearCurrentSelection?: boolean): void; /** * Deselect specified rows by ID. * ```typescript * this.grid.deselectRows([1,2,5]); * ``` * @param rowIDs * @memberof IgxGridBaseDirective */ deselectRows(rowIDs: any[]): void; /** * Selects all rows * Note: By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. * If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows. * ```typescript * this.grid.selectAllRows(); * this.grid.selectAllRows(false); * ``` * @param onlyFilterData * @memberof IgxGridBaseDirective */ selectAllRows(onlyFilterData?: boolean): void; /** * Deselects all rows * Note: By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. * If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows. * ```typescript * this.grid.deselectAllRows(); * ``` * @param onlyFilterData * @memberof IgxGridBaseDirective */ deselectAllRows(onlyFilterData?: boolean): void; clearCellSelection(): void; dragScroll(dir: DragScrollDirection): void; isDefined(arg: any): boolean; selectRange(arg: GridSelectionRange | GridSelectionRange[] | null | undefined): void; columnToVisibleIndex(field: string | number): number; setSelection(range: GridSelectionRange): void; getSelectedRanges(): GridSelectionRange[]; protected extractDataFromSelection(source: any[], formatters?: boolean, headers?: boolean): any[]; protected getSelectableColumnsAt(index: any): IgxColumnComponent[]; /** * * Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. * If `formatters` is enabled, the cell value will be formatted by its respective column formatter (if any). * If `headers` is enabled, it will use the column header (if any) instead of the column field. */ getSelectedData(formatters?: boolean, headers?: boolean): any[]; /** * @hidden */ scrollHandler: (event: any) => void; copyHandlerIE(): void; /** * @hidden * @internal */ copyHandler(event: any, ie11?: boolean): void; /** * This method allows you to navigate to a position * in the grid based on provided `rowindex` and `visibleColumnIndex`, * also to execute a custom logic over the target element, * through a callback function that accepts { targetType: GridKeydownTargetType, target: Object } * ```typescript * this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); }); * ``` * @memberof IgxGridBaseDirective */ navigateTo(rowIndex: number, visibleColIndex?: number, cb?: Function): void; /** * Returns `ICellPosition` which defines the next cell, * according to the current position, that match specific criteria. * You can pass callback function as a third parameter of `getPreviousCell` method. * The callback function accepts IgxColumnComponent as a param * ```typescript * const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable); * ``` * @memberof IgxGridBaseDirective */ getNextCell(currRowIndex: number, curVisibleColIndex: number, callback?: (IgxColumnComponent: any) => boolean): ICellPosition; /** * Returns `ICellPosition` which defines the previous cell, * according to the current position, that match specific criteria. * You can pass callback function as a third parameter of `getPreviousCell` method. * The callback function accepts IgxColumnComponent as a param * ```typescript * const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable); * ``` * @memberof IgxGridBaseDirective */ getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback?: (IgxColumnComponent: any) => boolean): ICellPosition; private executeCallback; private getPrevDataRowIndex; private getNextDataRowIndex; private isValidPosition; /** * @hidden */ wheelHandler: (isScroll?: boolean) => void; /** * @hidden */ trackColumnChanges(index: any, col: any): any; private find; /** * Returns an array containing the filtered sorted data. * ```typescript * const filteredSortedData = this.grid1.filteredSortedData; * ``` * @memberof IgxGridBaseDirective */ filteredSortedData: any[]; /** * @hidden */ protected initPinning(): void; /** * @hidden */ protected scrollTo(row: any | number, column: any | number, inCollection?: any[]): void; /** * @hidden */ protected scrollToHorizontally(column: any | number): void; /** * @hidden */ protected scrollDirective(directive: IgxGridForOfDirective, goal: number): void; private rebuildMatchCache; /** * @hidden */ isExpandedGroup(_group: IGroupByRecord): boolean; protected changeRowEditingOverlayStateOnScroll(row: IgxRowDirective): void; /** * Should be called when data and/or isLoading input changes so that the overlay can be * hidden/shown based on the current value of shouldOverlayLoading */ protected evaluateLoadingState(): void; openRowOverlay(id: any): void; /** * @hidden */ closeRowEditingOverlay(): void; /** * @hidden */ toggleRowEditingOverlay(show: any): void; /** * @hidden */ repositionRowEditingOverlay(row: IgxRowDirective): void; private configureRowEditingOverlay; /** * @hidden */ readonly rowChangesCount: number; protected writeToData(rowIndex: number, value: any): void; endRowTransaction(commit: boolean, row: IgxRow): void; /** * Finishes the row transactions on the current row. * If `commit === true`, passes them from the pending state to the data (or transaction service) * * Binding to the event * ```html * * ``` * @param commit */ endEdit(commit?: boolean, event?: Event): void; /** * @hidden */ private rowEditingWheelHandler; /** * @hidden */ readonly dataWithAddedInTransactionRows: any; readonly dataLength: any; hasHorizontalScroll(): boolean; protected _restoreVirtState(row: any): void; /** * @hidden */ protected getExportExcel(): boolean; /** * @hidden */ protected getExportCsv(): boolean; /** * @hidden */ readonly shouldOverlayLoading: boolean; /** * @hidden */ isSummaryRow(rowData: any): boolean; /** @hidden */ readonly isMultiRowSelectionEnabled: boolean; /** @hidden */ readonly isRowSelectable: boolean; /** @hidden */ readonly isCellSelectable: boolean; viewDetachHandler(args: ICachedViewLoadedEventArgs): void; /** * @hidden */ cachedViewLoaded(args: ICachedViewLoadedEventArgs): void; /** * Opens the advanced filtering dialog. */ openAdvancedFilteringDialog(): void; /** * Closes the advanced filtering dialog. * @param applyChanges indicates whether the changes should be applied */ closeAdvancedFilteringDialog(applyChanges: boolean): void; protected _focusActiveCell(): void; }