igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
460 lines (459 loc) • 17.7 kB
TypeScript
import { OnInit, TemplateRef, AfterContentInit, DoCheck, AfterViewInit, ElementRef, NgZone, ChangeDetectorRef, IterableDiffers, ViewContainerRef, Injector, EnvironmentInjector } from '@angular/core';
import { IgxGridBaseDirective } from '../grid-base.directive';
import { ITreeGridRecord } from './tree-grid.interfaces';
import { IRowDataEventArgs } from '../common/events';
import { HierarchicalTransaction, HierarchicalState, StateUpdateEvent } from '../../services/transaction/transaction';
import { IgxFilteringService } from '../filtering/grid-filtering.service';
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
import { IgxGridSelectionService } from '../selection/selection.service';
import { PlatformUtil } from '../../core/utils';
import { IgxRowLoadingIndicatorTemplateDirective } from './tree-grid.directives';
import { IgxGridNavigationService } from '../grid-navigation.service';
import { CellType, GridServiceType, GridType, RowType } from '../common/grid.interface';
import { IgxColumnComponent } from '../columns/column.component';
import { IgxTreeGridGroupByAreaComponent } from '../grouping/tree-grid-group-by-area.component';
import { IgxHierarchicalTransactionFactory } from '../../services/transaction/transaction-factory.service';
import { IgxColumnResizingService } from '../resizing/resizing.service';
import { HierarchicalTransactionService } from '../../services/transaction/hierarchical-transaction';
import { IgxOverlayService } from '../../services/overlay/overlay';
import { TreeGridFilteringStrategy } from './tree-grid.filtering.strategy';
import { IgxGridValidationService } from '../grid/grid-validation.service';
import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service';
import * as i0 from "@angular/core";
/**
* **Ignite UI for Angular Tree Grid** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid)
*
* The Ignite UI Tree Grid displays and manipulates hierarchical data with consistent schema formatted as a table and
* provides features such as sorting, filtering, editing, column pinning, paging, column moving and hiding.
*
* Example:
* ```html
* <igx-tree-grid [data]="employeeData" primaryKey="employeeID" foreignKey="PID" [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-tree-grid>
* ```
*/
export declare class IgxTreeGridComponent extends IgxGridBaseDirective implements GridType, OnInit, AfterViewInit, DoCheck, AfterContentInit {
protected _diTransactions?: HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>;
/**
* Sets the child data key of the `IgxTreeGridComponent`.
* ```html
* <igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [autoGenerate]="true"></igx-tree-grid>
* ```
*
* @memberof IgxTreeGridComponent
*/
childDataKey: string;
/**
* Sets the foreign key of the `IgxTreeGridComponent`.
* ```html
* <igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [autoGenerate]="true">
* </igx-tree-grid>
* ```
*
* @memberof IgxTreeGridComponent
*/
foreignKey: string;
/**
* Sets the key indicating whether a row has children.
* This property is only used for load on demand scenarios.
* ```html
* <igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'"
* [loadChildrenOnDemand]="loadChildren"
* [hasChildrenKey]="'hasEmployees'">
* </igx-tree-grid>
* ```
*
* @memberof IgxTreeGridComponent
*/
hasChildrenKey: string;
/**
* Sets whether child records should be deleted when their parent gets deleted.
* By default it is set to true and deletes all children along with the parent.
* ```html
* <igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" cascadeOnDelete="false">
* </igx-tree-grid>
* ```
*
* @memberof IgxTreeGridComponent
*/
cascadeOnDelete: boolean;
/**
* Sets a callback for loading child rows on demand.
* ```html
* <igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [loadChildrenOnDemand]="loadChildren">
* </igx-tree-grid>
* ```
* ```typescript
* public loadChildren = (parentID: any, done: (children: any[]) => void) => {
* this.dataService.getData(parentID, children => done(children));
* }
* ```
*
* @memberof IgxTreeGridComponent
*/
loadChildrenOnDemand: (parentID: any, done: (children: any[]) => void) => void;
/**
* @hidden @internal
*/
role: string;
/**
* Sets the value of the `id` attribute. If not provided it will be automatically generated.
* ```html
* <igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>
* ```
*
* @memberof IgxTreeGridComponent
*/
id: string;
/**
* @hidden
* @internal
*/
treeGroupArea: IgxTreeGridGroupByAreaComponent;
/**
* @hidden @internal
*/
protected recordTemplate: TemplateRef<any>;
/**
* @hidden @internal
*/
protected summaryTemplate: TemplateRef<any>;
/**
* @hidden
*/
protected rowLoadingTemplate: IgxRowLoadingIndicatorTemplateDirective;
/**
* @hidden
*/
flatData: any[] | null;
/**
* @hidden
*/
processedExpandedFlatData: any[] | null;
/**
* Returns an array of the root level `ITreeGridRecord`s.
* ```typescript
* // gets the root record with index=2
* const states = this.grid.rootRecords[2];
* ```
*
* @memberof IgxTreeGridComponent
*/
rootRecords: ITreeGridRecord[];
/**
* Returns a map of all `ITreeGridRecord`s.
* ```typescript
* // gets the record with primaryKey=2
* const states = this.grid.records.get(2);
* ```
*
* @memberof IgxTreeGridComponent
*/
records: Map<any, ITreeGridRecord>;
/**
* Returns an array of processed (filtered and sorted) root `ITreeGridRecord`s.
* ```typescript
* // gets the processed root record with index=2
* const states = this.grid.processedRootRecords[2];
* ```
*
* @memberof IgxTreeGridComponent
*/
processedRootRecords: ITreeGridRecord[];
/**
* Returns a map of all processed (filtered and sorted) `ITreeGridRecord`s.
* ```typescript
* // gets the processed record with primaryKey=2
* const states = this.grid.processedRecords.get(2);
* ```
*
* @memberof IgxTreeGridComponent
*/
processedRecords: Map<any, ITreeGridRecord>;
/**
* @hidden
*/
loadingRows: Set<any>;
protected _filterStrategy: TreeGridFilteringStrategy;
protected _transactions: HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>;
private _data;
private _rowLoadingIndicatorTemplate;
private _expansionDepth;
/**
* Gets/Sets the array of data that populates the component.
* ```html
* <igx-tree-grid [data]="Data" [autoGenerate]="true"></igx-tree-grid>
* ```
*
* @memberof IgxTreeGridComponent
*/
get data(): any[] | null;
set data(value: any[] | null);
/** @hidden @internal */
get type(): GridType["type"];
/**
* Get transactions service for the grid.
*
* @experimental @hidden
*/
get transactions(): HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>;
/**
* Sets the count of levels to be expanded in the `IgxTreeGridComponent`. By default it is
* set to `Infinity` which means all levels would be expanded.
* ```html
* <igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>
* ```
*
* @memberof IgxTreeGridComponent
*/
get expansionDepth(): number;
set expansionDepth(value: number);
/**
* Template for the row loading indicator when load on demand is enabled.
* ```html
* <ng-template #rowLoadingTemplate>
* <igx-icon>loop</igx-icon>
* </ng-template>
*
* <igx-tree-grid #grid [data]="employeeData" [primaryKey]="'ID'" [foreignKey]="'parentID'"
* [loadChildrenOnDemand]="loadChildren"
* [rowLoadingIndicatorTemplate]="rowLoadingTemplate">
* </igx-tree-grid>
* ```
*
* @memberof IgxTreeGridComponent
*/
get rowLoadingIndicatorTemplate(): TemplateRef<void>;
set rowLoadingIndicatorTemplate(value: TemplateRef<void>);
constructor(validationService: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: GridServiceType, transactionFactory: IgxHierarchicalTransactionFactory, _elementRef: ElementRef<HTMLElement>, _zone: NgZone, document: any, cdr: ChangeDetectorRef, differs: IterableDiffers, viewRef: ViewContainerRef, injector: Injector, envInjector: EnvironmentInjector, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, textHighlightService: IgxTextHighlightService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, localeId: string, platform: PlatformUtil, _diTransactions?: HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>);
/**
* @hidden
*/
ngOnInit(): void;
/**
* @hidden
*/
ngAfterViewInit(): void;
/**
* @hidden
*/
ngAfterContentInit(): void;
getDefaultExpandState(record: ITreeGridRecord): boolean;
/**
* Expands all rows.
* ```typescript
* this.grid.expandAll();
* ```
*
* @memberof IgxTreeGridComponent
*/
expandAll(): void;
/**
* Collapses all rows.
*
* ```typescript
* this.grid.collapseAll();
* ```
*
* @memberof IgxTreeGridComponent
*/
collapseAll(): void;
/**
* @hidden
*/
refreshGridState(args?: IRowDataEventArgs): void;
/**
* Creates a new `IgxTreeGridRowComponent` with the given data. If a parentRowID is not specified, the newly created
* row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches
* the specified parentRowID. If the parentRowID does not exist, an error would be thrown.
* ```typescript
* const record = {
* ID: this.grid.data[this.grid1.data.length - 1].ID + 1,
* Name: this.newRecord
* };
* this.grid.addRow(record, 1); // Adds a new child row to the row with ID=1.
* ```
*
* @param data
* @param parentRowID
* @memberof IgxTreeGridComponent
*/
addRow(data: any, parentRowID?: any): void;
/**
* Enters add mode by spawning the UI with the context of the specified row by index.
*
* @remarks
* Accepted values for index are integers from 0 to this.grid.dataView.length
* @remarks
* When adding the row as a child, the parent row is the specified row.
* @remarks
* To spawn the UI on top, call the function with index = null or a negative number.
* In this case trying to add this row as a child will result in error.
* @example
* ```typescript
* this.grid.beginAddRowByIndex(10);
* this.grid.beginAddRowByIndex(10, true);
* this.grid.beginAddRowByIndex(null);
* ```
* @param index - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
* @param asChild - Whether the record should be added as a child. Only applicable to igxTreeGrid.
*/
beginAddRowByIndex(index: number, asChild?: boolean): void;
/**
* @hidden
*/
getContext(rowData: any, rowIndex: number, pinned?: boolean): any;
/**
* @hidden
* @internal
*/
getInitialPinnedIndex(rec: any): number;
/**
* @hidden
* @internal
*/
isRecordPinned(rec: any): boolean;
/**
*
* 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[];
/**
* @hidden @internal
*/
getEmptyRecordObjectFor(inTreeRow: RowType): {
rowID: string | number;
data: any;
recordRef: {
key: any;
data: any;
children?: ITreeGridRecord[];
parent?: ITreeGridRecord;
level?: number;
isFilteredOutParent?: boolean;
expanded?: boolean;
};
};
/** @hidden */
deleteRowById(rowId: any): any;
/**
* Returns the `IgxTreeGridRow` by index.
*
* @example
* ```typescript
* const myRow = treeGrid.getRowByIndex(1);
* ```
* @param index
*/
getRowByIndex(index: number): RowType;
/**
* Returns the `RowType` object by the specified primary key.
*
* @example
* ```typescript
* const myRow = this.treeGrid.getRowByIndex(1);
* ```
* @param index
*/
getRowByKey(key: any): RowType;
/**
* Returns the collection of all RowType for current page.
*
* @hidden @internal
*/
allRows(): RowType[];
/**
* Returns the collection of `IgxTreeGridRow`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 */
generateRowPath(rowId: any): any[];
/** @hidden */
isTreeRow(record: any): boolean;
/** @hidden */
getUnpinnedIndexById(id: any): number;
/**
* @hidden
*/
createRow(index: number, data?: any): RowType;
protected generateDataFields(data: any[]): string[];
protected transactionStatusUpdate(event: StateUpdateEvent): void;
protected findRecordIndexInView(rec: any): number;
/**
* @hidden @internal
*/
protected getDataBasedBodyHeight(): number;
/**
* @hidden
*/
protected scrollTo(row: any | number, column: any | number): void;
protected writeToData(rowIndex: number, value: any): void;
/**
* @hidden
*/
protected initColumns(collection: IgxColumnComponent[], cb?: (args: any) => void): void;
/**
* @hidden @internal
*/
protected getGroupAreaHeight(): number;
/** {@link triggerPipes} will re-create pinnedData on CRUD operations */
protected trackPinnedRowData(record: ITreeGridRecord): ITreeGridRecord;
/**
* @description A recursive way to deselect all selected children of a given record
* @param recordID ID of the record whose children to deselect
* @hidden
* @internal
*/
private deselectChildren;
private addChildRows;
private loadChildrenOnRowExpansion;
private handleCascadeSelection;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeGridComponent, [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxTreeGridComponent, "igx-tree-grid", never, { "childDataKey": { "alias": "childDataKey"; "required": false; }; "foreignKey": { "alias": "foreignKey"; "required": false; }; "hasChildrenKey": { "alias": "hasChildrenKey"; "required": false; }; "cascadeOnDelete": { "alias": "cascadeOnDelete"; "required": false; }; "loadChildrenOnDemand": { "alias": "loadChildrenOnDemand"; "required": false; }; "id": { "alias": "id"; "required": false; }; "data": { "alias": "data"; "required": false; }; "expansionDepth": { "alias": "expansionDepth"; "required": false; }; "rowLoadingIndicatorTemplate": { "alias": "rowLoadingIndicatorTemplate"; "required": false; }; }, {}, ["treeGroupArea", "rowLoadingTemplate"], ["igx-grid-toolbar,igc-grid-toolbar", "igx-tree-grid-group-by-area,igc-tree-grid-group-by-area", "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-action-strip,igc-action-strip"], true, never>;
static ngAcceptInputType_cascadeOnDelete: unknown;
}