igniteui-angular

import { EventEmitter, QueryList, TemplateRef, DoCheck, AfterContentInit, OnInit, AfterViewInit } from '@angular/core'; import { IgxGridBaseDirective } from '../grid-base.directive'; import { IBaseEventArgs } from '../../core/utils'; import { IGroupByRecord } from '../../data-operations/groupby-record.interface'; import { IgxGroupByRowTemplateDirective, IgxGridDetailTemplateDirective } from '../grid.directives'; import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface'; import { IForOfState } from '../../directives/for-of/for_of.directive'; import { IgxColumnComponent } from '../columns/column.component'; import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; import { CellType, GridType, IgxGridMasterDetailContext, IgxGroupByRowSelectorTemplateContext, IgxGroupByRowTemplateContext, RowType } from '../common/grid.interface'; import { ISortingExpression } from '../../data-operations/sorting-strategy'; import { IGridGroupingStrategy } from '../common/strategy'; import { Observable, Subject } from 'rxjs'; import * as i0 from "@angular/core"; export interface IGroupingDoneEventArgs extends IBaseEventArgs { expressions: Array<ISortingExpression> | ISortingExpression; groupedColumns: Array<IgxColumnComponent> | IgxColumnComponent; ungroupedColumns: Array<IgxColumnComponent> | IgxColumnComponent; } /** * Grid provides a way to present and manipulate tabular data. * * @igxModule IgxGridModule * @igxGroup Grids & Lists * @igxKeywords grid, table * @igxTheme igx-grid-theme * @remarks * The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data * has been bound, it can be manipulated through filtering, sorting & editing operations. * @example * ```html * <igx-grid [data]="employeeData" [autoGenerate]="false"> * <igx-column field="first" header="First Name"></igx-column> * <igx-column field="last" header="Last Name"></igx-column> * <igx-column field="role" header="Role"></igx-column> * </igx-grid> * ``` */ export declare class IgxGridComponent extends IgxGridBaseDirective implements GridType, OnInit, DoCheck, AfterContentInit, AfterViewInit { /** * Emitted when a new chunk of data is loaded from virtualization. * * @example * ```typescript * <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataPreLoad)='handleDataPreloadEvent()'></igx-grid> * ``` */ dataPreLoad: EventEmitter<IForOfState>; /** * @hidden */ groupingExpressionsChange: EventEmitter<IGroupingExpression[]>; /** * @hidden @internal */ groupingExpansionStateChange: EventEmitter<IGroupByExpandState[]>; /** * Emitted when columns are grouped/ungrouped. * * @remarks * The `groupingDone` event would be raised only once if several columns get grouped at once by calling * the `groupBy()` or `clearGrouping()` API methods and passing an array as an argument. * The event arguments provide the `expressions`, `groupedColumns` and `ungroupedColumns` properties, which contain * the `ISortingExpression` and the `IgxColumnComponent` related to the grouping/ungrouping operation. * Please note that `groupedColumns` and `ungroupedColumns` show only the **newly** changed columns (affected by the **last** * grouping/ungrouping operation), not all columns which are currently grouped/ungrouped. * columns. * @example * ```html * <igx-grid #grid [data]="localData" (groupingDone)="groupingDone($event)" [autoGenerate]="true"></igx-grid> * ``` */ groupingDone: EventEmitter<IGroupingDoneEventArgs>; /** * Gets/Sets whether created groups are rendered expanded or collapsed. * * @remarks * The default rendered state is expanded. * @example * ```html * <igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid> * ``` */ groupsExpanded: boolean; /** * Gets/Sets the template that will be rendered as a GroupBy drop area. * * @remarks * The grid needs to have at least one groupable column in order the GroupBy area to be displayed. * @example * ```html * <igx-grid [dropAreaTemplate]="dropAreaRef"> * </igx-grid> * <ng-template #myDropArea> * <span> Custom drop area! </span> * </ng-template> * ``` */ dropAreaTemplate: TemplateRef<void>; /** * @hidden @internal */ detailTemplateDirective: TemplateRef<IgxGridMasterDetailContext>; /** * Returns a reference to the master-detail template. * ```typescript * let detailTemplate = this.grid.detailTemplate; * ``` * * @memberof IgxColumnComponent */ get detailTemplate(): TemplateRef<IgxGridMasterDetailContext>; /** * Sets the master-detail template. * ```html * <ng-template #detailTemplate igxGridDetail let-dataItem> * <div> * <div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div> * <div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div> * </div> * </ng-template> * ``` * ```typescript * @ViewChild("'detailTemplate'", {read: TemplateRef }) * public detailTemplate: TemplateRef<any>; * this.grid.detailTemplate = this.detailTemplate; * ``` * * @memberof IgxColumnComponent */ set detailTemplate(template: TemplateRef<IgxGridMasterDetailContext>); /** * @hidden @internal */ role: string; /** * Gets/Sets the value of the `id` attribute. * * @remarks * If not provided it will be automatically generated. * @example * ```html * <igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid> * ``` */ id: string; /** * @hidden @internal */ protected recordTemplate: TemplateRef<any>; protected detailTemplateContainer: TemplateRef<any>; protected defaultGroupTemplate: TemplateRef<any>; protected summaryTemplate: TemplateRef<any>; /** * @hidden @internal */ protected groupTemplate: IgxGroupByRowTemplateDirective; /** * @hidden * @internal */ protected groupByRowSelectorsTemplates: QueryList<TemplateRef<IgxGroupByRowSelectorTemplateContext>>; private _groupsRowList; private _groupsRecords; /** * Gets the hierarchical representation of the group by records. * * @example * ```typescript * let groupRecords = this.grid.groupsRecords; * ``` */ get groupsRecords(): IGroupByRecord[]; /** * @hidden @internal * Includes children of collapsed group rows. */ groupingResult: any[]; /** * @hidden @internal */ groupingMetadata: any[]; /** * @hidden @internal * Does not include children of collapsed group rows. */ groupingFlatResult: any[]; /** * @hidden */ protected _groupingExpressions: IGroupingExpression[]; /** * @hidden */ protected _groupingExpandState: IGroupByExpandState[]; /** * @hidden */ protected _groupRowTemplate: TemplateRef<IgxGroupByRowTemplateContext>; /** * @hidden */ protected _groupStrategy: IGridGroupingStrategy; /** * @hidden */ protected groupingDiffer: any; private _data?; private _hideGroupedColumns; private _dropAreaMessage; private _showGroupArea; private _groupByRowSelectorTemplate; private _detailTemplate; /** * Gets/Sets the array of data that populates the component. * * @example * ```html * <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid> * ``` */ get data(): any[] | null; set data(value: any[] | null); /** * Gets/Sets the total number of records in the data source. * * @remarks * This property is required for remote grid virtualization to function when it is bound to remote data. * @example * ```typescript * const itemCount = this.grid1.totalItemCount; * this.grid1.totalItemCount = 55; * ``` */ set totalItemCount(count: number); get totalItemCount(): number; private get _gridAPI(); private childDetailTemplates; /** * @hidden @internal */ groupingPerformedSubject: Subject<void>; /** * @hidden @internal */ groupingPerformed$: Observable<void>; /** * Gets/Sets the group by state. * * @example * ```typescript * let groupByState = this.grid.groupingExpressions; * this.grid.groupingExpressions = [...]; * ``` * @remarks * Supports two-way data binding. * @example * ```html * <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpressions)]="model.groupingExpressions"></igx-grid> * ``` */ get groupingExpressions(): IGroupingExpression[]; set groupingExpressions(value: IGroupingExpression[]); /** * Gets/Sets a list of expansion states for group rows. * * @remarks * Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed. * Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array). * Supports two-way data binding. * @example * ```html * <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpansionState)]="model.groupingExpansionState"></igx-grid> * ``` */ get groupingExpansionState(): IGroupByExpandState[]; set groupingExpansionState(value: IGroupByExpandState[]); /** * Gets/Sets whether the grouped columns should be hidden. * * @remarks * The default value is "false" * @example * ```html * <igx-grid #grid [data]="localData" [hideGroupedColumns]="true" [autoGenerate]="true"></igx-grid> * ``` */ get hideGroupedColumns(): boolean; set hideGroupedColumns(value: boolean); /** * Gets/Sets the grouping strategy of the grid. * * @remarks The default IgxGrouping extends from IgxSorting and a custom one can be used as a `sortStrategy` as well. * * @example * ```html * <igx-grid #grid [data]="localData" [groupStrategy]="groupStrategy"></igx-grid> * ``` */ get groupStrategy(): IGridGroupingStrategy; set groupStrategy(value: IGridGroupingStrategy); /** * Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on. * * @remarks * The grid needs to have at least one groupable column in order the GroupBy area to be displayed. * @example * ```html * <igx-grid dropAreaMessage="Drop here to group!"> * <igx-column [groupable]="true" field="ID"></igx-column> * </igx-grid> * ``` */ set dropAreaMessage(value: string); get dropAreaMessage(): string; /** * @hidden @internal */ get groupsRowList(): QueryList<any>; /** * Gets the group by row selector template. */ get groupByRowSelectorTemplate(): TemplateRef<IgxGroupByRowSelectorTemplateContext>; /** * Sets the group by row selector template. * ```html * <ng-template #template igxGroupByRowSelector let-groupByRowContext> * {{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount }} * </ng-template> * ``` * ```typescript * @ViewChild("'template'", {read: TemplateRef }) * public template: TemplateRef<any>; * this.grid.groupByRowSelectorTemplate = this.template; * ``` */ set groupByRowSelectorTemplate(template: TemplateRef<IgxGroupByRowSelectorTemplateContext>); /** * @hidden @internal */ getDetailsContext(rowData: any, index: any): IgxGridDetailTemplateDirective; /** * @hidden @internal */ detailsViewFocused(container: any, rowIndex: any): void; /** * @hidden @internal */ get hasDetails(): boolean; /** * @hidden @internal */ getRowTemplate(rowData: any): TemplateRef<any>; /** * @hidden @internal */ isDetailRecord(record: any): boolean; /** * @hidden @internal */ isDetailActive(rowIndex: any): boolean; /** * Gets/Sets the template reference for the group row. * * @example * ``` * const groupRowTemplate = this.grid.groupRowTemplate; * this.grid.groupRowTemplate = myRowTemplate; * ``` */ get groupRowTemplate(): TemplateRef<IgxGroupByRowTemplateContext>; set groupRowTemplate(template: TemplateRef<IgxGroupByRowTemplateContext>); /** @hidden @internal */ trackChanges: (index: any, rec: any) => any; /** * Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one. * * @remarks * Also allows for multiple columns to be grouped at once if an array of `ISortingExpression` is passed. * The `groupingDone` event would get raised only **once** if this method gets called multiple times with the same arguments. * @example * ```typescript * this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); * this.grid.groupBy([ * { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false }, * { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true }, * { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false } * ]); * ``` */ groupBy(expression: IGroupingExpression | Array<IGroupingExpression>): void; /** * Clears grouping for particular column, array of columns or all columns. * * @remarks * Clears all grouping in the grid, if no parameter is passed. * If a parameter is provided, clears grouping for a particular column or an array of columns. * @example * ```typescript * this.grid.clearGrouping(); //clears all grouping * this.grid.clearGrouping("ID"); //ungroups a single column * this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns * ``` * @param name Name of column or array of column names to be ungrouped. */ clearGrouping(name?: string | Array<string>): void; /** * Returns if a group is expanded or not. * * @param group The group record. * @example * ```typescript * public groupRow: IGroupByRecord; * const expandedGroup = this.grid.isExpandedGroup(this.groupRow); * ``` */ isExpandedGroup(group: IGroupByRecord): boolean; /** * Toggles the expansion state of a group. * * @param groupRow The group record to toggle. * @example * ```typescript * public groupRow: IGroupByRecord; * const toggleExpGroup = this.grid.toggleGroup(this.groupRow); * ``` */ toggleGroup(groupRow: IGroupByRecord): void; /** * Select all rows within a group. * * @param groupRow: The group record which rows would be selected. * @param clearCurrentSelection if true clears the current selection * @example * ```typescript * this.grid.selectRowsInGroup(this.groupRow, true); * ``` */ selectRowsInGroup(groupRow: IGroupByRecord, clearPrevSelection?: boolean): void; /** * Deselect all rows within a group. * * @param groupRow The group record which rows would be deselected. * @example * ```typescript * public groupRow: IGroupByRecord; * this.grid.deselectRowsInGroup(this.groupRow); * ``` */ deselectRowsInGroup(groupRow: IGroupByRecord): void; /** * Expands the specified group and all of its parent groups. * * @param groupRow The group record to fully expand. * @example * ```typescript * public groupRow: IGroupByRecord; * this.grid.fullyExpandGroup(this.groupRow); * ``` */ fullyExpandGroup(groupRow: IGroupByRecord): void; /** * @hidden @internal */ isGroupByRecord(record: any): boolean; /** * Toggles the expansion state of all group rows recursively. * * @example * ```typescript * this.grid.toggleAllGroupRows; * ``` */ toggleAllGroupRows(): void; /** @hidden @internal */ get hasGroupableColumns(): boolean; /** * Returns whether the `IgxGridComponent` has group area. * * @example * ```typescript * let isGroupAreaVisible = this.grid.showGroupArea; * ``` * * @example * ```html * <igx-grid #grid [data]="Data" [showGroupArea]="false"></igx-grid> * ``` */ get showGroupArea(): boolean; set showGroupArea(value: boolean); /** * @hidden @internal */ isColumnGrouped(fieldName: string): boolean; /** * @hidden @internal */ getContext(rowData: any, rowIndex: number, pinned?: boolean): any; /** * @hidden @internal */ viewCreatedHandler(args: any): void; /** * @hidden @internal */ viewMovedHandler(args: any): void; /** * @hidden @internal */ get iconTemplate(): TemplateRef<any>; /** * @hidden @internal */ ngAfterContentInit(): void; /** * @hidden @internal */ ngAfterViewInit(): void; /** * @hidden @internal */ ngOnInit(): void; /** * @hidden @internal */ ngDoCheck(): void; /** * @hidden @internal */ dataLoading(event: any): void; /** * * Returns an array of the current cell selection in the form of `[{ column.field: cell.value }, ...]`. * * @remarks * 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[]; /** * Returns the `IgxGridRow` by index. * * @example * ```typescript * const myRow = grid.getRowByIndex(1); * ``` * @param index */ getRowByIndex(index: number): RowType; /** * Returns `IgxGridRow` object by the specified primary key. * * @remarks * Requires that the `primaryKey` property is set. * @example * ```typescript * const myRow = this.grid1.getRowByKey("cell5"); * ``` * @param keyValue */ getRowByKey(key: any): RowType; /** * @hidden @internal */ allRows(): RowType[]; /** * Returns the collection of `IgxGridRow`s for current page. * * @hidden @internal */ dataRows(): RowType[]; /** * Returns an array of the selected `IgxGridCell`s. * * @example * ```typescript * const selectedCells = this.grid.selectedCells; * ``` */ get selectedCells(): CellType[]; /** * Returns a `CellType` object that matches the conditions. * * @example * ```typescript * const myCell = this.grid1.getCellByColumn(2, "UnitPrice"); * ``` * @param rowIndex * @param columnField */ getCellByColumn(rowIndex: number, columnField: string): CellType; /** * Returns a `CellType` object that matches the conditions. * * @remarks * Requires that the primaryKey property is set. * @example * ```typescript * grid.getCellByKey(1, 'index'); * ``` * @param rowSelector match any rowID * @param columnField */ getCellByKey(rowSelector: any, columnField: string): CellType; pinRow(rowID: any, index?: number): boolean; unpinRow(rowID: any): boolean; /** * @hidden @internal */ createRow(index: number, data?: any): RowType; /** * @hidden @internal */ protected get defaultTargetBodyHeight(): number; /** * @hidden @internal */ protected getGroupAreaHeight(): number; /** * @hidden @internal */ protected onColumnsAddedOrRemoved(): void; /** * @hidden @internal */ protected scrollTo(row: any | number, column: any | number): void; /** * @hidden @internal */ protected _getStateForGroupRow(groupRow: IGroupByRecord): IGroupByExpandState; /** * @hidden */ protected _toggleGroup(groupRow: IGroupByRecord): void; /** * @hidden @internal */ protected _fullyExpandGroup(groupRow: IGroupByRecord): void; /** * @hidden @internal */ protected _applyGrouping(): void; private _setupNavigationService; private checkIfNoColumnField; private _setGroupColsVisibility; private stringifyCallback; static ɵfac: i0.ɵɵFactoryDeclaration<IgxGridComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxGridComponent, "igx-grid", never, { "groupsExpanded": { "alias": "groupsExpanded"; "required": false; }; "dropAreaTemplate": { "alias": "dropAreaTemplate"; "required": false; }; "detailTemplate": { "alias": "detailTemplate"; "required": false; }; "id": { "alias": "id"; "required": false; }; "data": { "alias": "data"; "required": false; }; "totalItemCount": { "alias": "totalItemCount"; "required": false; }; "groupingExpressions": { "alias": "groupingExpressions"; "required": false; }; "groupingExpansionState": { "alias": "groupingExpansionState"; "required": false; }; "hideGroupedColumns": { "alias": "hideGroupedColumns"; "required": false; }; "groupStrategy": { "alias": "groupStrategy"; "required": false; }; "dropAreaMessage": { "alias": "dropAreaMessage"; "required": false; }; "groupByRowSelectorTemplate": { "alias": "groupByRowSelectorTemplate"; "required": false; }; "groupRowTemplate": { "alias": "groupRowTemplate"; "required": false; }; "showGroupArea": { "alias": "showGroupArea"; "required": false; }; }, { "dataPreLoad": "dataPreLoad"; "groupingExpressionsChange": "groupingExpressionsChange"; "groupingExpansionStateChange": "groupingExpansionStateChange"; "groupingDone": "groupingDone"; }, ["detailTemplateDirective", "groupTemplate", "groupByRowSelectorsTemplates"], ["igx-grid-toolbar,igc-grid-toolbar", "igx-grid-footer,igc-grid-footer", "igx-paginator,igc-paginator", "igx-grid-state,igc-grid-state", "igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip"], true, never>; static ngAcceptInputType_groupsExpanded: unknown; static ngAcceptInputType_hideGroupedColumns: unknown; static ngAcceptInputType_showGroupArea: unknown; }