Grid provides a way to present and manipulate tabular data.
Igx Module
IgxGridModule
Igx Theme
igx-grid-theme
Igx Keywords
grid, table
Igx Group
Grids & Lists

Remarks

[object Object]

Constructors

Section titled "Constructors"

IgcGridComponent

new IgcGridComponent(args: any[]): IgcGridComponent

Returns IgcGridComponent

Properties

Section titled "Properties"

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: string

addRowEmptyTemplate

Section titled "addRowEmptyTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

addRowEmptyTemplate: IgcRenderFunction<void>

advancedFilteringExpressionsTree

Section titled "advancedFilteringExpressionsTree"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

advancedFilteringExpressionsTree: IgcFilteringExpressionsTree

allowAdvancedFiltering

Section titled "allowAdvancedFiltering"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

allowAdvancedFiltering: boolean

allowFiltering

Section titled "allowFiltering"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

allowFiltering: boolean

autoGenerate

Section titled "autoGenerate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

autoGenerate: boolean

autoGenerateExclude

Section titled "autoGenerateExclude"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

autoGenerateExclude: string[]

batchEditing

Section titled "batchEditing"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

batchEditing: boolean

cellMergeMode

Section titled "cellMergeMode"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

cellMergeMode: GridCellMergeMode

cellSelection

Section titled "cellSelection"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

cellSelection: GridSelectionMode

clipboardOptions

Section titled "clipboardOptions"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

clipboardOptions: IgcClipboardOptions

columnSelection

Section titled "columnSelection"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

columnSelection: GridSelectionMode

columnWidth

Section titled "columnWidth"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

columnWidth: string

data

Section titled "data" 
data: any[]

dataCloneStrategy

Section titled "dataCloneStrategy"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

dataCloneStrategy: IgcDataCloneStrategy

detailTemplate

Section titled "detailTemplate" 
detailTemplate: IgcRenderFunction<IgcGridMasterDetailContext>

dragGhostCustomTemplate

Section titled "dragGhostCustomTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

dragGhostCustomTemplate: IgcRenderFunction<IgcGridRowDragGhostContext>

dragIndicatorIconTemplate

Section titled "dragIndicatorIconTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

dragIndicatorIconTemplate: IgcRenderFunction<IgcGridEmptyTemplateContext>

dropAreaMessage

Section titled "dropAreaMessage" 
dropAreaMessage: string

dropAreaTemplate

Section titled "dropAreaTemplate" 
dropAreaTemplate: IgcRenderFunction<void>

emptyFilteredGridMessage

Section titled "emptyFilteredGridMessage"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

emptyFilteredGridMessage: string

emptyGridMessage

Section titled "emptyGridMessage"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

emptyGridMessage: string

emptyGridTemplate

Section titled "emptyGridTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

emptyGridTemplate: IgcRenderFunction<IgcGridTemplateContext>

excelStyleHeaderIconTemplate

Section titled "excelStyleHeaderIconTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

excelStyleHeaderIconTemplate: IgcRenderFunction<IgcGridHeaderTemplateContext>

expansionStates

Section titled "expansionStates"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

expansionStates: Map<any, boolean>

filteringExpressionsTree

Section titled "filteringExpressionsTree"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

filteringExpressionsTree: IgcFilteringExpressionsTree

filteringLogic

Section titled "filteringLogic"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

filteringLogic: FilteringLogic

filterMode

Section titled "filterMode"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

filterMode: FilterMode

filterStrategy

Section titled "filterStrategy"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

filterStrategy: IgcFilteringStrategy

groupByRowSelectorTemplate

Section titled "groupByRowSelectorTemplate" 
groupByRowSelectorTemplate: IgcRenderFunction<IgcGroupByRowSelectorTemplateContext>

groupingExpansionState

Section titled "groupingExpansionState" 
groupingExpansionState: IgcGroupByExpandState[]

groupingExpressions

Section titled "groupingExpressions" 
groupingExpressions: IgcGroupingExpression[]

groupRowTemplate

Section titled "groupRowTemplate" 
groupRowTemplate: IgcRenderFunction<IgcGroupByRowTemplateContext>

groupsExpanded

Section titled "groupsExpanded" 
groupsExpanded: boolean

groupStrategy

Section titled "groupStrategy" 
groupStrategy: IgcGridGroupingStrategy

headerCollapsedIndicatorTemplate

Section titled "headerCollapsedIndicatorTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

headerCollapsedIndicatorTemplate: IgcRenderFunction<IgcGridTemplateContext>

headerExpandedIndicatorTemplate

Section titled "headerExpandedIndicatorTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

headerExpandedIndicatorTemplate: IgcRenderFunction<IgcGridTemplateContext>

headSelectorTemplate

Section titled "headSelectorTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

headSelectorTemplate: IgcRenderFunction<IgcHeadSelectorTemplateContext>

height

Section titled "height"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

height: string

hideGroupedColumns

Section titled "hideGroupedColumns" 
hideGroupedColumns: boolean

hideRowSelectors

Section titled "hideRowSelectors"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

hideRowSelectors: boolean

id

Section titled "id" 
id: string

isLoading

Section titled "isLoading"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

isLoading: boolean

loadingGridTemplate

Section titled "loadingGridTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

loadingGridTemplate: IgcRenderFunction<IgcGridTemplateContext>

locale

Section titled "locale"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

locale: string

mergeStrategy

Section titled "mergeStrategy"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

mergeStrategy: IgcGridMergeStrategy

moving

Section titled "moving"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

moving: boolean

outlet

Section titled "outlet"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

outlet: IgcOverlayOutletDirective

pagingMode

Section titled "pagingMode"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

pagingMode: GridPagingMode

pinning

Section titled "pinning"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

pinning: IgcPinningConfig

primaryKey

Section titled "primaryKey"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

primaryKey: string

resourceStrings

Section titled "resourceStrings"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

resourceStrings: IgcGridResourceStrings

rowAddTextTemplate

Section titled "rowAddTextTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowAddTextTemplate: IgcRenderFunction<IgcGridEmptyTemplateContext>

rowClasses

Section titled "rowClasses"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowClasses: any

rowCollapsedIndicatorTemplate

Section titled "rowCollapsedIndicatorTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowCollapsedIndicatorTemplate: IgcRenderFunction<IgcGridRowTemplateContext>

rowDraggable

Section titled "rowDraggable"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowDraggable: boolean

rowEditable

Section titled "rowEditable"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowEditable: boolean

rowEditActionsTemplate

Section titled "rowEditActionsTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowEditActionsTemplate: IgcRenderFunction<IgcGridRowEditActionsTemplateContext>

rowEditTextTemplate

Section titled "rowEditTextTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowEditTextTemplate: IgcRenderFunction<IgcGridRowEditTextTemplateContext>

rowExpandedIndicatorTemplate

Section titled "rowExpandedIndicatorTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowExpandedIndicatorTemplate: IgcRenderFunction<IgcGridRowTemplateContext>

rowHeight

Section titled "rowHeight"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowHeight: number

rowSelection

Section titled "rowSelection"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowSelection: GridSelectionMode

rowSelectorTemplate

Section titled "rowSelectorTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowSelectorTemplate: IgcRenderFunction<IgcRowSelectorTemplateContext>

rowStyles

Section titled "rowStyles"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

rowStyles: any

selectedRows

Section titled "selectedRows"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

selectedRows: any[]

selectRowOnClick

Section titled "selectRowOnClick"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

selectRowOnClick: boolean

shouldGenerate

Section titled "shouldGenerate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

shouldGenerate: boolean

showGroupArea

Section titled "showGroupArea" 
showGroupArea: boolean

showSummaryOnCollapse

Section titled "showSummaryOnCollapse"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

showSummaryOnCollapse: boolean

snackbarDisplayTime

Section titled "snackbarDisplayTime"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

snackbarDisplayTime: number

sortAscendingHeaderIconTemplate

Section titled "sortAscendingHeaderIconTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

sortAscendingHeaderIconTemplate: IgcRenderFunction<IgcGridHeaderTemplateContext>

sortDescendingHeaderIconTemplate

Section titled "sortDescendingHeaderIconTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

sortDescendingHeaderIconTemplate: IgcRenderFunction<IgcGridHeaderTemplateContext>

sortHeaderIconTemplate

Section titled "sortHeaderIconTemplate"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

sortHeaderIconTemplate: IgcRenderFunction<IgcGridHeaderTemplateContext>

sortingExpressions

Section titled "sortingExpressions"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

sortingExpressions: IgcSortingExpression[]

sortingOptions

Section titled "sortingOptions"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

sortingOptions: IgcSortingOptions

sortStrategy

Section titled "sortStrategy"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

sortStrategy: IgcGridSortingStrategy

summaryCalculationMode

Section titled "summaryCalculationMode"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

summaryCalculationMode: GridSummaryCalculationMode

summaryPosition

Section titled "summaryPosition"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

summaryPosition: GridSummaryPosition

summaryRowHeight

Section titled "summaryRowHeight"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

summaryRowHeight: number

totalItemCount

Section titled "totalItemCount" 
totalItemCount: number

totalRecords

Section titled "totalRecords"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

totalRecords: number

validationTrigger

Section titled "validationTrigger"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

validationTrigger: GridValidationTrigger

width

Section titled "width"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

width: string

Accessors

Section titled "Accessors"

actionStripComponents

Section titled "actionStripComponents"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

get actionStripComponents(): IgcActionStripToken[]

Returns IgcActionStripToken[]

columnList

Section titled "columnList"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

get columnList(): IgcColumnComponent[]

Returns IgcColumnComponent[]

columns

Section titled "columns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Gets an array of ColumnComponents.

get columns(): IgcColumnComponent[]

Example

const colums = this.grid.columns.

Returns IgcColumnComponent[]

dataRowList

Section titled "dataRowList"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

A list of currently rendered GridRowComponent's.

get dataRowList(): IgcRowDirective[]

Example

const dataList = this.grid.dataRowList;

Returns IgcRowDirective[]

dataView

Section titled "dataView"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

get dataView(): any[]

Example

const dataView = this.grid.dataView;

Returns any[]

defaultRowHeight

Section titled "defaultRowHeight"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Gets the default row height.

get defaultRowHeight(): number

Example

const rowHeigh = this.grid.defaultRowHeight;

Returns number

filteredData

Section titled "filteredData"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Returns an array of objects containing the filtered data.

get filteredData(): any

Example

let filteredData = this.grid.filteredData;

Returns any

filteredSortedData

Section titled "filteredSortedData"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Returns an array containing the filtered sorted data.

get filteredSortedData(): any[]

Example

const filteredSortedData = this.grid1.filteredSortedData;

Returns any[]

groupsRecords

Section titled "groupsRecords"

Gets the hierarchical representation of the group by records.

get groupsRecords(): IgcGroupByRecord[]

Example

let groupRecords = this.grid.groupsRecords;

Returns IgcGroupByRecord[]

hiddenColumnsCount

Section titled "hiddenColumnsCount"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Gets the number of hidden columns.

get hiddenColumnsCount(): number

Example

const hiddenCol = this.grid.hiddenColumnsCount;
``

Returns number

lastSearchInfo

Section titled "lastSearchInfo"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Represents the last search information.

get lastSearchInfo(): IgcSearchInfo

Returns IgcSearchInfo

paginationComponents

Section titled "paginationComponents"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

get paginationComponents(): IgcPaginatorComponent[]

Returns IgcPaginatorComponent[]

pinnedColumns

Section titled "pinnedColumns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Gets an array of the pinned ColumnComponents.

get pinnedColumns(): IgcColumnComponent[]

Example

const pinnedColumns = this.grid.pinnedColumns.

Returns IgcColumnComponent[]

pinnedColumnsCount

Section titled "pinnedColumnsCount"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Gets the number of pinned columns.

get pinnedColumnsCount(): number

Returns number

pinnedEndColumns

Section titled "pinnedEndColumns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Gets an array of the pinned to the right ColumnComponents.

get pinnedEndColumns(): IgcColumnComponent[]

Example

const pinnedColumns = this.grid.pinnedEndColumns.

Returns IgcColumnComponent[]

pinnedRows

Section titled "pinnedRows"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Gets an array of the pinned RowComponents.

get pinnedRows(): IgcGridRowComponent[]

Example

const pinnedRow = this.grid.pinnedRows;

Returns IgcGridRowComponent[]

pinnedStartColumns

Section titled "pinnedStartColumns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Gets an array of the pinned to the left ColumnComponents.

get pinnedStartColumns(): IgcColumnComponent[]

Example

const pinnedColumns = this.grid.pinnedStartColumns.

Returns IgcColumnComponent[]

rowList

Section titled "rowList"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

A list of GridRowComponent.

get rowList(): IgcRowDirective[]

Example

const rowList = this.grid.rowList;

Returns IgcRowDirective[]

selectedCells

Section titled "selectedCells"

Returns an array of the selected GridCells.

get selectedCells(): IgcCellType[]

Example

const selectedCells = this.grid.selectedCells;

Returns IgcCellType[]

toolbar

Section titled "toolbar"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

transactions

Section titled "transactions"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Get transactions service for the grid.

get transactions(): TransactionService

Returns TransactionService

unpinnedColumns

Section titled "unpinnedColumns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Gets an array of unpinned ColumnComponents.

get unpinnedColumns(): IgcColumnComponent[]

Example

const unpinnedColumns = this.grid.unpinnedColumns.

Returns IgcColumnComponent[]

virtualizationState

Section titled "virtualizationState"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Returns the state of the grid virtualization.

get virtualizationState(): IgcForOfState

Example

const gridVirtState = this.grid1.virtualizationState;

Returns IgcForOfState

visibleColumns

Section titled "visibleColumns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Returns an array of visible ColumnComponents.

get visibleColumns(): IgcColumnComponent[]

Example

const visibleColumns = this.grid.visibleColumns.

Returns IgcColumnComponent[]

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

addRow

Section titled "addRow"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "beginAddRowById"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "beginAddRowByIndex"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "clearCellSelection"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Deselect selected cells.

clearCellSelection(): void

Returns void

Example

this.grid.clearCellSelection();

clearFilter

Section titled "clearFilter"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

clearGrouping

Section titled "clearGrouping"

Clears grouping for particular column, array of columns or all columns.

clearGrouping(name: string): void

Parameters

  • name: string

    Name of column or array of column names to be ungrouped.

Returns void

Example

this.grid.clearGrouping(); //clears all grouping
this.grid.clearGrouping("ID"); //ungroups a single column
this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns

clearSearch

Section titled "clearSearch"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Removes all the highlights in the cell.

clearSearch(): void

Returns void

Example

this.grid.clearSearch();

clearSort

Section titled "clearSort"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "closeAdvancedFilteringDialog"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Closes the advanced filtering dialog.

closeAdvancedFilteringDialog(applyChanges: boolean): void

Parameters

  • applyChanges: boolean

    indicates whether the changes should be applied

Returns void

collapseAll

Section titled "collapseAll"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Collapses all rows.

collapseAll(): void

Returns void

Example

this.grid.collapseAll();

collapseRow

Section titled "collapseRow"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "deleteRow"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "deselectAllColumns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Deselects all columns

deselectAllColumns(): void

Returns void

Example

this.grid.deselectAllColumns();

deselectAllRows

Section titled "deselectAllRows"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Deselects all rows

deselectAllRows(onlyFilterData: boolean): void

Parameters

  • onlyFilterData: boolean

Returns void

Example

this.grid.deselectAllRows();

deselectColumns

Section titled "deselectColumns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Deselect specified columns by field.

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

Parameters

Returns void

Example

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

deselectRows

Section titled "deselectRows"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Deselect specified rows by ID.

deselectRows(rowIDs: any[]): void

Parameters

  • rowIDs: any[]

Returns void

Example

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

deselectRowsInGroup

Section titled "deselectRowsInGroup"

Deselect all rows within a group.

deselectRowsInGroup(groupRow: IgcGroupByRecord): void

Parameters

Returns void

Example

public groupRow: IGroupByRecord;
this.grid.deselectRowsInGroup(this.groupRow);

disableSummaries

Section titled "disableSummaries"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Disable summaries for the specified column.

disableSummaries(rest: any[]): void

Parameters

  • rest: any[]

Returns void

Example

grid.disableSummaries('ProductName');

enableSummaries

Section titled "enableSummaries"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "endEdit"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "expandAll"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Expands all rows.

expandAll(): void

Returns void

Example

this.grid.expandAll();

expandRow

Section titled "expandRow"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "filter"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Filters a single ColumnComponent.

filter(name: string, value: any, conditionOrExpressionTree: IgcFilteringExpressionsTree | IgcFilteringOperation, ignoreCase: boolean): void

Parameters

Returns void

filterGlobal

Section titled "filterGlobal"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "findNext"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "findPrev"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

fullyExpandGroup

Section titled "fullyExpandGroup"

Expands the specified group and all of its parent groups.

fullyExpandGroup(groupRow: IgcGroupByRecord): void

Parameters

Returns void

Example

public groupRow: IGroupByRecord;
this.grid.fullyExpandGroup(this.groupRow);

getCellByColumn

Section titled "getCellByColumn"

Returns a CellType object that matches the conditions.

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

Parameters

  • rowIndex: number
  • columnField: string

Returns IgcCellType

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): IgcCellType

Parameters

  • rowSelector: any

    match any rowID
  • columnField: string

Returns IgcCellType

Example

grid.getCellByKey(1, 'index');

getColumnByName

Section titled "getColumnByName"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Returns the ColumnComponent by field name.

getColumnByName(name: string): IgcColumnComponent

Parameters

  • name: string

Returns IgcColumnComponent

Example

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

getColumnByVisibleIndex

Section titled "getColumnByVisibleIndex"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

getColumnByVisibleIndex(index: number): IgcColumnComponent

Parameters

  • index: number

Returns IgcColumnComponent

getHeaderGroupWidth

Section titled "getHeaderGroupWidth"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Gets the width to be set on GridHeaderGroupComponent.

getHeaderGroupWidth(column: IgcColumnComponent): string

Parameters

Returns string

getNextCell

Section titled "getNextCell"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

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

Parameters

  • currRowIndex: number
  • curVisibleColIndex: number
  • callback: any

Returns IgcCellPosition

Example

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

getPinnedEndWidth

Section titled "getPinnedEndWidth"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "getPinnedStartWidth"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "getPreviousCell"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

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

Parameters

  • currRowIndex: number
  • curVisibleColIndex: number
  • callback: any

Returns IgcCellPosition

Example

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

getRowByIndex

Section titled "getRowByIndex"

Returns the GridRow by index.

getRowByIndex(index: number): IgcRowType

Parameters

  • index: number

Returns IgcRowType

Example

const myRow = grid.getRowByIndex(1);

getRowByKey

Section titled "getRowByKey"

Returns GridRow object by the specified primary key.

getRowByKey(key: any): IgcRowType

Parameters

  • key: any

Returns IgcRowType

Example

const myRow = this.grid1.getRowByKey("cell5");

getRowData

Section titled "getRowData"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "getSelectedColumnsData"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "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[]

getSelectedRanges

Section titled "getSelectedRanges"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Get the currently selected ranges in the grid.

getSelectedRanges(): IgcGridSelectionRange[]

Returns IgcGridSelectionRange[]

groupBy

Section titled "groupBy"

Groups by a new ColumnComponent based on the provided expression, or modifies an existing one.

groupBy(expression: IgcGroupingExpression[]): void

Parameters

Returns void

Example

this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
this.grid.groupBy([
    { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false },
    { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true },
    { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false }
]);

isExpandedGroup

Section titled "isExpandedGroup"

Returns if a group is expanded or not.

isExpandedGroup(group: IgcGroupByRecord): boolean

Parameters

Returns boolean

Example

public groupRow: IGroupByRecord;
const expandedGroup = this.grid.isExpandedGroup(this.groupRow);

isRecordPinnedByIndex

Section titled "isRecordPinnedByIndex"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "markForCheck"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "moveColumn"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Places a column before or after the specified target column.

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

Parameters

Returns void

Example

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

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "openAdvancedFilteringDialog"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Opens the advanced filtering dialog.

openAdvancedFilteringDialog(overlaySettings: IgcOverlaySettings): void

Parameters

Returns void

pinColumn

Section titled "pinColumn"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Pins a column by field name.

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

Parameters

Returns boolean

Example

this.grid.pinColumn("ID");

pinRow

Section titled "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);

recalculateAutoSizes

Section titled "recalculateAutoSizes"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

recalculateAutoSizes(): void

Returns void

Example

this.grid1.recalculateAutoSizes();

reflow

Section titled "reflow"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Recalculates grid width/height dimensions.

reflow(): void

Returns void

Example

this.grid.reflow();

refreshSearch

Section titled "refreshSearch"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Reapplies the existing search.

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

Parameters

  • updateActiveInfo: boolean
  • endEdit: boolean

Returns number

Example

this.grid.refreshSearch();

removeEventListener

Section titled "removeEventListener"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective) 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

selectAllColumns

Section titled "selectAllColumns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Selects all columns

selectAllColumns(): void

Returns void

Example

this.grid.deselectAllColumns();

selectAllRows

Section titled "selectAllRows"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Selects all rows

selectAllRows(onlyFilterData: boolean): void

Parameters

  • onlyFilterData: boolean

Returns void

Example

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

selectColumns

Section titled "selectColumns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Select specified columns.

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

Parameters

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

    if true clears the current selection

Returns void

Example

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

selectedColumns

Section titled "selectedColumns"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Get current selected columns.

selectedColumns(): IgcColumnComponent[]

Returns IgcColumnComponent[]

Example

Returns an array with selected columns

const selectedColumns = this.grid.selectedColumns();

selectRange

Section titled "selectRange"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

selectRange(arg: IgcGridSelectionRange[]): void

Parameters

Returns void

selectRows

Section titled "selectRows"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

selectRowsInGroup

Section titled "selectRowsInGroup"

Select all rows within a group.

selectRowsInGroup(groupRow: IgcGroupByRecord, clearPrevSelection: boolean): void

Parameters

Returns void

Example

this.grid.selectRowsInGroup(this.groupRow, true);

sort

Section titled "sort"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Sort a single ColumnComponent.

sort(expression: IgcSortingExpression[]): void

Parameters

Returns void

Example

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

toggleAllGroupRows

Section titled "toggleAllGroupRows"

Toggles the expansion state of all group rows recursively.

toggleAllGroupRows(): void

Returns void

Example

this.grid.toggleAllGroupRows;

toggleColumnVisibility

Section titled "toggleColumnVisibility"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

Toggles the specified column's visibility.

toggleColumnVisibility(args: IgcColumnVisibilityChangedEventArgs): void

Parameters

Returns void

Example

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

toggleGroup

Section titled "toggleGroup"

Toggles the expansion state of a group.

toggleGroup(groupRow: IgcGroupByRecord): void

Parameters

Returns void

Example

public groupRow: IGroupByRecord;
const toggleExpGroup = this.grid.toggleGroup(this.groupRow);

toggleRow

Section titled "toggleRow"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "unpinColumn"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "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);

updateCell

Section titled "updateCell"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

Section titled "updateRow"

Inherited from: EventEmitterMixin<IgcGridComponentEventMap, AbstractConstructor<IgcGridBaseDirective>>(IgcGridBaseDirective)

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

register

Section titled "register" 
register(): void

Returns void

Events

Section titled "Events"

activeNodeChange

Section titled "activeNodeChange"

Emitted when the active node is changed.

activeNodeChange: CustomEvent<IgcActiveNodeChangeEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

advancedFilteringExpressionsTreeChange

Section titled "advancedFilteringExpressionsTreeChange"

Emitted after advanced filtering is performed.

advancedFilteringExpressionsTreeChange: CustomEvent<IgcFilteringExpressionsTree>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

cellClick

Section titled "cellClick"

Emitted when a cell is clicked.

cellClick: CustomEvent<IgcGridCellEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

cellEdit

Section titled "cellEdit"

Emitted when cell has been edited.

cellEdit: CustomEvent<IgcGridEditEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

cellEditDone

Section titled "cellEditDone"

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

cellEditDone: CustomEvent<IgcGridEditDoneEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

cellEditEnter

Section titled "cellEditEnter"

Emitted when cell enters edit mode.

cellEditEnter: CustomEvent<IgcGridEditEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

cellEditExit

Section titled "cellEditExit"

Emitted when cell exits edit mode.

cellEditExit: CustomEvent<IgcGridEditDoneEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

childrenResolved

Section titled "childrenResolved"

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

childrenResolved: CustomEvent<void>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

columnInit

Section titled "columnInit"

Emitted when a column is initialized.

columnInit: CustomEvent<IgcColumnComponent>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

columnMoving

Section titled "columnMoving"

Emitted during the column moving operation.

columnMoving: CustomEvent<IgcColumnMovingEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

columnMovingEnd

Section titled "columnMovingEnd"

Emitted when column moving ends.

columnMovingEnd: CustomEvent<IgcColumnMovingEndEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

columnMovingStart

Section titled "columnMovingStart"

Emitted when column moving starts.

columnMovingStart: CustomEvent<IgcColumnMovingStartEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

columnPin

Section titled "columnPin"

Emitted before IgxColumnComponent is pinned.

columnPin: CustomEvent<IgcPinColumnCancellableEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

columnPinned

Section titled "columnPinned"

Emitted after IgxColumnComponent is pinned.

columnPinned: CustomEvent<IgcPinColumnEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

columnResized

Section titled "columnResized"

Emitted after column is resized.

columnResized: CustomEvent<IgcColumnResizeEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

columnSelectionChanging

Section titled "columnSelectionChanging"

Emitted when IgxColumnComponent is selected.

columnSelectionChanging: CustomEvent<IgcColumnSelectionEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

columnVisibilityChanged

Section titled "columnVisibilityChanged"

Emitted after column visibility is changed.

columnVisibilityChanged: CustomEvent<IgcColumnVisibilityChangedEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

columnVisibilityChanging

Section titled "columnVisibilityChanging"

Emitted before column visibility is changed.

columnVisibilityChanging: CustomEvent<IgcColumnVisibilityChangingEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

contextMenu

Section titled "contextMenu"

Emitted when a cell or row is right clicked.

contextMenu: CustomEvent<IgcGridContextMenuEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

dataChanged

Section titled "dataChanged"

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

dataChanged: CustomEvent<IgcForOfDataChangeEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

dataChanging

Section titled "dataChanging"

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

dataChanging: CustomEvent<IgcForOfDataChangeEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

dataPreLoad

Section titled "dataPreLoad"

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

dataPreLoad: CustomEvent<IgcForOfState>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

doubleClick

Section titled "doubleClick"

Emitted when a cell is double clicked.

doubleClick: CustomEvent<IgcGridCellEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

expansionStatesChange

Section titled "expansionStatesChange"

Emitted when the rows are expanded or collapsed.

expansionStatesChange: CustomEvent<Map<any, boolean>>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

filtering

Section titled "filtering"

Emitted before filtering expressions are applied.

filtering: CustomEvent<IgcFilteringEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

filteringDone

Section titled "filteringDone"

Emitted after filtering is performed through the UI.

filteringDone: CustomEvent<IgcFilteringExpressionsTree>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

filteringExpressionsTreeChange

Section titled "filteringExpressionsTreeChange"

Emitted after filtering is performed.

filteringExpressionsTreeChange: CustomEvent<IgcFilteringExpressionsTree>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

formGroupCreated

Section titled "formGroupCreated"

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

formGroupCreated: CustomEvent<IgcGridFormGroupCreatedEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

gridCopy

Section titled "gridCopy"

Emitted when a copy operation is executed.

gridCopy: CustomEvent<IgcGridClipboardEvent>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

gridKeydown

Section titled "gridKeydown"

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

gridKeydown: CustomEvent<IgcGridKeydownEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

gridScroll

Section titled "gridScroll"

Emitted when grid is scrolled horizontally/vertically.

gridScroll: CustomEvent<IgcGridScrollEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

groupingDone

Section titled "groupingDone"

Emitted when columns are grouped/ungrouped.

groupingDone: CustomEvent<IgcGroupingDoneEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

groupingExpansionStateChange

Section titled "groupingExpansionStateChange"

Emitted when groups are expanded/collapsed.

groupingExpansionStateChange: CustomEvent<IgcGroupByExpandState[]>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

groupingExpressionsChange

Section titled "groupingExpressionsChange"

Emitted when grouping is performed.

groupingExpressionsChange: CustomEvent<IgcGroupingExpression[]>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rangeSelected

Section titled "rangeSelected"

Emitted when making a range selection.

rangeSelected: CustomEvent<IgcGridSelectionRange>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rendered

Section titled "rendered"

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

rendered: CustomEvent<boolean>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowAdd

Section titled "rowAdd"

Emmited just before the newly added row is commited.

rowAdd: CustomEvent<IgcRowDataCancelableEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowAdded

Section titled "rowAdded"

Emitted when a row is added.

rowAdded: CustomEvent<IgcRowDataEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowClick

Section titled "rowClick"

Emitted when a row is clicked.

rowClick: CustomEvent<IgcGridRowEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowDelete

Section titled "rowDelete"

Emmited when deleting a row.

rowDelete: CustomEvent<IgcRowDataCancelableEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowDeleted

Section titled "rowDeleted"

Emitted when a row is deleted.

rowDeleted: CustomEvent<IgcRowDataEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowDragEnd

Section titled "rowDragEnd"

Emitted when dropping a row.

rowDragEnd: CustomEvent<IgcRowDragEndEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowDragStart

Section titled "rowDragStart"

Emitted when start dragging a row.

rowDragStart: CustomEvent<IgcRowDragStartEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowEdit

Section titled "rowEdit"

Emitted when exiting edit mode for a row.

rowEdit: CustomEvent<IgcGridEditEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowEditDone

Section titled "rowEditDone"

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

rowEditDone: CustomEvent<IgcGridEditDoneEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowEditEnter

Section titled "rowEditEnter"

Emitted when a row enters edit mode.

rowEditEnter: CustomEvent<IgcGridEditEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowEditExit

Section titled "rowEditExit"

Emitted when row editing is canceled.

rowEditExit: CustomEvent<IgcGridEditDoneEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowPinned

Section titled "rowPinned"

Emitted when the pinned state of a row is changed.

rowPinned: CustomEvent<IgcPinRowEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowPinning

Section titled "rowPinning"

Emitted when the pinned state of a row is changed.

rowPinning: CustomEvent<IgcPinRowEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowSelectionChanging

Section titled "rowSelectionChanging"

Emitted when IgxGridRowComponent is selected.

rowSelectionChanging: CustomEvent<IgcRowSelectionEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

rowToggle

Section titled "rowToggle"

Emitted when the expanded state of a row gets changed.

rowToggle: CustomEvent<IgcRowToggleEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

selected

Section titled "selected"

Emitted when a cell is selected.

selected: CustomEvent<IgcGridCellEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

selectedRowsChange

Section titled "selectedRowsChange"

Emitted when the rows are selected or deselected.

selectedRowsChange: CustomEvent<any[]>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

sorting

Section titled "sorting"

Emitted before sorting expressions are applied.

sorting: CustomEvent<IgcSortingEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

sortingDone

Section titled "sortingDone"

Emitted after sorting is completed.

sortingDone: CustomEvent<IgcSortingExpression[]>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

sortingExpressionsChange

Section titled "sortingExpressionsChange"

Emitted before sorting is performed.

sortingExpressionsChange: CustomEvent<IgcSortingExpression[]>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

toolbarExporting

Section titled "toolbarExporting"

Emitted when an export process is initiated by the user.

toolbarExporting: CustomEvent<IgcGridToolbarExportEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

validationStatusChange

Section titled "validationStatusChange"

Emitted when grid's validation status changes.

validationStatusChange: CustomEvent<IgcGridValidationStatusEventArgs>

Example

<igx-grid [data]="employeeData" [autoGenerate]="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>