igniteui-react-grids
Version:
Ignite UI React grid components.
341 lines (330 loc) • 12.7 kB
TypeScript
import * as React from 'react';
import { IgrGridGroupingStrategy } from "./igr-grid-grouping-strategy";
import { IgrForOfStateEventArgs } from "./igr-for-of-state-event-args";
import { IgrGroupingDoneEventArgs } from "./igr-grouping-done-event-args";
import { IgrGroupByRecord } from "./igr-group-by-record";
import { IgrRowType } from "./igr-row-type";
import { IgrCellType } from "./igr-cell-type";
import { IgrColumnComponentEventArgs } from "./igr-column-component-event-args";
import { IgrGridBaseDirective, IIgrGridBaseDirectiveProps } from "./igr-grid-base-directive";
import { Grid } from "./Grid";
import { IgrGridMasterDetailContext } from "./igr-grid-master-detail-context";
import { IgrGroupingExpression } from "./igr-grouping-expression";
import { IgrGroupByExpandState } from "./igr-group-by-expand-state";
import { IgrGroupByRowSelectorTemplateContext } from "./igr-group-by-row-selector-template-context";
import { IgrGroupByRowTemplateContext } from "./igr-group-by-row-template-context";
export declare class IgrGrid extends IgrGridBaseDirective<IIgrGridProps & Omit<React.HTMLAttributes<HTMLElement>, keyof IIgrGridProps>> {
protected createImplementation(): Grid;
/**
* @hidden
*/
get i(): Grid;
constructor(props: IIgrGridProps & Omit<React.HTMLAttributes<HTMLElement>, keyof IIgrGridProps>);
componentDidMount(): void;
render(): React.DetailedReactHTMLElement<any, HTMLElement>;
protected _elRef: HTMLElement;
protected _getMainRef(ref: any): void;
get groupsExpanded(): boolean;
set groupsExpanded(v: boolean);
private _dropAreaTemplate;
private _dropAreaTemplateAdapter;
get dropAreaTemplate(): React.FunctionComponent<{
dataContext: any;
}> | React.Component<{
dataContext: any;
}>;
set dropAreaTemplate(v: React.FunctionComponent<{
dataContext: any;
}> | React.Component<{
dataContext: any;
}>);
private _detailTemplate;
private _detailTemplateAdapter;
/**
* Returns a reference to the master-detail template.
* ```typescript
* let detailTemplate = this.grid.detailTemplate;
* ```
* @memberof IgxColumnComponent
*/
get detailTemplate(): React.FunctionComponent<{
dataContext: IgrGridMasterDetailContext;
}> | React.Component<{
dataContext: IgrGridMasterDetailContext;
}>;
set detailTemplate(v: React.FunctionComponent<{
dataContext: IgrGridMasterDetailContext;
}> | React.Component<{
dataContext: IgrGridMasterDetailContext;
}>);
get id(): string;
set id(v: string);
/**
* Gets the hierarchical representation of the group by records.
* @example
* ```typescript
* let groupRecords = this.grid.groupsRecords;
* ```
*/
get groupsRecords(): IgrGroupByRecord[];
get data(): any[];
set data(v: any[]);
/**
* 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;
* ```
*/
get totalItemCount(): number;
set totalItemCount(v: number);
get groupingExpressions(): IgrGroupingExpression[];
set groupingExpressions(v: IgrGroupingExpression[]);
get groupingExpansionState(): IgrGroupByExpandState[];
set groupingExpansionState(v: IgrGroupByExpandState[]);
get hideGroupedColumns(): boolean;
set hideGroupedColumns(v: boolean);
get groupStrategy(): IgrGridGroupingStrategy;
set groupStrategy(v: IgrGridGroupingStrategy);
get dropAreaMessage(): string;
set dropAreaMessage(v: string);
private _groupByRowSelectorTemplate;
private _groupByRowSelectorTemplateAdapter;
/**
* Gets the group by row selector template.
*/
get groupByRowSelectorTemplate(): React.FunctionComponent<{
dataContext: IgrGroupByRowSelectorTemplateContext;
}> | React.Component<{
dataContext: IgrGroupByRowSelectorTemplateContext;
}>;
set groupByRowSelectorTemplate(v: React.FunctionComponent<{
dataContext: IgrGroupByRowSelectorTemplateContext;
}> | React.Component<{
dataContext: IgrGroupByRowSelectorTemplateContext;
}>);
private _groupRowTemplate;
private _groupRowTemplateAdapter;
/**
* Gets/Sets the template reference for the group row.
* @example
* ```
* const groupRowTemplate = this.grid.groupRowTemplate;
* this.grid.groupRowTemplate = myRowTemplate;
* ```
*/
get groupRowTemplate(): React.FunctionComponent<{
dataContext: IgrGroupByRowTemplateContext;
}> | React.Component<{
dataContext: IgrGroupByRowTemplateContext;
}>;
set groupRowTemplate(v: React.FunctionComponent<{
dataContext: IgrGroupByRowTemplateContext;
}> | React.Component<{
dataContext: IgrGroupByRowTemplateContext;
}>);
get showGroupArea(): boolean;
set showGroupArea(v: boolean);
/**
* Returns an array of the selected `IgxGridCell`s.
* @example
* ```typescript
* const selectedCells = this.grid.selectedCells;
* ```
*/
get selectedCells(): IgrCellType[];
findByName(name: string): any;
groupBy(expression: IgrGroupingExpression[]): 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
* ```
* name Name of column or array of column names to be ungrouped.
* @param name * Name of column or array of column names to be ungrouped.
*/
clearGrouping(name: string): void;
/**
* Returns if a group is expanded or not.
* group The group record.
* @example
* ```typescript
* public groupRow: IGroupByRecord;
* const expandedGroup = this.grid.isExpandedGroup(this.groupRow);
* ```
* @param group * The group record.
*/
isExpandedGroup(group: IgrGroupByRecord): boolean;
/**
* Toggles the expansion state of a group.
* groupRow The group record to toggle.
* @example
* ```typescript
* public groupRow: IGroupByRecord;
* const toggleExpGroup = this.grid.toggleGroup(this.groupRow);
* ```
* @param groupRow * The group record to toggle.
*/
toggleGroup(groupRow: IgrGroupByRecord): void;
selectRowsInGroup(groupRow: IgrGroupByRecord, clearPrevSelection?: boolean): void;
/**
* Deselect all rows within a group.
* groupRow The group record which rows would be deselected.
* @example
* ```typescript
* public groupRow: IGroupByRecord;
* this.grid.deselectRowsInGroup(this.groupRow);
* ```
* @param groupRow * The group record which rows would be deselected.
*/
deselectRowsInGroup(groupRow: IgrGroupByRecord): void;
/**
* Expands the specified group and all of its parent groups.
* groupRow The group record to fully expand.
* @example
* ```typescript
* public groupRow: IGroupByRecord;
* this.grid.fullyExpandGroup(this.groupRow);
* ```
* @param groupRow * The group record to fully expand.
*/
fullyExpandGroup(groupRow: IgrGroupByRecord): void;
/**
* Toggles the expansion state of all group rows recursively.
* @example
* ```typescript
* this.grid.toggleAllGroupRows;
* ```
*/
toggleAllGroupRows(): void;
getSelectedData(formatters?: boolean, headers?: boolean): any[];
/**
* Returns the `IgxGridRow` by index.
* @example
* ```typescript
* const myRow = grid.getRowByIndex(1);
* ```
* index
* @param * index
*/
getRowByIndex(index: number): IgrRowType;
/**
* Returns `IgxGridRow` object by the specified primary key.
* @remarks
* Requires that the `primaryKey` property is set.
* @example
* ```typescript
* const myRow = this.grid1.getRowByKey("cell5");
* ```
* keyValue
* @param * keyValue
*/
getRowByKey(key: any): IgrRowType;
getCellByColumn(rowIndex: number, columnField: string): IgrCellType;
getCellByKey(rowSelector: any, columnField: string): IgrCellType;
pinRow(rowID: any, index?: number): boolean;
unpinRow(rowID: any): boolean;
beforeColumnInit(owner: any, outerArgs: IgrColumnComponentEventArgs): void;
findEphemera(name: string): any;
/**
* Creates a new `IgxGridRowComponent` and adds the data record to the end of the data source.
* @example
* ```typescript
* this.grid1.addRow(record);
* ```
* data
* @param * data
*/
addRow(data: any): void;
/**
* Enters add mode by spawning the UI at the specified index.
* @remarks
* Accepted values for index are integers from 0 to this.grid.dataView.length
* @example
* ```typescript
* this.grid.beginAddRowByIndex(0);
* ```
* index - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
* @param index * - The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
*/
beginAddRowByIndex(index: number): void;
private _dataPreLoad;
private _dataPreLoad_wrapped;
get dataPreLoad(): (s: IgrGrid, e: IgrForOfStateEventArgs) => void;
set dataPreLoad(ev: (s: IgrGrid, e: IgrForOfStateEventArgs) => void);
private _groupingDone;
private _groupingDone_wrapped;
get groupingDone(): (s: IgrGrid, e: IgrGroupingDoneEventArgs) => void;
set groupingDone(ev: (s: IgrGrid, e: IgrGroupingDoneEventArgs) => void);
}
export interface IIgrGridProps extends IIgrGridBaseDirectiveProps {
groupsExpanded?: boolean | string;
dropAreaTemplate?: React.FunctionComponent<{
dataContext: any;
}> | React.Component<{
dataContext: any;
}>;
/**
* Returns a reference to the master-detail template.
* ```typescript
* let detailTemplate = this.grid.detailTemplate;
* ```
* @memberof IgxColumnComponent
*/
detailTemplate?: React.FunctionComponent<{
dataContext: IgrGridMasterDetailContext;
}> | React.Component<{
dataContext: IgrGridMasterDetailContext;
}>;
id?: string;
data?: any[];
/**
* 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;
* ```
*/
totalItemCount?: number | string;
groupingExpressions?: IgrGroupingExpression[];
groupingExpansionState?: IgrGroupByExpandState[];
hideGroupedColumns?: boolean | string;
groupStrategy?: IgrGridGroupingStrategy;
dropAreaMessage?: string;
/**
* Gets the group by row selector template.
*/
groupByRowSelectorTemplate?: React.FunctionComponent<{
dataContext: IgrGroupByRowSelectorTemplateContext;
}> | React.Component<{
dataContext: IgrGroupByRowSelectorTemplateContext;
}>;
/**
* Gets/Sets the template reference for the group row.
* @example
* ```
* const groupRowTemplate = this.grid.groupRowTemplate;
* this.grid.groupRowTemplate = myRowTemplate;
* ```
*/
groupRowTemplate?: React.FunctionComponent<{
dataContext: IgrGroupByRowTemplateContext;
}> | React.Component<{
dataContext: IgrGroupByRowTemplateContext;
}>;
showGroupArea?: boolean | string;
dataPreLoad?: (s: IgrGrid, e: IgrForOfStateEventArgs) => void;
groupingDone?: (s: IgrGrid, e: IgrGroupingDoneEventArgs) => void;
}