Hierarchical grid
Igx Module
IgxHierarchicalGridModule

Constructors

Section titled "Constructors"

IgxHierarchicalGridComponent

new IgxHierarchicalGridComponent(): IgxHierarchicalGridComponent

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3479

Returns IgxHierarchicalGridComponent

Properties

Section titled "Properties"

activeNodeChange

Section titled "activeNodeChange"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when the active node is changed.

 
activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1061

Example

<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>

addRowEmptyTemplate

Section titled "addRowEmptyTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

Gets/Sets a custom template for adding row UI when grid is empty.

 
addRowEmptyTemplate: TemplateRef<void>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:257

Example

<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

advancedFilteringExpressionsTreeChange

Section titled "advancedFilteringExpressionsTreeChange"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after advanced filtering is performed.

 
advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:374

Remarks

Returns the advanced filtering expressions tree.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
          (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>

autoGenerate

Section titled "autoGenerate"

Inherited from: IgxHierarchicalGridBaseDirective

Gets/Sets whether to auto-generate the columns.

 
autoGenerate: boolean = false

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:200

Remarks

The default value is false. When set to true, it will override all columns declared through code or in markup.

Example

<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>

autoGenerateExclude

Section titled "autoGenerateExclude"

Inherited from: IgxHierarchicalGridBaseDirective

Gets/Sets a list of property keys to be excluded from the generated column collection

 
autoGenerateExclude: string[] = []

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:217

Remarks

The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their hidden property.

Example

<igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid>
const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]

cdr

Section titled "cdr"

Inherited from: IgxHierarchicalGridBaseDirective

Provides change detection functionality. A change-detection tree collects all views that are to be checked for changes. The property cannot be changed (readonly)

 
cdr: ChangeDetectorRef

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:156

cellClick

Section titled "cellClick"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a cell is clicked.

 
cellClick: EventEmitter<IGridCellEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:488

Remarks

Returns the IgxGridCell.

Example

<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

cellEdit

Section titled "cellEdit"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when cell has been edited.

 
cellEdit: EventEmitter<IGridEditEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:634

Remarks

Event is fired after editing is completed, when the cell is exiting edit mode. This event is cancelable.

Example

<igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

cellEditDone

Section titled "cellEditDone"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after cell has been edited and editing has been committed.

 
cellEditDone: EventEmitter<IGridEditDoneEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:647

Example

<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

cellEditEnter

Section titled "cellEditEnter"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when cell enters edit mode.

 
cellEditEnter: EventEmitter<IGridEditEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:607

Remarks

This event is cancelable.

Example

<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

cellEditExit

Section titled "cellEditExit"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when cell exits edit mode.

 
cellEditExit: EventEmitter<IGridEditDoneEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:619

Example

<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

childrenResolved

Section titled "childrenResolved"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when content children are resolved and collections in grid are updated.

 
childrenResolved: EventEmitter<void>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1017

clipboardOptions

Section titled "clipboardOptions"

Inherited from: IgxHierarchicalGridBaseDirective

Controls the copy behavior of the grid.

 
clipboardOptions: IClipboardOptions

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:329

columnInit

Section titled "columnInit"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a column is initialized.

 
columnInit: EventEmitter<IgxColumnComponent>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:726

Remarks

Returns the column object.

Example

<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid>

columnMoving

Section titled "columnMoving"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted during the column moving operation.

 
columnMoving: EventEmitter<IColumnMovingEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:931

Remarks

Returns the source and target IgxColumnComponent objects. This event is cancelable.

Example

<igx-grid (columnMoving)="moving($event)"></igx-grid>

columnMovingEnd

Section titled "columnMovingEnd"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when column moving ends.

 
columnMovingEnd: EventEmitter<IColumnMovingEndEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:944

Remarks

Returns the source and target IgxColumnComponent objects.

Example

<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid>

columnMovingStart

Section titled "columnMovingStart"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when column moving starts.

 
columnMovingStart: EventEmitter<IColumnMovingStartEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:918

Remarks

Returns the moved IgxColumnComponent object.

Example

<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid>

columnPin

Section titled "columnPin"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted before IgxColumnComponent is pinned.

 
columnPin: EventEmitter<IPinColumnCancellableEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:576

Remarks

The index at which to insert the column may be changed through the insertAtIndex property.

Example

public columnPinning(event) {
    if (event.column.field === "Name") {
      event.insertAtIndex = 0;
    }
}

columnPinned

Section titled "columnPinned"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after IgxColumnComponent is pinned.

 
columnPinned: EventEmitter<IPinColumnEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:593

Remarks

The index that the column is inserted at may be changed through the insertAtIndex property.

Example

public columnPinning(event) {
    if (event.column.field === "Name") {
      event.insertAtIndex = 0;
    }
}

columnResized

Section titled "columnResized"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after column is resized.

 
columnResized: EventEmitter<IColumnResizeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:854

Remarks

Returns the IgxColumnComponent object's old and new width.

Example

<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>

columnSelectionChanging

Section titled "columnSelectionChanging"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when IgxColumnComponent is selected.

 
columnSelectionChanging: EventEmitter<IColumnSelectionEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:559

Example

<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>

columnVisibilityChanged

Section titled "columnVisibilityChanged"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after column visibility is changed.

 
columnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:905

Remarks

Args: { column: IgxColumnComponent, newValue: boolean }

Example

<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>

columnVisibilityChanging

Section titled "columnVisibilityChanging"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted before column visibility is changed.

 
columnVisibilityChanging: EventEmitter<IColumnVisibilityChangingEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:892

Remarks

Args: { column: any, newValue: boolean }

Example

<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>

contextMenu

Section titled "contextMenu"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a cell or row is right clicked.

 
contextMenu: EventEmitter<IGridContextMenuEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:866

Remarks

Returns the IgxGridCell object if the immediate context menu target is a cell or an IgxGridRow otherwise.

<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>

dataChanged

Section titled "dataChanged"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after the grid's data view is changed because of a data operation, rebinding, etc.

 
dataChanged: EventEmitter<IForOfDataChangeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1131

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>

dataChanging

Section titled "dataChanging"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted before the grid's data view is changed because of a data operation, rebinding, etc.

 
dataChanging: EventEmitter<IForOfDataChangeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1120

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>

dataPreLoad

Section titled "dataPreLoad"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a new chunk of data is loaded from virtualization.

 
dataPreLoad: EventEmitter<IForOfState>

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:77

Example

<igx-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" (dataPreLoad)="handleEvent()">
 </igx-hierarchical-grid>

doubleClick

Section titled "doubleClick"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a cell is double clicked.

 
doubleClick: EventEmitter<IGridCellEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:879

Remarks

Returns the IgxGridCell object.

Example

<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>

expansionStatesChange

Section titled "expansionStatesChange"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when the rows are expanded or collapsed.

 
expansionStatesChange: EventEmitter<Map<any, boolean>>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:997

Example

<igx-grid [data]="employeeData" (expansionStatesChange)="expansionStatesChange($event)" [autoGenerate]="true"></igx-grid>

filtering

Section titled "filtering"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted before filtering expressions are applied.

 
filtering: EventEmitter<IFilteringEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:772

Remarks

Returns an IFilteringEventArgs object. filteringExpressions key holds the filtering expressions for the column.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid>

filteringDone

Section titled "filteringDone"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after filtering is performed through the UI.

 
filteringDone: EventEmitter<IFilteringExpressionsTree>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:785

Remarks

Returns the filtering expressions tree of the column for which filtering was performed.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid>

filteringExpressionsTreeChange

Section titled "filteringExpressionsTreeChange"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after filtering is performed.

 
filteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:360

Remarks

Returns the filtering expressions tree of the column for which filtering was performed.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
             (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>

formGroupCreated

Section titled "formGroupCreated"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when formGroup is created on edit of row/cell.

 
formGroupCreated: EventEmitter<IGridFormGroupCreatedEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:513

Example

<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

gridAPI

Section titled "gridAPI"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the grid service type providing API methods for the grid

 
gridAPI: IgxHierarchicalGridAPIService

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:38

gridCopy

Section titled "gridCopy"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a copy operation is executed.

 
gridCopy: EventEmitter<IGridClipboardEvent>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:985

Remarks

Fired only if copy behavior is enabled through the [clipboardOptions]IgxGridBaseDirective#clipboardOptions.

gridKeydown

Section titled "gridKeydown"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when keydown is triggered over element inside grid's body.

 
gridKeydown: EventEmitter<IGridKeydownEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:958

Remarks

This event is fired only if the key combination is supported in the grid. Return the target type, target object and the original event. This event is cancelable.

Example

<igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>

gridScroll

Section titled "gridScroll"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when grid is scrolled horizontally/vertically.

 
gridScroll: EventEmitter<IGridScrollEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:386

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
             (gridScroll)="onScroll($event)"></igx-grid>

hasChildrenKey

Section titled "hasChildrenKey"

Inherited from: IgxHierarchicalGridBaseDirective

Gets/Sets the key indicating whether a row has children. If row has no children it does not render an expand indicator.

 
hasChildrenKey: string

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:51

Example

<igx-hierarchical-grid #grid [data]="localData" [hasChildrenKey]="'hasEmployees'">
</igx-hierarchical-grid>

moving

Section titled "moving"

Inherited from: IgxHierarchicalGridBaseDirective

Controls whether columns moving is enabled in the grid.

 
moving: boolean = false

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:224

Section titled "navigation"

Inherited from: IgxHierarchicalGridBaseDirective 

navigation: IgxHierarchicalGridNavigationService

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:40

rangeSelected

Section titled "rangeSelected"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when making a range selection.

 
rangeSelected: EventEmitter<GridSelectionRange>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1099

Remarks

Range selection can be made either through drag selection or through keyboard selection.

rendered

Section titled "rendered"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM

 
rendered: EventEmitter<boolean>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1103

rowAdd

Section titled "rowAdd"

Inherited from: IgxHierarchicalGridBaseDirective

Emmited just before the newly added row is commited.

 
rowAdd: EventEmitter<IRowDataCancelableEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:841

Remarks

This event is cancelable. Returns an IRowDataCancellableEventArgs` object.

Example

<igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>

rowAdded

Section titled "rowAdded"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a row is added.

 
rowAdded: EventEmitter<IRowDataEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:799

Remarks

Returns the data for the new IgxGridRowComponent object.

Example

<igx-grid #grid [data]="localData" (rowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>

rowClasses

Section titled "rowClasses"

Inherited from: IgxHierarchicalGridBaseDirective

Sets a conditional class selector to the grid's row element. Accepts an object literal, containing key-value pairs, where the key is the name of the CSS class and the value is either a callback function that returns a boolean, or boolean, like so:

callback = (row: RowType) => { return row.selected > 6; }
rowClasses = { 'className' : this.callback };
<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>
rowClasses: any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:405

rowClick

Section titled "rowClick"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a row is clicked.

 
rowClick: EventEmitter<IGridRowEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:501

Remarks

Returns the IgxGridRow.

Example

<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

rowDelete

Section titled "rowDelete"

Inherited from: IgxHierarchicalGridBaseDirective

Emmited when deleting a row.

 
rowDelete: EventEmitter<IRowDataCancelableEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:827

Remarks

This event is cancelable. Returns an IRowDataCancellableEventArgs` object.

Example

<igx-grid #grid [data]="localData" (rowDelete)="rowDelete($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>

rowDeleted

Section titled "rowDeleted"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a row is deleted.

 
rowDeleted: EventEmitter<IRowDataEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:813

Remarks

Returns an IRowDataEventArgs object.

Example

<igx-grid #grid [data]="localData" (rowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>

rowDragEnd

Section titled "rowDragEnd"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when dropping a row.

 
rowDragEnd: EventEmitter<IRowDragEndEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:976

Remarks

Return the dropped row.

rowDragStart

Section titled "rowDragStart"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when start dragging a row.

 
rowDragStart: EventEmitter<IRowDragStartEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:967

Remarks

Return the dragged row.

rowEdit

Section titled "rowEdit"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when exiting edit mode for a row.

 
rowEdit: EventEmitter<IGridEditEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:680

Remarks

Emitted when [rowEditable]="true" & endEdit(true) is called. Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, performing paging operation, column resizing, pinning, moving or hitting Done button inside of the rowEditingOverlay, or hitting the Enter key while editing a cell. This event is cancelable.

Example

<igx-grid #grid3 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

rowEditDone

Section titled "rowEditDone"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after exiting edit mode for a row and editing has been committed.

 
rowEditDone: EventEmitter<IGridEditDoneEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:697

Remarks

Emitted when [rowEditable]="true" & endEdit(true) is called. Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, performing paging operation, column resizing, pinning, moving or hitting Done button inside of the rowEditingOverlay, or hitting the Enter key while editing a cell.

Example

<igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

rowEditEnter

Section titled "rowEditEnter"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a row enters edit mode.

 
rowEditEnter: EventEmitter<IGridEditEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:662

Remarks

Emitted when [rowEditable]="true". This event is cancelable.

Example

<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

rowEditExit

Section titled "rowEditExit"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when row editing is canceled.

 
rowEditExit: EventEmitter<IGridEditDoneEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:713

Remarks

Emits when [rowEditable]="true" & endEdit(false) is called. Emitted when changing hitting Esc key during cell editing and when click on the Cancel button in the row editing overlay.

Example

<igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

rowPinned

Section titled "rowPinned"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when the pinned state of a row is changed.

 
rowPinned: EventEmitter<IPinRowEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1050

Example

<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid>

rowPinning

Section titled "rowPinning"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when the pinned state of a row is changed.

 
rowPinning: EventEmitter<IPinRowEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1039

Example

<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid>

rowSelectionChanging

Section titled "rowSelectionChanging"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when IgxGridRowComponent is selected.

 
rowSelectionChanging: EventEmitter<IRowSelectionEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:548

Example

<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>

rowStyles

Section titled "rowStyles"

Inherited from: IgxHierarchicalGridBaseDirective

Sets conditional style properties on the grid row element. It accepts an object literal where the keys are the style properties and the value is an expression to be evaluated.

styles = {
 background: 'yellow',
 color: (row: RowType) => row.selected : 'red': 'white'
}
<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
rowStyles: any = null

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:425

rowToggle

Section titled "rowToggle"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when the expanded state of a row gets changed.

 
rowToggle: EventEmitter<IRowToggleEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1028

Example

<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>

selected

Section titled "selected"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when a cell is selected.

 
selected: EventEmitter<IGridCellEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:537

Remarks

Returns the IgxGridCell.

Example

<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

selectedRowsChange

Section titled "selectedRowsChange"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when the rows are selected or deselected.

 
selectedRowsChange: EventEmitter<any[]>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1009

Example

<igx-grid [data]="employeeData" (selectedRowsChange)="selectedRowsChange($event)" [autoGenerate]="true"></igx-grid>

showExpandAll

Section titled "showExpandAll"

Inherited from: IgxHierarchicalGridBaseDirective

Gets/Sets whether the expand/collapse all button in the header should be rendered.

 
showExpandAll: boolean = false

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:65

Remarks

The default value is false.

Example

<igx-hierarchical-grid #grid [data]="localData" [showExpandAll]="true">
</igx-hierarchical-grid>

snackbarDisplayTime

Section titled "snackbarDisplayTime"

Inherited from: IgxHierarchicalGridBaseDirective

Gets/Sets the display time for the row adding snackbar notification.

 
snackbarDisplayTime: number = 6000

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:187

Remarks

By default it is 6000ms.

sorting

Section titled "sorting"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted before sorting expressions are applied.

 
sorting: EventEmitter<ISortingEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:746

Remarks

Returns an ISortingEventArgs object. sortingExpressions key holds the sorting expressions.

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid>

sortingDone

Section titled "sortingDone"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted after sorting is completed.

 
sortingDone: EventEmitter<ISortingExpression<any> | ISortingExpression<any>[]>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:759

Remarks

Returns the sorting expression.

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>

sortingExpressionsChange

Section titled "sortingExpressionsChange"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted before sorting is performed.

 
sortingExpressionsChange: EventEmitter<ISortingExpression<any>[]>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1074

Remarks

Returns the sorting expressions.

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>

toolbarExporting

Section titled "toolbarExporting"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when an export process is initiated by the user.

 
toolbarExporting: EventEmitter<IGridToolbarExportEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1088

Example

toolbarExporting(event: IGridToolbarExportEventArgs){
    const toolbarExporting = event;
}

uniqueColumnValuesStrategy

Section titled "uniqueColumnValuesStrategy"

Inherited from: IgxHierarchicalGridBaseDirective

Gets/Sets a unique values strategy used by the Excel Style Filtering

 
uniqueColumnValuesStrategy: object

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:459

Remarks

Provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering.

Example

<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>

validation

Section titled "validation"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the validation service for the grid. The type contains properties and methods (logic) for validating records

 
validation: IgxGridValidationService

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:144

validationStatusChange

Section titled "validationStatusChange"

Inherited from: IgxHierarchicalGridBaseDirective

Emitted when grid's validation status changes.

 
validationStatusChange: EventEmitter<IGridValidationStatusEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:524

Example

<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

validationTrigger

Section titled "validationTrigger"

Inherited from: IgxHierarchicalGridBaseDirective

Gets/Sets the trigger for validators used when editing the grid.

 
validationTrigger: GridValidationTrigger = 'change'

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2057

Example

<igx-grid #grid validationTrigger='blur'></igx-grid>

allowAdvancedFiltering

Section titled "allowAdvancedFiltering"

Inherited from: IgxHierarchicalGridBaseDirective 

allowAdvancedFiltering: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2330, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2334

allowFiltering

Section titled "allowFiltering"

Inherited from: IgxHierarchicalGridBaseDirective

Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered

 
allowFiltering: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2304, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2308

batchEditing

Section titled "batchEditing"

Inherited from: IgxHierarchicalGridBaseDirective 

batchEditing: boolean

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:112, projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:116

cellMergeMode

Section titled "cellMergeMode"

Inherited from: IgxHierarchicalGridBaseDirective 

cellMergeMode: GridCellMergeMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2881, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2885

cellSelection

Section titled "cellSelection"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade'

 
cellSelection: GridSelectionMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2862, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2866

columnSelection

Section titled "columnSelection"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade'

 
columnSelection: GridSelectionMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2923, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2927

columnWidth

Section titled "columnWidth"

Inherited from: IgxHierarchicalGridBaseDirective 

columnWidth: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2181, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2184

data

Section titled "data" 
data: any[]

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:473, projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:487

dataCloneStrategy

Section titled "dataCloneStrategy"

Inherited from: IgxHierarchicalGridBaseDirective

Strategy, used for cloning the provided data. The type has one method, that takes any type of data

 
dataCloneStrategy: IDataCloneStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:314, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:318

dragGhostCustomTemplate

Section titled "dragGhostCustomTemplate"

Inherited from: IgxHierarchicalGridBaseDirective 

dragGhostCustomTemplate: TemplateRef<IgxGridRowDragGhostContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1230, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1247

dragIndicatorIconTemplate

Section titled "dragIndicatorIconTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for drag indicator icons. Could be of any type

 
dragIndicatorIconTemplate: TemplateRef<IgxGridEmptyTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2691, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2708

emptyFilteredGridMessage

Section titled "emptyFilteredGridMessage"

Inherited from: IgxHierarchicalGridBaseDirective 

emptyFilteredGridMessage: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2263, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2267

emptyGridMessage

Section titled "emptyGridMessage"

Inherited from: IgxHierarchicalGridBaseDirective 

emptyGridMessage: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2199, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2202

emptyGridTemplate

Section titled "emptyGridTemplate"

Inherited from: IgxHierarchicalGridBaseDirective 

emptyGridTemplate: TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:241, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:244

excelStyleHeaderIconTemplate

Section titled "excelStyleHeaderIconTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for header icon It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
excelStyleHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1580, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1597

expandChildren

Section titled "expandChildren" 
expandChildren: boolean

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:535, projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:549

expansionStates

Section titled "expansionStates"

Inherited from: IgxHierarchicalGridBaseDirective 

expansionStates: Map<any, boolean>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4355, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4360

filteringExpressionsTree

Section titled "filteringExpressionsTree"

Inherited from: IgxHierarchicalGridBaseDirective 

filteringExpressionsTree: IFilteringExpressionsTree

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1868, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1872

filteringLogic

Section titled "filteringLogic"

Inherited from: IgxHierarchicalGridBaseDirective 

filteringLogic: FilteringLogic

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1847, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1851

filterMode

Section titled "filterMode"

Inherited from: IgxHierarchicalGridBaseDirective

The filter mode for the grid. It can be quick filter of excel-style filter

 
filterMode: FilterMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2356, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2360

filterStrategy

Section titled "filterStrategy"

Inherited from: IgxHierarchicalGridBaseDirective 

filterStrategy: IFilteringStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2450, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2454

headerCollapsedIndicatorTemplate

Section titled "headerCollapsedIndicatorTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for header collapsed indicators. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
headerCollapsedIndicatorTemplate: TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1551, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1568

headerExpandedIndicatorTemplate

Section titled "headerExpandedIndicatorTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for header expanded indicators. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
headerExpandedIndicatorTemplate: TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1520, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1537

headSelectorTemplate

Section titled "headSelectorTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for the header selector. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
headSelectorTemplate: TemplateRef<IgxHeadSelectorTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2614, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2631

height

Section titled "height"

Inherited from: IgxHierarchicalGridBaseDirective 

height: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2103, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2107

hideRowSelectors

Section titled "hideRowSelectors"

Inherited from: IgxHierarchicalGridBaseDirective 

hideRowSelectors: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2021, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2025

isLoading

Section titled "isLoading"

Inherited from: IgxHierarchicalGridBaseDirective 

isLoading: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2216, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2229

loadingGridTemplate

Section titled "loadingGridTemplate"

Inherited from: IgxHierarchicalGridBaseDirective 

loadingGridTemplate: TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:274, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:277

locale

Section titled "locale"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the locale of the grid: USD, EUR, GBP, CNY, JPY, etc.

 
locale: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1964, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1968

mergeStrategy

Section titled "mergeStrategy"

Inherited from: IgxHierarchicalGridBaseDirective 

mergeStrategy: IGridMergeStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2485, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2488

outlet

Section titled "outlet"

Inherited from: IgxHierarchicalGridBaseDirective 

outlet: any

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:94, projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-base.directive.ts:105

pagingMode

Section titled "pagingMode"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the paging of the grid. It can be either 'Local' or 'Remote'

  • Local: Default value; The grid will paginate the data source based on the page
 
pagingMode: GridPagingMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1981, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1985

pinning

Section titled "pinning"

Inherited from: IgxHierarchicalGridBaseDirective

The configuration for columns and rows pinning in the grid It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom)

 
pinning: IPinningConfig

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2284, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2287

primaryKey

Section titled "primaryKey"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the unique primary key used for identifying rows in the grid

 
primaryKey: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:437, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:441

resourceStrings

Section titled "resourceStrings" 
resourceStrings: PrefixedResourceStrings<IGridResourceStrings, "igx_">

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:588, projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:598

rowAddTextTemplate

Section titled "rowAddTextTemplate"

Inherited from: IgxHierarchicalGridBaseDirective 

rowAddTextTemplate: TemplateRef<IgxGridEmptyTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1397, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1413

rowCollapsedIndicatorTemplate

Section titled "rowCollapsedIndicatorTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for collapsed row indicators. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
rowCollapsedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1489, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1506

rowDraggable

Section titled "rowDraggable"

Inherited from: IgxHierarchicalGridBaseDirective

Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged

 
rowDraggable: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2039, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2043

rowEditable

Section titled "rowEditable"

Inherited from: IgxHierarchicalGridBaseDirective

Indicates whether rows in the grid are editable. If te value is true, the rows can be edited

 
rowEditable: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2080, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2084

rowEditActionsTemplate

Section titled "rowEditActionsTemplate"

Inherited from: IgxHierarchicalGridBaseDirective 

rowEditActionsTemplate: TemplateRef<IgxGridRowEditActionsTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1427, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1444

rowEditTextTemplate

Section titled "rowEditTextTemplate"

Inherited from: IgxHierarchicalGridBaseDirective 

rowEditTextTemplate: TemplateRef<IgxGridRowEditTextTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1367, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1383

rowExpandedIndicatorTemplate

Section titled "rowExpandedIndicatorTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for expanded row indicators. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
rowExpandedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1458, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1475

rowHeight

Section titled "rowHeight"

Inherited from: IgxHierarchicalGridBaseDirective

The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling

 
rowHeight: number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2160, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2164

rowSelection

Section titled "rowSelection"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade'

 
rowSelection: GridSelectionMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2902, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2906

rowSelectorTemplate

Section titled "rowSelectorTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for row selectors. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
rowSelectorTemplate: TemplateRef<IgxRowSelectorTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2647, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2664

schema

Section titled "schema" 
schema: EntityType[]

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:568, projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:573

selectedRows

Section titled "selectedRows"

Inherited from: IgxHierarchicalGridBaseDirective 

selectedRows: any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2533, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2537

selectRowOnClick

Section titled "selectRowOnClick"

Inherited from: IgxHierarchicalGridBaseDirective 

selectRowOnClick: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5799, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5803

shouldGenerate

Section titled "shouldGenerate"

Inherited from: IgxHierarchicalGridBaseDirective 

shouldGenerate: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2246, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2250

showSummaryOnCollapse

Section titled "showSummaryOnCollapse"

Inherited from: IgxHierarchicalGridBaseDirective 

showSummaryOnCollapse: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2432, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2436

sortAscendingHeaderIconTemplate

Section titled "sortAscendingHeaderIconTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for ascending sort header icons. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
sortAscendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1613, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1630

sortDescendingHeaderIconTemplate

Section titled "sortDescendingHeaderIconTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for descending sort header icons. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1642, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1659

sortHeaderIconTemplate

Section titled "sortHeaderIconTemplate"

Inherited from: IgxHierarchicalGridBaseDirective

The template for sort header icons. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
sortHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1674, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1691

sortingExpressions

Section titled "sortingExpressions"

Inherited from: IgxHierarchicalGridBaseDirective 

sortingExpressions: ISortingExpression<any>[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2767, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2771

sortingOptions

Section titled "sortingOptions"

Inherited from: IgxHierarchicalGridBaseDirective 

sortingOptions: ISortingOptions

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2506, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2514

sortStrategy

Section titled "sortStrategy"

Inherited from: IgxHierarchicalGridBaseDirective 

sortStrategy: IGridSortingStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2467, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2471

summaryCalculationMode

Section titled "summaryCalculationMode"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels'

 
summaryCalculationMode: GridSummaryCalculationMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2407, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2411

summaryPosition

Section titled "summaryPosition"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the position of summaries: 'top', 'bottom'

 
summaryPosition: GridSummaryPosition

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2387, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2391

summaryRowHeight

Section titled "summaryRowHeight"

Inherited from: IgxHierarchicalGridBaseDirective 

summaryRowHeight: number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:285, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:293

totalItemCount

Section titled "totalItemCount" 
totalItemCount: number

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:517, projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:521

totalRecords

Section titled "totalRecords"

Inherited from: IgxHierarchicalGridBaseDirective 

totalRecords: number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4737, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4741

width

Section titled "width"

Inherited from: IgxHierarchicalGridBaseDirective 

width: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2133, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2137

Accessors

Section titled "Accessors"

columns

Section titled "columns"

Inherited from: IgxHierarchicalGridBaseDirective

Gets an array of IgxColumnComponents.

get columns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4590

Example

const colums = this.grid.columns.

Returns IgxColumnComponent[]

dataRowList

Section titled "dataRowList"

Inherited from: IgxHierarchicalGridBaseDirective

A list of currently rendered IgxGridRowComponent's.

get dataRowList(): QueryList<IgxRowDirective>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2600

Example

const dataList = this.grid.dataRowList;

Returns QueryList<IgxRowDirective>

dataView

Section titled "dataView"

Inherited from: IgxHierarchicalGridBaseDirective

Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.

get dataView(): any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5786

Example

const dataView = this.grid.dataView;

Returns any[]

defaultRowHeight

Section titled "defaultRowHeight"

Inherited from: IgxHierarchicalGridBaseDirective

Gets the default row height.

get defaultRowHeight(): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4490

Example

const rowHeigh = this.grid.defaultRowHeight;

Returns number

filteredData

Section titled "filteredData"

Inherited from: IgxHierarchicalGridBaseDirective

Returns an array of objects containing the filtered data.

get filteredData(): any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3338

Example

let filteredData = this.grid.filteredData;

Returns any

filteredSortedData

Section titled "filteredSortedData"

Inherited from: IgxHierarchicalGridBaseDirective

Returns an array containing the filtered sorted data.

get filteredSortedData(): any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3350

Example

const filteredSortedData = this.grid1.filteredSortedData;

Returns any[]

foreignKey

Section titled "foreignKey"

Gets the unique identifier of the parent row. It may be a string or number if primaryKey of the parent grid is set or an object reference of the parent record otherwise.

const foreignKey = this.grid.foreignKey;
get foreignKey(): any

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:611

Returns any

hiddenColumnsCount

Section titled "hiddenColumnsCount"

Inherited from: IgxHierarchicalGridBaseDirective

Gets the number of hidden columns.

get hiddenColumnsCount(): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2788

Example

const hiddenCol = this.grid.hiddenColumnsCount;
``

Returns number

id

Section titled "id"

Gets/Sets the value of the id attribute.

get id(): string

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:456

Example

<igx-hierarchical-grid [id]="'igx-hgrid-1'" [data]="Data" [autoGenerate]="true"></igx-hierarchical-grid>

Returns string

lastSearchInfo

Section titled "lastSearchInfo"

Inherited from: IgxHierarchicalGridBaseDirective

Represents the last search information.

get lastSearchInfo(): ISearchInfo

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2975

Returns ISearchInfo

nativeElement

Section titled "nativeElement"

Inherited from: IgxHierarchicalGridBaseDirective

Gets the native element.

get nativeElement(): HTMLElement

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4459

Example

const nativeEl = this.grid.nativeElement.

Returns HTMLElement

pinnedColumns

Section titled "pinnedColumns"

Inherited from: IgxHierarchicalGridBaseDirective

Gets an array of the pinned IgxColumnComponents.

get pinnedColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4602

Example

const pinnedColumns = this.grid.pinnedColumns.

Returns IgxColumnComponent[]

pinnedColumnsCount

Section titled "pinnedColumnsCount"

Inherited from: IgxHierarchicalGridBaseDirective

Gets the number of pinned columns.

get pinnedColumnsCount(): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2795

Returns number

pinnedEndColumns

Section titled "pinnedEndColumns"

Inherited from: IgxHierarchicalGridBaseDirective

Gets an array of the pinned to the right IgxColumnComponents.

get pinnedEndColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4630

Example

const pinnedColumns = this.grid.pinnedEndColumns.

Returns IgxColumnComponent[]

pinnedRows

Section titled "pinnedRows"

Inherited from: IgxHierarchicalGridBaseDirective

Gets an array of the pinned IgxRowComponents.

get pinnedRows(): IgxGridRowComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4643

Example

const pinnedRow = this.grid.pinnedRows;

Returns IgxGridRowComponent[]

pinnedStartColumns

Section titled "pinnedStartColumns"

Inherited from: IgxHierarchicalGridBaseDirective

Gets an array of the pinned to the left IgxColumnComponents.

get pinnedStartColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4618

Example

const pinnedColumns = this.grid.pinnedStartColumns.

Returns IgxColumnComponent[]

rowList

Section titled "rowList"

Inherited from: IgxHierarchicalGridBaseDirective

A list of IgxGridRowComponent.

get rowList(): QueryList<IgxRowDirective>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2579

Example

const rowList = this.grid.rowList;

Returns QueryList<IgxRowDirective>

selectedCells

Section titled "selectedCells"

Returns an array of the selected IgxGridCells.

get selectedCells(): CellType[]

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:800

Example

const selectedCells = this.grid.selectedCells;

Returns CellType[]

transactions

Section titled "transactions"

Inherited from: IgxHierarchicalGridBaseDirective

unpinnedColumns

Section titled "unpinnedColumns"

Inherited from: IgxHierarchicalGridBaseDirective

Gets an array of unpinned IgxColumnComponents.

get unpinnedColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4655

Example

const unpinnedColumns = this.grid.unpinnedColumns.

Returns IgxColumnComponent[]

virtualizationState

Section titled "virtualizationState"

Inherited from: IgxHierarchicalGridBaseDirective

Returns the state of the grid virtualization.

get virtualizationState(): IForOfState

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3575

Example

const gridVirtState = this.grid1.virtualizationState;

Returns IForOfState

visibleColumns

Section titled "visibleColumns"

Inherited from: IgxHierarchicalGridBaseDirective

Returns an array of visible IgxColumnComponents.

get visibleColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4718

Example

const visibleColumns = this.grid.visibleColumns.

Returns IgxColumnComponent[]

Methods

Section titled "Methods"

addRow

Section titled "addRow"

Inherited from: IgxHierarchicalGridBaseDirective

Creates a new IgxGridRowComponent and adds the data record to the end of the data source.

addRow(data: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4918

Parameters

  • data: any

Returns void

Example

this.grid1.addRow(record);

beginAddRowById

Section titled "beginAddRowById"

Inherited from: IgxHierarchicalGridBaseDirective

Enters add mode by spawning the UI under the specified row by rowID.

beginAddRowById(rowID: any, asChild: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6548

Parameters

  • rowID: any

    The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view
  • asChild: boolean

    Whether the record should be added as a child. Only applicable to igxTreeGrid.

Returns void

Example

this.grid.beginAddRowById('ALFKI');
this.grid.beginAddRowById('ALFKI', true);
this.grid.beginAddRowById(null);

beginAddRowByIndex

Section titled "beginAddRowByIndex"

Inherited from: IgxHierarchicalGridBaseDirective

Enters add mode by spawning the UI at the specified index.

beginAddRowByIndex(index: number): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6606

Parameters

  • index: number

    The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length

Returns void

Example

this.grid.beginAddRowByIndex(0);

clearCellSelection

Section titled "clearCellSelection"

Inherited from: IgxHierarchicalGridBaseDirective

Deselect selected cells.

clearCellSelection(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5883

Returns void

Example

this.grid.clearCellSelection();

clearFilter

Section titled "clearFilter"

Inherited from: IgxHierarchicalGridBaseDirective

If name is provided, clears the filtering state of the corresponding IgxColumnComponent.

clearFilter(name: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5212

Parameters

  • name: string

Returns void

Example

this.grid.clearFilter();

clearSearch

Section titled "clearSearch"

Inherited from: IgxHierarchicalGridBaseDirective

Removes all the highlights in the cell.

clearSearch(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5462

Returns void

Example

this.grid.clearSearch();

clearSort

Section titled "clearSort"

Inherited from: IgxHierarchicalGridBaseDirective

If name is provided, clears the sorting state of the corresponding IgxColumnComponent.

clearSort(name: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5227

Parameters

  • name: string

Returns void

Example

this.grid.clearSort();

closeAdvancedFilteringDialog

Section titled "closeAdvancedFilteringDialog"

Inherited from: IgxHierarchicalGridBaseDirective

Closes the advanced filtering dialog.

closeAdvancedFilteringDialog(applyChanges: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6435

Parameters

  • applyChanges: boolean

    indicates whether the changes should be applied

Returns void

collapseAll

Section titled "collapseAll"

Inherited from: IgxHierarchicalGridBaseDirective

Collapses all rows.

collapseAll(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4390

Returns void

Example

this.grid.collapseAll();

collapseRow

Section titled "collapseRow"

Inherited from: IgxHierarchicalGridBaseDirective

Collapses the row by its id.

collapseRow(rowID: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4421

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.

Returns void

Example

this.grid.collapseRow(rowID);

deleteRow

Section titled "deleteRow"

Inherited from: IgxHierarchicalGridBaseDirective

Removes the IgxGridRowComponent and the corresponding data record by primary key.

deleteRow(rowSelector: any): any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4941

Parameters

  • rowSelector: any

Returns any

Example

this.grid1.deleteRow(0);

deselectAllColumns

Section titled "deselectAllColumns"

Inherited from: IgxHierarchicalGridBaseDirective

Deselects all columns

deselectAllColumns(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6046

Returns void

Example

this.grid.deselectAllColumns();

deselectAllRows

Section titled "deselectAllRows"

Inherited from: IgxHierarchicalGridBaseDirective

Deselects all rows

deselectAllRows(onlyFilterData: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5867

Parameters

  • onlyFilterData: boolean

Returns void

Example

this.grid.deselectAllRows();

deselectColumns

Section titled "deselectColumns"

Inherited from: IgxHierarchicalGridBaseDirective

Deselect specified columns by field.

deselectColumns(columns: string[] | ColumnType[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6020

Parameters

Returns void

Example

this.grid.deselectColumns(['ID','Name']);

deselectRows

Section titled "deselectRows"

Inherited from: IgxHierarchicalGridBaseDirective

Deselect specified rows by ID.

deselectRows(rowIDs: any[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5831

Parameters

  • rowIDs: any[]

Returns void

Example

this.grid.deselectRows([1,2,5]);

disableSummaries

Section titled "disableSummaries"

Inherited from: IgxHierarchicalGridBaseDirective

Disable summaries for the specified column.

disableSummaries(rest: any[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5193

Parameters

  • rest: any[]

Returns void

Example

grid.disableSummaries('ProductName');

enableSummaries

Section titled "enableSummaries"

Inherited from: IgxHierarchicalGridBaseDirective

Enables summaries for the specified column and applies your customSummary.

enableSummaries(rest: any[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5171

Parameters

  • rest: any[]

Returns void

Example

grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);

Enable summaries for the listed columns.

endEdit

Section titled "endEdit"

Inherited from: IgxHierarchicalGridBaseDirective

Finishes the row transactions on the current row and returns whether the grid editing was canceled.

endEdit(commit: boolean, event: Event): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6512

Parameters

  • commit: boolean
  • event: Event

Returns boolean

Example

<button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button>

expandAll

Section titled "expandAll"

Inherited from: IgxHierarchicalGridBaseDirective

Expands all rows.

expandAll(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4377

Returns void

Example

this.grid.expandAll();

expandRow

Section titled "expandRow"

Inherited from: IgxHierarchicalGridBaseDirective

Expands the row by its id.

expandRow(rowID: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4406

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.

Returns void

Example

this.grid.expandRow(rowID);

filter

Section titled "filter"

Inherited from: IgxHierarchicalGridBaseDirective

Filters a single IgxColumnComponent.

filter(name: string, value: any, conditionOrExpressionTree: IFilteringOperation | IFilteringExpressionsTree, ignoreCase: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5134

Parameters

Returns void

Example

public filter(term) {
     this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
}

filterGlobal

Section titled "filterGlobal"

Inherited from: IgxHierarchicalGridBaseDirective

Filters all the IgxColumnComponent in the IgxGridComponent with the same condition.

filterGlobal(value: any, condition: any, ignoreCase: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5151

Parameters

  • value: any
  • condition: any
  • ignoreCase: any

Returns void

Example

grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));

findNext

Section titled "findNext"

Inherited from: IgxHierarchicalGridBaseDirective

Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.

findNext(text: string, caseSensitive: boolean, exactMatch: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5395

Parameters

  • text: string

    the string to search.
  • caseSensitive: boolean

    optionally, if the search should be case sensitive (defaults to false).
  • exactMatch: boolean

    optionally, if the text should match the entire value (defaults to false).

Returns number

Example

this.grid.findNext("financial");

findPrev

Section titled "findPrev"

Inherited from: IgxHierarchicalGridBaseDirective

Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.

findPrev(text: string, caseSensitive: boolean, exactMatch: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5412

Parameters

  • text: string

    the string to search.
  • caseSensitive: boolean

    optionally, if the search should be case sensitive (defaults to false).
  • exactMatch: boolean

    optionally, if the text should match the entire value (defaults to false).

Returns number

Example

this.grid.findPrev("financial");

getCellByColumn

Section titled "getCellByColumn"

Returns a CellType object that matches the conditions.

getCellByColumn(rowIndex: number, columnField: string): CellType

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:815

Parameters

  • rowIndex: number
  • columnField: string

Returns CellType

Example

const myCell = this.grid1.getCellByColumn(2, "UnitPrice");

getCellByKey

Section titled "getCellByKey"

Returns a CellType object that matches the conditions.

getCellByKey(rowSelector: any, columnField: string): CellType

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:835

Parameters

  • rowSelector: any

    match any rowID
  • columnField: string

Returns CellType

Example

grid.getCellByKey(1, 'index');

getColumnByName

Section titled "getColumnByName"

Inherited from: IgxHierarchicalGridBaseDirective

Returns the IgxColumnComponent by field name.

getColumnByName(name: string): IgxColumnComponent

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4681

Parameters

  • name: string

Returns IgxColumnComponent

Example

const myCol = this.grid1.getColumnByName("ID");

getColumnByVisibleIndex

Section titled "getColumnByVisibleIndex"

Inherited from: IgxHierarchicalGridBaseDirective 

getColumnByVisibleIndex(index: number): IgxColumnComponent

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4685

Parameters

  • index: number

Returns IgxColumnComponent

getHeaderGroupWidth

Section titled "getHeaderGroupWidth"

Inherited from: IgxHierarchicalGridBaseDirective

Gets the width to be set on IgxGridHeaderGroupComponent.

getHeaderGroupWidth(column: IgxColumnComponent): string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4666

Parameters

Returns string

getNextCell

Section titled "getNextCell"

Inherited from: IgxHierarchicalGridBaseDirective

Returns ICellPosition which defines the next cell, according to the current position, that match specific criteria.

getNextCell(currRowIndex: number, curVisibleColIndex: number, callback: object): ICellPosition

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6250

Parameters

  • currRowIndex: number
  • curVisibleColIndex: number
  • callback: object

Returns ICellPosition

Example

const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);

getPinnedEndWidth

Section titled "getPinnedEndWidth"

Inherited from: IgxHierarchicalGridBaseDirective

Gets calculated width of the pinned areas.

getPinnedEndWidth(takeHidden: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5712

Parameters

  • takeHidden: boolean

    If we should take into account the hidden columns in the pinned area.

Returns number

Example

const pinnedWidth = this.grid.getPinnedEndWidth();

getPinnedStartWidth

Section titled "getPinnedStartWidth"

Inherited from: IgxHierarchicalGridBaseDirective

Gets calculated width of the pinned areas.

getPinnedStartWidth(takeHidden: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5689

Parameters

  • takeHidden: boolean

    If we should take into account the hidden columns in the pinned area.

Returns number

Example

const pinnedWidth = this.grid.getPinnedStartWidth();

getPreviousCell

Section titled "getPreviousCell"

Inherited from: IgxHierarchicalGridBaseDirective

Returns ICellPosition which defines the previous cell, according to the current position, that match specific criteria.

getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback: object): ICellPosition

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6286

Parameters

  • currRowIndex: number
  • curVisibleColIndex: number
  • callback: object

Returns ICellPosition

Example

const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);

getRowByIndex

Section titled "getRowByIndex"

Returns the RowType by index.

getRowByIndex(index: number): RowType

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:747

Parameters

  • index: number

Returns RowType

Example

const myRow = this.grid1.getRowByIndex(1);

getRowByKey

Section titled "getRowByKey"

Returns the RowType by key.

getRowByKey(key: any): RowType

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:763

Parameters

  • key: any

Returns RowType

Example

const myRow = this.grid1.getRowByKey(1);

getRowData

Section titled "getRowData"

Inherited from: IgxHierarchicalGridBaseDirective

Returns the data that is contained in the row component.

getRowData(rowSelector: any): any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5067

Parameters

  • rowSelector: any

    correspond to rowID

Returns any

Example

const data = grid.getRowData(94741);

getSelectedColumnsData

Section titled "getSelectedColumnsData"

Inherited from: IgxHierarchicalGridBaseDirective

Returns an array of the current columns selection in the form of [{ column.field: cell.value }, ...].

getSelectedColumnsData(formatters: boolean, headers: boolean): any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6071

Parameters

  • formatters: boolean
  • headers: boolean

Returns any[]

getSelectedData

Section titled "getSelectedData"

Inherited from: IgxHierarchicalGridBaseDirective

Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...].

getSelectedData(formatters: boolean, headers: boolean): any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5963

Parameters

  • formatters: boolean
  • headers: boolean

Returns any[]

getSelectedRanges

Section titled "getSelectedRanges"

Inherited from: IgxHierarchicalGridBaseDirective

Get the currently selected ranges in the grid.

getSelectedRanges(): GridSelectionRange[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5951

Returns GridSelectionRange[]

isRecordPinnedByIndex

Section titled "isRecordPinnedByIndex"

Inherited from: IgxHierarchicalGridBaseDirective

Returns whether the record is pinned or not.

isRecordPinnedByIndex(rowIndex: number): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3613

Parameters

  • rowIndex: number

    Index of the record in the filteredSortedData collection.

Returns boolean

markForCheck

Section titled "markForCheck"

Inherited from: IgxHierarchicalGridBaseDirective

Triggers change detection for the IgxGridComponent. Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. May degrade performance if used when not needed, or if misused:

// DON'Ts:
// don't call markForCheck from inside a loop
// don't call markForCheck when a primitive has changed
grid.data.forEach(rec => {
 rec = newValue;
 grid.markForCheck();
});

// DOs
// call markForCheck after updating a nested property
grid.data.forEach(rec => {
 rec.nestedProp1.nestedProp2 = newValue;
});
grid.markForCheck();
markForCheck(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4903

Returns void

Example

grid.markForCheck();

moveColumn

Section titled "moveColumn"

Inherited from: IgxHierarchicalGridBaseDirective

Places a column before or after the specified target column.

moveColumn(column: IgxColumnComponent, target: IgxColumnComponent, pos: DropPosition): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4826

Parameters

Returns void

Example

grid.moveColumn(column, target);
Section titled "navigateTo"

Inherited from: IgxHierarchicalGridBaseDirective

Navigates to a position in the grid based on provided rowindex and visibleColumnIndex.

navigateTo(rowIndex: number, visibleColIndex: number, cb: object): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6202

Parameters

  • rowIndex: number
  • visibleColIndex: number
  • cb: object

Returns void

Example

this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });

openAdvancedFilteringDialog

Section titled "openAdvancedFilteringDialog"

Inherited from: IgxHierarchicalGridBaseDirective

Opens the advanced filtering dialog.

openAdvancedFilteringDialog(overlaySettings: OverlaySettings): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6415

Parameters

Returns void

pinColumn

Section titled "pinColumn"

Inherited from: IgxHierarchicalGridBaseDirective

Pins a column by field name.

pinColumn(columnName: string | IgxColumnComponent, index: number, pinningPosition: ColumnPinningPosition): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5264

Parameters

Returns boolean

Example

this.grid.pinColumn("ID");

pinRow

Section titled "pinRow"

Pin the row by its id.

pinRow(rowID: any, index: number): boolean

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:843

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.
  • index: number

    The index at which to insert the row in the pinned collection.

Returns boolean

Example

this.grid.pinRow(rowID);

recalculateAutoSizes

Section titled "recalculateAutoSizes"

Inherited from: IgxHierarchicalGridBaseDirective

Recalculates all widths of columns that have size set to auto.

recalculateAutoSizes(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4700

Returns void

Example

this.grid1.recalculateAutoSizes();

reflow

Section titled "reflow"

Inherited from: IgxHierarchicalGridBaseDirective

Recalculates grid width/height dimensions.

reflow(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5378

Returns void

Example

this.grid.reflow();

refreshSearch

Section titled "refreshSearch"

Inherited from: IgxHierarchicalGridBaseDirective

Reapplies the existing search.

refreshSearch(updateActiveInfo: boolean, endEdit: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5427

Parameters

  • updateActiveInfo: boolean
  • endEdit: boolean

Returns number

Example

this.grid.refreshSearch();

selectAllColumns

Section titled "selectAllColumns"

Inherited from: IgxHierarchicalGridBaseDirective

Selects all columns

selectAllColumns(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6059

Returns void

Example

this.grid.deselectAllColumns();

selectAllRows

Section titled "selectAllRows"

Inherited from: IgxHierarchicalGridBaseDirective

Selects all rows

selectAllRows(onlyFilterData: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5849

Parameters

  • onlyFilterData: boolean

Returns void

Example

this.grid.selectAllRows();
this.grid.selectAllRows(false);

selectColumns

Section titled "selectColumns"

Inherited from: IgxHierarchicalGridBaseDirective

Select specified columns.

selectColumns(columns: string[] | ColumnType[], clearCurrentSelection: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5992

Parameters

  • columns: string[] | ColumnType[]
  • clearCurrentSelection: boolean

    if true clears the current selection

Returns void

Example

this.grid.selectColumns(['ID','Name'], true);

selectedColumns

Section titled "selectedColumns"

Inherited from: IgxHierarchicalGridBaseDirective

Get current selected columns.

selectedColumns(): ColumnType[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5977

Returns ColumnType[]

Example

Returns an array with selected columns

const selectedColumns = this.grid.selectedColumns();

selectRange

Section titled "selectRange"

Inherited from: IgxHierarchicalGridBaseDirective

Select range(s) of cells between certain rows and columns of the grid.

selectRange(arg: GridSelectionRange | GridSelectionRange[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5911

Parameters

Returns void

selectRows

Section titled "selectRows"

Inherited from: IgxHierarchicalGridBaseDirective

Select specified rows by ID.

selectRows(rowIDs: any[], clearCurrentSelection: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5817

Parameters

  • rowIDs: any[]
  • clearCurrentSelection: boolean

    if true clears the current selection

Returns void

Example

this.grid.selectRows([1,2,5], true);

sort

Section titled "sort"

Inherited from: IgxHierarchicalGridBaseDirective

Sort a single IgxColumnComponent.

sort(expression: ISortingExpression<any> | ISortingExpression<any>[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5086

Parameters

Returns void

Example

this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });

toggleColumnVisibility

Section titled "toggleColumnVisibility"

Inherited from: IgxHierarchicalGridBaseDirective

Toggles the specified column's visibility.

toggleColumnVisibility(args: IColumnVisibilityChangedEventArgs): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4332

Parameters

Returns void

Example

this.grid1.toggleColumnVisibility({
      column: this.grid1.columns[0],
      newValue: true
});

toggleRow

Section titled "toggleRow"

Inherited from: IgxHierarchicalGridBaseDirective

Toggles the row by its id.

toggleRow(rowID: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4437

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.

Returns void

Example

this.grid.toggleRow(rowID);

unpinColumn

Section titled "unpinColumn"

Inherited from: IgxHierarchicalGridBaseDirective

Unpins a column by field name. Returns whether the operation is successful.

unpinColumn(columnName: string | IgxColumnComponent, index: number): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5279

Parameters

Returns boolean

Example

this.grid.pinColumn("ID");

unpinRow

Section titled "unpinRow"

Unpin the row by its id.

unpinRow(rowID: any): boolean

Defined in projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts:867

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.

Returns boolean

Example

this.grid.unpinRow(rowID);

updateCell

Section titled "updateCell"

Inherited from: IgxHierarchicalGridBaseDirective

Updates the IgxGridRowComponent and the corresponding data record by primary key.

updateCell(value: any, rowSelector: any, column: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4993

Parameters

  • value: any

    the new value which is to be set.
  • rowSelector: any

    corresponds to rowID.
  • column: string

    corresponds to column field.

Returns void

Example

this.gridWithPK.updateCell('Updated', 1, 'ProductName');

updateRow

Section titled "updateRow"

Inherited from: IgxHierarchicalGridBaseDirective

Updates the IgxGridRowComponent

updateRow(value: any, rowSelector: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5038

Parameters

  • value: any
  • rowSelector: any

    correspond to rowID

Returns void

Example

grid.updateRow({
      ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')
  }, 1);