IgrTreeGrid | Infragistics API Docs

Ignite UI for Angular Tree Grid - Documentation The Ignite UI Tree Grid displays and manipulates hierarchical data with consistent schema formatted as a table and provides features such as sorting, filtering, editing, column pinning, paging, column moving and hiding. Example:

Properties

actionStripComponents

actionStripComponents: IgcActionStripToken[]

addRowEmptyTemplate

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

addRowEmptyTemplate: (ctx: void) => React.ReactNode

advancedFilteringExpressionsTree

Gets/Sets the advanced filtering state.

advancedFilteringExpressionsTree: IgrFilteringExpressionsTree

allowAdvancedFiltering

Gets/Sets a value indicating whether the advanced filtering is enabled.

allowAdvancedFiltering: boolean

allowFiltering

Gets/Sets if the filtering is enabled.

allowFiltering: boolean

autoGenerate

Gets/Sets whether to auto-generate the columns.

autoGenerate: boolean

autoGenerateExclude

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

autoGenerateExclude: string[]

batchEditing

Gets/Sets whether the grid has batch editing enabled. When batch editing is enabled, changes are not made directly to the underlying data. Instead, they are stored as transactions, which can later be committed w/ the commit method.

batchEditing: boolean

cascadeOnDelete

Sets whether child records should be deleted when their parent gets deleted. By default it is set to true and deletes all children along with the parent.

cascadeOnDelete: boolean

cellMergeMode

Gets/Sets cell merge mode.

cellMergeMode: GridCellMergeMode

cellSelection

Gets/Sets cell selection mode.

cellSelection: GridSelectionMode

childDataKey

Sets the child data key of the TreeGridComponent.

childDataKey: string

clipboardOptions

Controls the copy behavior of the grid.

clipboardOptions: IgrClipboardOptions

columnList

columnList: IgrColumnComponent[]

columnSelection

Gets/Sets column selection mode

columnSelection: GridSelectionMode

columnWidth

Gets/Sets the default width of the columns.

columnWidth: string

data

Gets/Sets the array of data that populates the component.

data: any[]

dataCloneStrategy

Gets/Sets the data clone strategy of the grid when in edit mode.

dataCloneStrategy: IgrDataCloneStrategy

dragGhostCustomTemplate

Gets the custom template, if any, used for row drag ghost.

dragGhostCustomTemplate: (ctx: IgrGridRowDragGhostContext) => React.ReactNode

dragIndicatorIconTemplate

The custom template, if any, that should be used when rendering the row drag indicator icon

dragIndicatorIconTemplate: (ctx: IgrGridEmptyTemplateContext) => React.ReactNode

emptyFilteredGridMessage

Gets/Sets the message displayed when there are no records and the grid is filtered.

emptyFilteredGridMessage: string

emptyGridMessage

Get/Sets the message displayed when there are no records.

emptyGridMessage: string

emptyGridTemplate

Gets/Sets a custom template when empty.

emptyGridTemplate: (ctx: IgrGridTemplateContext) => React.ReactNode

excelStyleHeaderIconTemplate

Gets the excel style header icon.

excelStyleHeaderIconTemplate: (ctx: IgrGridHeaderTemplateContext) => React.ReactNode

expansionDepth

Sets the count of levels to be expanded in the TreeGridComponent. By default it is set to Infinity which means all levels would be expanded.

expansionDepth: number

expansionStates

Gets/Sets a list of key-value pairs [row ID, expansion state].

expansionStates: Map<any, boolean>

filteringExpressionsTree

Gets/Sets the filtering state.

filteringExpressionsTree: IgrFilteringExpressionsTree

filteringLogic

Gets/Sets the filtering logic of the GridComponent.

filteringLogic: FilteringLogic

filterMode

Gets/Sets the filter mode.

filterMode: FilterMode

filterStrategy

Gets/Sets the filtering strategy of the grid.

filterStrategy: IgrFilteringStrategy

foreignKey

Sets the foreign key of the TreeGridComponent.

foreignKey: string

hasChildrenKey

Sets the key indicating whether a row has children. This property is only used for load on demand scenarios.

hasChildrenKey: string

headerCollapsedIndicatorTemplate

Gets the row collapse indicator template.

headerCollapsedIndicatorTemplate: (ctx: IgrGridTemplateContext) => React.ReactNode

headerExpandedIndicatorTemplate

Gets the header expand indicator template.

headerExpandedIndicatorTemplate: (ctx: IgrGridTemplateContext) => React.ReactNode

headSelectorTemplate

Gets the header row selector template.

headSelectorTemplate: (ctx: IgrHeadSelectorTemplateContext) => React.ReactNode

height

Gets/Sets the height.

height: string

hideRowSelectors

Gets/Sets if the row selectors are hidden.

hideRowSelectors: boolean

id

Sets the value of the id attribute. If not provided it will be automatically generated.

id: string

isLoading

Gets/Sets whether the grid is going to show a loading indicator.

isLoading: boolean

loadChildrenOnDemand

Sets a callback for loading child rows on demand.

loadChildrenOnDemand: any

loadingGridTemplate

Gets/Sets a custom template when loading.

loadingGridTemplate: (ctx: IgrGridTemplateContext) => React.ReactNode

locale

Gets/Sets the locale.

locale: string

mergeStrategy

Gets/Sets the merge strategy of the grid.

mergeStrategy: IgrGridMergeStrategy

moving

Controls whether columns moving is enabled in the grid.

moving: boolean

outlet

Gets/Sets the outlet used to attach the grid's overlays to.

outlet: IgrOverlayOutletDirective

paginationComponents

paginationComponents: IgrPaginatorComponent[]

pagingMode

pagingMode: GridPagingMode

pinning

Gets/Sets the initial pinning configuration.

pinning: IgrPinningConfig

primaryKey

Gets/Sets the primary key.

primaryKey: string

processedRootRecords

Returns an array of processed (filtered and sorted) root ITreeGridRecords.

processedRootRecords: IgrTreeGridRecord[]

resourceStrings

Gets/Sets the resource strings.

resourceStrings: IgrGridResourceStrings

rootRecords

Returns an array of the root level ITreeGridRecords.

rootRecords: IgrTreeGridRecord[]

rowAddTextTemplate

Gets the row add text template.

rowAddTextTemplate: (ctx: IgrGridEmptyTemplateContext) => React.ReactNode

rowClasses

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:

rowClasses: any

rowCollapsedIndicatorTemplate

Gets the row collapse indicator template.

rowCollapsedIndicatorTemplate: (ctx: IgrGridRowTemplateContext) => React.ReactNode

rowDraggable

Gets/Sets whether rows can be moved.

rowDraggable: boolean

rowEditable

Gets/Sets whether the rows are editable.

rowEditable: boolean

rowEditActionsTemplate

Gets the row edit actions template.

rowEditActionsTemplate: (ctx: IgrGridRowEditActionsTemplateContext) => React.ReactNode

rowEditTextTemplate

Gets the row edit text template.

rowEditTextTemplate: (ctx: IgrGridRowEditTextTemplateContext) => React.ReactNode

rowExpandedIndicatorTemplate

Gets the row expand indicator template.

rowExpandedIndicatorTemplate: (ctx: IgrGridRowTemplateContext) => React.ReactNode

rowHeight

Gets/Sets the row height.

rowHeight: number

rowLoadingIndicatorTemplate

Template for the row loading indicator when load on demand is enabled.

rowLoadingIndicatorTemplate: (ctx: void) => React.ReactNode

rowSelection

Gets/Sets row selection mode

rowSelection: GridSelectionMode

rowSelectorTemplate

Gets the row selector template.

rowSelectorTemplate: (ctx: IgrRowSelectorTemplateContext) => React.ReactNode

rowStyles

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.

rowStyles: any

selectedRows

Gets/Sets the current selection state.

selectedRows: any[]

selectRowOnClick

Gets/Sets whether clicking over a row should select/deselect it

selectRowOnClick: boolean

shouldGenerate

Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid

shouldGenerate: boolean

showSummaryOnCollapse

Controls whether the summary row is visible when groupBy/parent row is collapsed.

showSummaryOnCollapse: boolean

snackbarDisplayTime

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

snackbarDisplayTime: number

sortAscendingHeaderIconTemplate

The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.

sortAscendingHeaderIconTemplate: (ctx: IgrGridHeaderTemplateContext) => React.ReactNode

sortDescendingHeaderIconTemplate

The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.

sortDescendingHeaderIconTemplate: (ctx: IgrGridHeaderTemplateContext) => React.ReactNode

sortHeaderIconTemplate

Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.

sortHeaderIconTemplate: (ctx: IgrGridHeaderTemplateContext) => React.ReactNode

sortingExpressions

Gets/Sets the sorting state.

sortingExpressions: IgrSortingExpression[]

sortingOptions

Gets/Sets the sorting options - single or multiple sorting. Accepts an ISortingOptions object with any of the mode properties.

sortingOptions: IgrSortingOptions

sortStrategy

Gets/Sets the sorting strategy of the grid.

sortStrategy: IgrGridSortingStrategy

summaryCalculationMode

Gets/Sets the summary calculation mode.

summaryCalculationMode: GridSummaryCalculationMode

summaryPosition

Gets/Sets the summary position.

summaryPosition: GridSummaryPosition

summaryRowHeight

Get/Set SummaryRow height

summaryRowHeight: number

toolbar: IgrGridToolbarComponent[]

totalRecords

Returns the total number of records.

totalRecords: number

validationTrigger

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

validationTrigger: GridValidationTrigger

width

Gets/Sets the width of the grid.

width: string

Accessors

columns

Gets an array of ColumnComponents.

get columns(): IgrColumnComponent[]

Returns IgrColumnComponent[]

dataRowList

A list of currently rendered GridRowComponent's.

get dataRowList(): IgrRowDirective[]

Returns IgrRowDirective[]

dataView

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

get dataView(): any[]

Returns any[]

defaultRowHeight

Gets the default row height.

get defaultRowHeight(): number

Returns number

filteredData

Returns an array of objects containing the filtered data.

get filteredData(): any

Returns any

filteredSortedData

Returns an array containing the filtered sorted data.

get filteredSortedData(): any[]

Returns any[]

hiddenColumnsCount

Gets the number of hidden columns.

get hiddenColumnsCount(): number

Returns number

lastSearchInfo

Represents the last search information.

get lastSearchInfo(): IgrSearchInfo

Returns IgrSearchInfo

pinnedColumns

Gets an array of the pinned ColumnComponents.

get pinnedColumns(): IgrColumnComponent[]

Returns IgrColumnComponent[]

pinnedColumnsCount

Gets the number of pinned columns.

get pinnedColumnsCount(): number

Returns number

pinnedEndColumns

Gets an array of the pinned to the right ColumnComponents.

get pinnedEndColumns(): IgrColumnComponent[]

Returns IgrColumnComponent[]

pinnedRows

Gets an array of the pinned RowComponents.

get pinnedRows(): IgrGridRowComponent[]

Returns IgrGridRowComponent[]

pinnedStartColumns

Gets an array of the pinned to the left ColumnComponents.

get pinnedStartColumns(): IgrColumnComponent[]

Returns IgrColumnComponent[]

rowList

A list of GridRowComponent.

get rowList(): IgrRowDirective[]

Returns IgrRowDirective[]

selectedCells

Returns an array of the selected GridCells.

get selectedCells(): IgrCellType[]

Returns IgrCellType[]

unpinnedColumns

Gets an array of unpinned ColumnComponents.

get unpinnedColumns(): IgrColumnComponent[]

Returns IgrColumnComponent[]

virtualizationState

Returns the state of the grid virtualization.

get virtualizationState(): IgrForOfState

Returns IgrForOfState

visibleColumns

Returns an array of visible ColumnComponents.

get visibleColumns(): IgrColumnComponent[]

Returns IgrColumnComponent[]

Methods

addRow

Creates a new TreeGridRowComponent with the given data. If a parentRowID is not specified, the newly created row would be added at the root level. Otherwise, it would be added as a child of the row whose primaryKey matches the specified parentRowID. If the parentRowID does not exist, an error would be thrown. ``

addRow(data: any, parentRowID: any): void

Parameters

data: any
parentRowID: any

Returns void

addRow

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

addRow(data: any): void

Parameters

data: any

Returns void

Example

this.grid1.addRow(record);

beginAddRowById

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

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

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

Enters add mode by spawning the UI with the context of the specified row by index.

beginAddRowByIndex(index: number, asChild: boolean): void

Parameters

index: number
The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
asChild: boolean
Whether the record should be added as a child. Only applicable to igxTreeGrid.

Returns void

Example

this.grid.beginAddRowByIndex(10);
this.grid.beginAddRowByIndex(10, true);
this.grid.beginAddRowByIndex(null);

beginAddRowByIndex

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

beginAddRowByIndex(index: number): void

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

Deselect selected cells.

clearCellSelection(): void

Returns void

Example

this.grid.clearCellSelection();

clearFilter

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

clearFilter(name: string): void

Parameters

name: string

Returns void

Example

this.grid.clearFilter();

clearSearch

Removes all the highlights in the cell.

clearSearch(): void

Returns void

Example

this.grid.clearSearch();

clearSort

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

clearSort(name: string): void

Parameters

name: string

Returns void

Example

this.grid.clearSort();

closeAdvancedFilteringDialog

Closes the advanced filtering dialog.

closeAdvancedFilteringDialog(applyChanges: boolean): void

Parameters

applyChanges: boolean
indicates whether the changes should be applied

Returns void

collapseAll

Collapses all rows.

collapseAll(): void

Returns void

collapseAll

Collapses all rows.

collapseAll(): void

Returns void

Example

this.grid.collapseAll();

collapseRow

Collapses the row by its id.

collapseRow(rowID: any): void

Parameters

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

Returns void

Example

this.grid.collapseRow(rowID);

deleteRow

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

deleteRow(rowSelector: any): any

Parameters

rowSelector: any

Returns any

Example

this.grid1.deleteRow(0);

deselectAllColumns

Deselects all columns

deselectAllColumns(): void

Returns void

Example

this.grid.deselectAllColumns();

deselectAllRows

Deselects all rows

deselectAllRows(onlyFilterData: boolean): void

Parameters

onlyFilterData: boolean

Returns void

Example

this.grid.deselectAllRows();

deselectColumns

Deselect specified columns by field.

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

Parameters

columns: string[] | IgrColumnComponent[]

Returns void

Example

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

deselectRows

Deselect specified rows by ID.

deselectRows(rowIDs: any[]): void

Parameters

rowIDs: any[]

Returns void

Example

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

disableSummaries

Disable summaries for the specified column.

disableSummaries(rest: any[]): void

Parameters

rest: any[]

Returns void

Example

grid.disableSummaries('ProductName');

enableSummaries

Enables summaries for the specified column and applies your customSummary.

enableSummaries(rest: any[]): void

Parameters

rest: any[]

Returns void

Example

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

Enable summaries for the listed columns.

endEdit

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

endEdit(commit: boolean, evt: any): boolean

Parameters

commit: boolean
evt: any

Returns boolean

expandAll

Expands all rows. ``

expandAll(): void

Returns void

expandAll

Expands all rows.

expandAll(): void

Returns void

Example

this.grid.expandAll();

expandRow

Expands the row by its id.

expandRow(rowID: any): void

Parameters

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

Returns void

Example

this.grid.expandRow(rowID);

filter

Filters a single ColumnComponent.

filter(name: string, value: any, conditionOrExpressionTree: IgrFilteringExpressionsTree | IgrFilteringOperation, ignoreCase: boolean): void

Parameters

name: string
value: any
conditionOrExpressionTree: IgrFilteringExpressionsTree | IgrFilteringOperation
ignoreCase: boolean

Returns void

filterGlobal

Filters all the ColumnComponent in the GridComponent with the same condition.

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

Parameters

value: any
condition: any
ignoreCase: any

Returns void

findNext

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

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

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

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

Returns a CellType object that matches the conditions.

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

Parameters

rowIndex: number
columnField: string

Returns IgrCellType

Example

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

getCellByKey

Returns a CellType object that matches the conditions.

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

Parameters

rowSelector: any
match any rowID
columnField: string

Returns IgrCellType

Example

grid.getCellByKey(1, 'index');

getColumnByName

Returns the ColumnComponent by field name.

getColumnByName(name: string): IgrColumnComponent

Parameters

name: string

Returns IgrColumnComponent

Example

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

getColumnByVisibleIndex

getColumnByVisibleIndex(index: number): IgrColumnComponent

Parameters

index: number

Returns IgrColumnComponent

getDefaultExpandState

getDefaultExpandState(record: IgrTreeGridRecord): boolean

Parameters

record: IgrTreeGridRecord

Returns boolean

getHeaderGroupWidth

Gets the width to be set on GridHeaderGroupComponent.

getHeaderGroupWidth(column: IgrColumnComponent): string

Parameters

column: IgrColumnComponent

Returns string

getNextCell

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

getNextCell(currRowIndex: number, curVisibleColIndex: number, callback: any): IgrCellPosition

Parameters

currRowIndex: number
curVisibleColIndex: number
callback: any

Returns IgrCellPosition

Example

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

getPinnedEndWidth

Gets calculated width of the pinned areas.

getPinnedEndWidth(takeHidden: boolean): void

Parameters

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

Returns void

Example

const pinnedWidth = this.grid.getPinnedEndWidth();

getPinnedStartWidth

Gets calculated width of the pinned areas.

getPinnedStartWidth(takeHidden: boolean): void

Parameters

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

Returns void

Example

const pinnedWidth = this.grid.getPinnedStartWidth();

getPreviousCell

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

getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback: any): IgrCellPosition

Parameters

currRowIndex: number
curVisibleColIndex: number
callback: any

Returns IgrCellPosition

Example

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

getRowByIndex

Returns the TreeGridRow by index.

getRowByIndex(index: number): IgrRowType

Parameters

index: number

Returns IgrRowType

Example

const myRow = treeGrid.getRowByIndex(1);

getRowByKey

Returns the RowType object by the specified primary key.

getRowByKey(key: any): IgrRowType

Parameters

key: any

Returns IgrRowType

Example

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

getRowData

Returns the data that is contained in the row component.

getRowData(rowSelector: any): any

Parameters

rowSelector: any
correspond to rowID

Returns any

Example

const data = grid.getRowData(94741);

getSelectedColumnsData

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

getSelectedColumnsData(formatters: boolean, headers: boolean): void

Parameters

formatters: boolean
headers: boolean

Returns void

getSelectedData

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

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

Parameters

formatters: boolean
headers: boolean

Returns any[]

getSelectedData

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

getSelectedData(formatters: boolean, headers: boolean): void

Parameters

formatters: boolean
headers: boolean

Returns void

getSelectedRanges

Get the currently selected ranges in the grid.

getSelectedRanges(): IgrGridSelectionRange[]

Returns IgrGridSelectionRange[]

isRecordPinnedByIndex

Returns whether the record is pinned or not.

isRecordPinnedByIndex(rowIndex: number): void

Parameters

rowIndex: number
Index of the record in the filteredSortedData collection.

Returns void

markForCheck

Triggers change detection for the GridComponent. 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: ``

markForCheck(): void

Returns void

Example

grid.markForCheck();

moveColumn

Places a column before or after the specified target column.

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

Parameters

column: IgrColumnComponent
target: IgrColumnComponent
pos: DropPosition

Returns void

Example

grid.moveColumn(column, target);

navigateTo

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

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

Parameters

rowIndex: number
visibleColIndex: number
cb: any

Returns void

Example

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

openAdvancedFilteringDialog

Opens the advanced filtering dialog.

openAdvancedFilteringDialog(overlaySettings: IgrOverlaySettings): void

Parameters

overlaySettings: IgrOverlaySettings

Returns void

pinColumn

Pins a column by field name.

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

Parameters

columnName: string
index: number
pinningPosition: ColumnPinningPosition

Returns boolean

Example

this.grid.pinColumn("ID");

pinRow

Pin the row by its id.

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

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);

pinRow

Pin the row by its id.

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

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.
row: IgrRowType

Returns boolean

Example

this.grid.pinRow(rowID);

recalculateAutoSizes

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

recalculateAutoSizes(): void

Returns void

Example

this.grid1.recalculateAutoSizes();

reflow

Recalculates grid width/height dimensions.

reflow(): void

Returns void

Example

this.grid.reflow();

refreshSearch

Reapplies the existing search.

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

Parameters

updateActiveInfo: boolean
endEdit: boolean

Returns number

Example

this.grid.refreshSearch();

selectAllColumns

Selects all columns

selectAllColumns(): void

Returns void

Example

this.grid.deselectAllColumns();

selectAllRows

Selects all rows

selectAllRows(onlyFilterData: boolean): void

Parameters

onlyFilterData: boolean

Returns void

Example

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

selectColumns

Select specified columns.

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

Parameters

columns: string[] | IgrColumnComponent[]
clearCurrentSelection: boolean
if true clears the current selection

Returns void

Example

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

selectedColumns

Get current selected columns.

selectedColumns(): IgrColumnComponent[]

Returns IgrColumnComponent[]

Example

Returns an array with selected columns

const selectedColumns = this.grid.selectedColumns();

selectRange

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

selectRange(arg: IgrGridSelectionRange[]): void

Parameters

arg: IgrGridSelectionRange[]

Returns void

selectRows

Select specified rows by ID.

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

Parameters

rowIDs: any[]
clearCurrentSelection: boolean
if true clears the current selection

Returns void

Example

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

sort

Sort a single ColumnComponent.

sort(expression: IgrSortingExpression[]): void

Parameters

expression: IgrSortingExpression[]

Returns void

Example

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

toggleColumnVisibility

Toggles the specified column's visibility.

toggleColumnVisibility(args: IgrColumnVisibilityChangedEventArgs): void

Parameters

args: IgrColumnVisibilityChangedEventArgs

Returns void

Example

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

toggleRow

Toggles the row by its id.

toggleRow(rowID: any): void

Parameters

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

Returns void

Example

this.grid.toggleRow(rowID);

unpinColumn

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

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

Parameters

columnName: string
index: number

Returns boolean

Example

this.grid.pinColumn("ID");

unpinRow

Unpin the row by its id.

unpinRow(rowID: any): boolean

Parameters

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

Returns boolean

Example

this.grid.unpinRow(rowID);

unpinRow

Unpin the row by its id.

unpinRow(rowID: any, row: IgrRowType): boolean

Parameters

rowID: any
The row id - primaryKey value or the data record instance.
row: IgrRowType

Returns boolean

Example

this.grid.unpinRow(rowID);

updateCell

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

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

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

Updates the GridRowComponent

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

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);

Events

onActiveNodeChange

onActiveNodeChange(args: CustomEvent<IgrActiveNodeChangeEventArgs>): void

Parameters

args: CustomEvent<IgrActiveNodeChangeEventArgs>

Returns void

onAdvancedFilteringExpressionsTreeChange

onAdvancedFilteringExpressionsTreeChange(args: CustomEvent<IgrFilteringExpressionsTree>): void

Parameters

args: CustomEvent<IgrFilteringExpressionsTree>

Returns void

onCellClick

onCellClick(args: CustomEvent<IgrGridCellEventArgs>): void

Parameters

args: CustomEvent<IgrGridCellEventArgs>

Returns void

onCellEdit

onCellEdit(args: CustomEvent<IgrGridEditEventArgs>): void

Parameters

args: CustomEvent<IgrGridEditEventArgs>

Returns void

onCellEditDone

onCellEditDone(args: CustomEvent<IgrGridEditDoneEventArgs>): void

Parameters

args: CustomEvent<IgrGridEditDoneEventArgs>

Returns void

onCellEditEnter

onCellEditEnter(args: CustomEvent<IgrGridEditEventArgs>): void

Parameters

args: CustomEvent<IgrGridEditEventArgs>

Returns void

onCellEditExit

onCellEditExit(args: CustomEvent<IgrGridEditDoneEventArgs>): void

Parameters

args: CustomEvent<IgrGridEditDoneEventArgs>

Returns void

onColumnInit

onColumnInit(args: CustomEvent<IgrColumnComponent>): void

Parameters

args: CustomEvent<IgrColumnComponent>

Returns void

onColumnMoving

onColumnMoving(args: CustomEvent<IgrColumnMovingEventArgs>): void

Parameters

args: CustomEvent<IgrColumnMovingEventArgs>

Returns void

onColumnMovingEnd

onColumnMovingEnd(args: CustomEvent<IgrColumnMovingEndEventArgs>): void

Parameters

args: CustomEvent<IgrColumnMovingEndEventArgs>

Returns void

onColumnMovingStart

onColumnMovingStart(args: CustomEvent<IgrColumnMovingStartEventArgs>): void

Parameters

args: CustomEvent<IgrColumnMovingStartEventArgs>

Returns void

onColumnPin

onColumnPin(args: CustomEvent<IgrPinColumnCancellableEventArgs>): void

Parameters

args: CustomEvent<IgrPinColumnCancellableEventArgs>

Returns void

onColumnPinned

onColumnPinned(args: CustomEvent<IgrPinColumnEventArgs>): void

Parameters

args: CustomEvent<IgrPinColumnEventArgs>

Returns void

onColumnResized

onColumnResized(args: CustomEvent<IgrColumnResizeEventArgs>): void

Parameters

args: CustomEvent<IgrColumnResizeEventArgs>

Returns void

onColumnsAutogenerated

onColumnsAutogenerated(args: CustomEvent<IgrColumnsAutoGeneratedEventArgs>): void

Parameters

args: CustomEvent<IgrColumnsAutoGeneratedEventArgs>

Returns void

onColumnSelectionChanging

onColumnSelectionChanging(args: CustomEvent<IgrColumnSelectionEventArgs>): void

Parameters

args: CustomEvent<IgrColumnSelectionEventArgs>

Returns void

onColumnVisibilityChanged

onColumnVisibilityChanged(args: CustomEvent<IgrColumnVisibilityChangedEventArgs>): void

Parameters

args: CustomEvent<IgrColumnVisibilityChangedEventArgs>

Returns void

onColumnVisibilityChanging

onColumnVisibilityChanging(args: CustomEvent<IgrColumnVisibilityChangingEventArgs>): void

Parameters

args: CustomEvent<IgrColumnVisibilityChangingEventArgs>

Returns void

onContextMenu

onContextMenu(args: CustomEvent<IgrGridContextMenuEventArgs>): void

Parameters

args: CustomEvent<IgrGridContextMenuEventArgs>

Returns void

onDataChanged

onDataChanged(args: CustomEvent<IgrForOfDataChangeEventArgs>): void

Parameters

args: CustomEvent<IgrForOfDataChangeEventArgs>

Returns void

onDataChanging

onDataChanging(args: CustomEvent<IgrForOfDataChangeEventArgs>): void

Parameters

args: CustomEvent<IgrForOfDataChangeEventArgs>

Returns void

onDoubleClick

onDoubleClick(args: CustomEvent<IgrGridCellEventArgs>): void

Parameters

args: CustomEvent<IgrGridCellEventArgs>

Returns void

onExpansionStatesChange

onExpansionStatesChange(args: CustomEvent<Map<any, boolean>>): void

Parameters

args: CustomEvent<Map<any, boolean>>

Returns void

onFiltering

onFiltering(args: CustomEvent<IgrFilteringEventArgs>): void

Parameters

args: CustomEvent<IgrFilteringEventArgs>

Returns void

onFilteringDone

onFilteringDone(args: CustomEvent<IgrFilteringExpressionsTree>): void

Parameters

args: CustomEvent<IgrFilteringExpressionsTree>

Returns void

onFilteringExpressionsTreeChange

onFilteringExpressionsTreeChange(args: CustomEvent<IgrFilteringExpressionsTree>): void

Parameters

args: CustomEvent<IgrFilteringExpressionsTree>

Returns void

onFormGroupCreated

onFormGroupCreated(args: CustomEvent<IgrGridFormGroupCreatedEventArgs>): void

Parameters

args: CustomEvent<IgrGridFormGroupCreatedEventArgs>

Returns void

onGridCopy

onGridCopy(args: CustomEvent<IgrGridClipboardEvent>): void

Parameters

args: CustomEvent<IgrGridClipboardEvent>

Returns void

onGridKeydown

onGridKeydown(args: CustomEvent<IgrGridKeydownEventArgs>): void

Parameters

args: CustomEvent<IgrGridKeydownEventArgs>

Returns void

onGridScroll

onGridScroll(args: CustomEvent<IgrGridScrollEventArgs>): void

Parameters

args: CustomEvent<IgrGridScrollEventArgs>

Returns void

onRangeSelected

onRangeSelected(args: CustomEvent<IgrGridSelectionRange>): void

Parameters

args: CustomEvent<IgrGridSelectionRange>

Returns void

onRendered

onRendered(args: CustomEvent<boolean>): void

Parameters

args: CustomEvent<boolean>

Returns void

onRowAdd

onRowAdd(args: CustomEvent<IgrRowDataCancelableEventArgs>): void

Parameters

args: CustomEvent<IgrRowDataCancelableEventArgs>

Returns void

onRowAdded

onRowAdded(args: CustomEvent<IgrRowDataEventArgs>): void

Parameters

args: CustomEvent<IgrRowDataEventArgs>

Returns void

onRowClick

onRowClick(args: CustomEvent<IgrGridRowEventArgs>): void

Parameters

args: CustomEvent<IgrGridRowEventArgs>

Returns void

onRowDelete

onRowDelete(args: CustomEvent<IgrRowDataCancelableEventArgs>): void

Parameters

args: CustomEvent<IgrRowDataCancelableEventArgs>

Returns void

onRowDeleted

onRowDeleted(args: CustomEvent<IgrRowDataEventArgs>): void

Parameters

args: CustomEvent<IgrRowDataEventArgs>

Returns void

onRowDragEnd

onRowDragEnd(args: CustomEvent<IgrRowDragEndEventArgs>): void

Parameters

args: CustomEvent<IgrRowDragEndEventArgs>

Returns void

onRowDragStart

onRowDragStart(args: CustomEvent<IgrRowDragStartEventArgs>): void

Parameters

args: CustomEvent<IgrRowDragStartEventArgs>

Returns void

onRowEdit

onRowEdit(args: CustomEvent<IgrGridEditEventArgs>): void

Parameters

args: CustomEvent<IgrGridEditEventArgs>

Returns void

onRowEditDone

onRowEditDone(args: CustomEvent<IgrGridEditDoneEventArgs>): void

Parameters

args: CustomEvent<IgrGridEditDoneEventArgs>

Returns void

onRowEditEnter

onRowEditEnter(args: CustomEvent<IgrGridEditEventArgs>): void

Parameters

args: CustomEvent<IgrGridEditEventArgs>

Returns void

onRowEditExit

onRowEditExit(args: CustomEvent<IgrGridEditDoneEventArgs>): void

Parameters

args: CustomEvent<IgrGridEditDoneEventArgs>

Returns void

onRowPinned

onRowPinned(args: CustomEvent<IgrPinRowEventArgs>): void

Parameters

args: CustomEvent<IgrPinRowEventArgs>

Returns void

onRowPinning

onRowPinning(args: CustomEvent<IgrPinRowEventArgs>): void

Parameters

args: CustomEvent<IgrPinRowEventArgs>

Returns void

onRowSelectionChanging

onRowSelectionChanging(args: CustomEvent<IgrRowSelectionEventArgs>): void

Parameters

args: CustomEvent<IgrRowSelectionEventArgs>

Returns void

onRowToggle

onRowToggle(args: CustomEvent<IgrRowToggleEventArgs>): void

Parameters

args: CustomEvent<IgrRowToggleEventArgs>

Returns void

onSelected

onSelected(args: CustomEvent<IgrGridCellEventArgs>): void

Parameters

args: CustomEvent<IgrGridCellEventArgs>

Returns void

onSelectedRowsChange

onSelectedRowsChange(args: CustomEvent<any[]>): void

Parameters

args: CustomEvent<any[]>

Returns void

onSorting

onSorting(args: CustomEvent<IgrSortingEventArgs>): void

Parameters

args: CustomEvent<IgrSortingEventArgs>

Returns void

onSortingDone

onSortingDone(args: CustomEvent<IgrSortingExpression[]>): void

Parameters

args: CustomEvent<IgrSortingExpression[]>

Returns void

onSortingExpressionsChange

onSortingExpressionsChange(args: CustomEvent<IgrSortingExpression[]>): void

Parameters

args: CustomEvent<IgrSortingExpression[]>

Returns void

onToolbarExporting

onToolbarExporting(args: CustomEvent<IgrGridToolbarExportEventArgs>): void

Parameters

args: CustomEvent<IgrGridToolbarExportEventArgs>

Returns void

onValidationStatusChange

onValidationStatusChange(args: CustomEvent<IgrGridValidationStatusEventArgs>): void

Parameters

args: CustomEvent<IgrGridValidationStatusEventArgs>