Class IgxGridComponent

Grid provides a way to present and manipulate tabular data.

igxmodule

IgxGridModule

igxgroup

Grids & Lists

igxkeywords

grid, table

igxtheme

igx-grid-theme

remarks

The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data has been bound, it can be manipulated through filtering, sorting & editing operations.

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>

Hierarchy

Implements

  • GridType
  • OnInit
  • DoCheck
  • AfterContentInit
  • AfterViewInit

Index

Constructors

Properties

Accessors

Methods

Constructors

  • new IgxGridComponent(validation: IgxGridValidationService, selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: GridServiceType, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, appRef: ApplicationRef, moduleRef: NgModuleRef<any>, injector: Injector, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxGridComponent

Properties

activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs> = ...

Emmited when the active node is changed.

example
<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>
addRowEmptyTemplate: TemplateRef<any>

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

example
<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree> = ...

Emitted after advanced filtering is performed.

remarks

Returns the advanced filtering expressions tree.

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

Gets/Sets whether to auto-generate the columns.

remarks

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

example
<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
cdr: ChangeDetectorRef
cellClick: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is clicked.

remarks

Returns the IgxGridCell.

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

Emitted when cell has been edited.

remarks

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

example
<igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
cellEditDone: EventEmitter<IGridEditDoneEventArgs> = ...

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

example
<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
cellEditEnter: EventEmitter<IGridEditEventArgs> = ...

Emitted when cell enters edit mode.

remarks

This event is cancelable.

example
<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
cellEditExit: EventEmitter<IGridEditDoneEventArgs> = ...

Emitted when cell exits edit mode.

example
<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
clipboardOptions: { copyFormatters: boolean; copyHeaders: boolean; enabled: boolean; separator: string } = ...

Controls the copy behavior of the grid.

Type declaration

  • copyFormatters: boolean

    Apply the columns formatters (if any) on the data in the clipboard output.

  • copyHeaders: boolean

    Include the columns headers in the clipboard output.

  • enabled: boolean

    Enables/disables the copy behavior

  • separator: string

    The separator used for formatting the copy output. Defaults to \t.

colResizingService: IgxColumnResizingService
columnInit: EventEmitter<IgxColumnComponent> = ...

Emitted when a column is initialized.

remarks

Returns the column object.

example
<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid>
columnMoving: EventEmitter<IColumnMovingEventArgs> = ...

Emitted during the column moving operation.

remarks

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

example
<igx-grid (columnMoving)="moving($event)"></igx-grid>
columnMovingEnd: EventEmitter<IColumnMovingEndEventArgs> = ...

Emitted when column moving ends.

remarks

Returns the source and target IgxColumnComponent objects.

example
<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid>
columnMovingStart: EventEmitter<IColumnMovingStartEventArgs> = ...

Emitted when column moving starts.

remarks

Returns the moved IgxColumnComponent object.

example
<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid>
columnPin: EventEmitter<IPinColumnCancellableEventArgs> = ...

Emitted before IgxColumnComponent is pinned.

remarks

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

example
public columnPinning(event) {
if (event.column.field === "Name") {
event.insertAtIndex = 0;
}
}
columnPinned: EventEmitter<IPinColumnEventArgs> = ...

Emitted after IgxColumnComponent is pinned.

remarks

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

example
public columnPinning(event) {
if (event.column.field === "Name") {
event.insertAtIndex = 0;
}
}
columnResized: EventEmitter<IColumnResizeEventArgs> = ...

Emitted after column is resized.

remarks

Returns the IgxColumnComponent object's old and new width.

example
<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>
columnSelectionChanging: EventEmitter<IColumnSelectionEventArgs> = ...

Emitted when IgxColumnComponent is selected.

example
<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
columnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs> = ...

Emitted after column visibility is changed.

remarks

Args: { column: IgxColumnComponent, newValue: boolean }

example
<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
columnVisibilityChanging: EventEmitter<IColumnVisibilityChangingEventArgs> = ...

Emitted before column visibility is changed.

remarks

Args: { column: any, newValue: boolean }

example
<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>
contextMenu: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is right clicked.

remarks

Returns the IgxGridCell object.

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

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

example
 <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>
dataChanging: EventEmitter<IForOfDataChangingEventArgs> = ...

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

example
 <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>
dataPreLoad: EventEmitter<IForOfState> = ...

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

example
 <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataPreLoad)='handleDataPreloadEvent()'></igx-grid>
document: any
doubleClick: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is double clicked.

remarks

Returns the IgxGridCell object.

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

Gets the row ID that is being dragged.

remarks

The row ID is either the primaryKey value or the data record instance.

dropAreaTemplate: TemplateRef<any>

Gets/Sets the template that will be rendered as a GroupBy drop area.

remarks

The grid needs to have at least one groupable column in order the GroupBy area to be displayed.

example
<igx-grid [dropAreaTemplate]="dropAreaRef">
</igx-grid>
<ng-template #myDropArea>
<span> Custom drop area! </span>
</ng-template>
emptyFilteredGridTemplate: TemplateRef<any>

A template reference for the template when the filtered grid is empty.

example
const emptyTempalte = this.grid.emptyGridTemplate;
emptyGridDefaultTemplate: TemplateRef<any>

A template reference for the template when the grid is empty.

example
const emptyTempalte = this.grid.emptyGridTemplate;
emptyGridTemplate: TemplateRef<any>

Gets/Sets a custom template when empty.

example
<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
evenRowCSS: string = 'igx-grid__tr--even'
deprecated

in version 12.2.0. We suggest using rowClasses property instead

Gets/Sets the styling classes applied to all even IgxGridRowComponents in the grid.

example
<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>
excelStyleHeaderIconTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering a row expand indicator.

filtering: EventEmitter<IFilteringEventArgs> = ...

Emitted before filtering expressions are applied.

remarks

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

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

Emitted after filtering is performed through the UI.

remarks

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

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

Emitted after filtering is performed.

remarks

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

example
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>
filteringService: IgxFilteringService
formGroupCreated: EventEmitter<IGridFormGroupCreatedEventArgs> = ...

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

example
<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
gridAPI: GridServiceType
gridCopy: EventEmitter<IGridClipboardEvent> = ...

Emitted when a copy operation is executed.

remarks

Fired only if copy behavior is enabled through the [clipboardOptions]{@link IgxGridBaseDirective#clipboardOptions}.

gridKeydown: EventEmitter<IGridKeydownEventArgs> = ...

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

remarks

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

example
 <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>
gridScroll: EventEmitter<IGridScrollEventArgs> = ...

Emitted when grid is scrolled horizontally/vertically.

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

Gets/Sets whether created groups are rendered expanded or collapsed.

remarks

The default rendered state is expanded.

example
<igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid>
groupsRecords: IGroupByRecord[] = []

Gets the hierarchical representation of the group by records.

example
let groupRecords = this.grid.groupsRecords;
headerCollapseIndicatorTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering a header collapse indicator.

headerExpandIndicatorTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering a header expand indicator.

id: string = ...

Gets/Sets the value of the id attribute.

remarks

If not provided it will be automatically generated.

example
<igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid>
isPivot: boolean = false
loadingGridTemplate: TemplateRef<any>

Gets/Sets a custom template when loading.

example
<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
moving: boolean = false

Controls whether columns moving is enabled in the grid.

navigation: IgxGridNavigationService
oddRowCSS: string = 'igx-grid__tr--odd'
deprecated

in version 12.2.0. We suggest using rowClasses property instead

Gets/Sets the styling classes applied to all odd IgxGridRowComponents in the grid.

example
<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>
onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...
onGroupingDone: EventEmitter<IGroupingDoneEventArgs> = ...

Emitted when columns are grouped/ungrouped.

remarks

The onGroupingDone event would be raised only once if several columns get grouped at once by calling the groupBy() or clearGrouping() API methods and passing an array as an argument. The event arguments provide the expressions, groupedColumns and ungroupedColumns properties, which contain the ISortingExpression and the IgxColumnComponent related to the grouping/ungrouping operation. Please note that groupedColumns and ungroupedColumns show only the newly changed columns (affected by the last grouping/ungrouping operation), not all columns which are currently grouped/ungrouped. columns.

example
<igx-grid #grid [data]="localData" (onGroupingDone)="groupingDone($event)" [autoGenerate]="true"></igx-grid>
pageChange: EventEmitter<number> = ...
deprecated

in version 12.1.0. Use the corresponding output exposed by the igx-paginator component instead

Emitted after the current page is changed.

example
<igx-grid (pageChange)="onPageChange($event)"></igx-grid>
public onPageChange(page: number) {
this.currentPage = page;
}
pagingDone: EventEmitter<IPageEventArgs> = ...
deprecated

in version 12.1.0. Use the corresponding output exposed by the igx-paginator component instead

Emitted after paging is performed.

remarks

Returns an object consisting of the previous and next pages.

example
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (pagingDone)="pagingDone($event)"></igx-grid>
perPageChange: EventEmitter<number> = ...
deprecated

in version 12.1.0. Use the corresponding output exposed by the igx-paginator component instead

Emitted when perPage property value of the grid is changed.

example
<igx-grid #grid (perPageChange)="onPerPageChange($event)" [autoGenerate]="true"></igx-grid>
public onPerPageChange(perPage: number) {
this.perPage = perPage;
}
primaryKey: any

Gets/Sets the primary key.

example
<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
rangeSelected: EventEmitter<GridSelectionRange> = ...

Emitted when making a range selection.

remarks

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

rendered: EventEmitter<boolean> = ...

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

rowAdd: EventEmitter<IGridEditEventArgs> = ...

Emmited just before the newly added row is commited.

remarks

This event is cancelable. Returns an IGridEditEventArgs object.

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

Emitted when a row is added.

remarks

Returns the data for the new IgxGridRowComponent object.

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

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

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

IgxColumnComponent

rowCollapsedIndicatorTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering a row collapse indicator.

rowDelete: EventEmitter<IGridEditEventArgs> = ...

Emmited when deleting a row.

remarks

This event is cancelable. Returns an IGridEditEventArgs object.

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

Emitted when a row is deleted.

remarks

Returns an IRowDataEventArgs object.

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

Emitted when dropping a row.

remarks

Return the dropped row.

rowDragStart: EventEmitter<IRowDragStartEventArgs> = ...

Emitted when start dragging a row.

remarks

Return the dragged row.

rowEdit: EventEmitter<IGridEditEventArgs> = ...

Emitted when exiting edit mode for a row.

remarks

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

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

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

remarks

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

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

Emitted when a row enters edit mode.

remarks

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

example
<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>
rowEditExit: EventEmitter<IGridEditDoneEventArgs> = ...

Emitted when row editing is canceled.

remarks

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

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

The custom template, if any, that should be used when rendering a row expand indicator.

rowPinned: EventEmitter<IPinRowEventArgs> = ...

Emitted when the pinned state of a row is changed.

example
<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid>
rowPinning: EventEmitter<IPinRowEventArgs> = ...

Emitted when the pinned state of a row is changed.

example
<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid>
rowSelectionChanging: EventEmitter<IRowSelectionEventArgs> = ...

Emitted when IgxGridRowComponent is selected.

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

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

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

IgxColumnComponent

rowToggle: EventEmitter<IRowToggleEventArgs> = ...

Emitted when the expanded state of a row gets changed.

example
<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>
selected: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is selected.

remarks

Returns the IgxGridCell.

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

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

remarks

This will allow to bind the grid to remote data and having auto-generated columns at the same time. Note that after generating the columns, this property would be disabled to avoid re-creating columns each time a new data is assigned.

example
 this.grid.shouldGenerate = true;
snackbarDisplayTime: number = 6000

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

remarks

By default it is 6000ms.

sortAscendingHeaderIconTemplate: TemplateRef<any> = null

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

sortDescendingHeaderIconTemplate: TemplateRef<any> = null

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

sortHeaderIconTemplate: TemplateRef<any> = null

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

sorting: EventEmitter<ISortingEventArgs> = ...

Emitted before sorting expressions are applied.

remarks

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

example
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid>
sortingDone: EventEmitter<ISortingExpression | ISortingExpression[]> = ...

Emitted after sorting is completed.

remarks

Returns the sorting expression.

example
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>
sortingExpressionsChange: EventEmitter<ISortingExpression[]> = ...

Emitted before sorting is performed.

remarks

Returns the sorting expressions.

example
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
summaryService: IgxGridSummaryService
toolbarExporting: EventEmitter<IGridToolbarExportEventArgs> = ...

Emitted when an export process is initiated by the user.

example
toolbarExporting(event: IGridToolbarExportEventArgs){
const toolbarExporting = event;
}
uniqueColumnValuesStrategy: ((column: ColumnType, filteringExpressionsTree: IFilteringExpressionsTree, done: ((values: any[]) => void)) => void)

Type declaration

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

      remarks

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

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

      Parameters

      • column: ColumnType
      • filteringExpressionsTree: IFilteringExpressionsTree
      • done: ((values: any[]) => void)
          • (values: any[]): void
          • Parameters

            • values: any[]

            Returns void

      Returns void

validationStatusChange: EventEmitter<IGridValidationStatusEventArgs> = ...

Emitted when grid's validation status changes.

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

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

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

Accessors

  • get activeDescendant(): string
  • get allowAdvancedFiltering(): boolean
  • set allowAdvancedFiltering(value: boolean): void
  • Gets/Sets a value indicating whether the advanced filtering is enabled.

    example
    <igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>
    

    Returns boolean

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

    example
    <igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: boolean

    Returns void

  • get allowFiltering(): boolean
  • set allowFiltering(value: boolean): void
  • Gets/Sets if the filtering is enabled.

    example
    <igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    

    Returns boolean

  • Gets/Sets if the filtering is enabled.

    example
    <igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: boolean

    Returns void

  • get bannerClass(): string
  • get batchEditing(): boolean
  • set batchEditing(val: boolean): void
  • 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.

    example
    <igx-grid [batchEditing]="true" [data]="someData">
    </igx-grid>

    Returns boolean

  • 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.

    example
    <igx-grid [batchEditing]="true" [data]="someData">
    </igx-grid>

    Parameters

    • val: boolean

    Returns void

  • get columnWidth(): string
  • set columnWidth(value: string): void
  • get data(): any[]
  • set data(value: any[]): void
  • get dataRowList(): QueryList<IgxRowDirective>
  • get dataView(): any[]
  • get defaultHeaderGroupMinWidth(): number
  • Returns the IgxGridHeaderGroupComponent's minimum allowed width.

    remarks

    Used internally for restricting header group component width. The values below depend on the header cell default right/left padding values.

    Returns number

  • get defaultRowHeight(): number
  • get dragIndicatorIconTemplate(): TemplateRef<any>
  • set dragIndicatorIconTemplate(val: TemplateRef<any>): void
  • get dropAreaMessage(): string
  • set dropAreaMessage(value: string): void
  • Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.

    remarks

    The grid needs to have at least one groupable column in order the GroupBy area to be displayed.

    example
    <igx-grid dropAreaMessage="Drop here to group!">
    <igx-column [groupable]="true" field="ID"></igx-column>
    </igx-grid>

    Returns string

  • Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.

    remarks

    The grid needs to have at least one groupable column in order the GroupBy area to be displayed.

    example
    <igx-grid dropAreaMessage="Drop here to group!">
    <igx-column [groupable]="true" field="ID"></igx-column>
    </igx-grid>

    Parameters

    • value: string

    Returns void

  • get dropAreaVisible(): boolean
  • get emptyFilteredGridMessage(): string
  • set emptyFilteredGridMessage(value: string): void
  • Gets/Sets the message displayed when there are no records and the grid is filtered.

    example
    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
    

    Returns string

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

    example
    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: string

    Returns void

  • get emptyGridMessage(): string
  • set emptyGridMessage(value: string): void
  • get expansionStates(): Map<any, boolean>
  • set expansionStates(value: Map<any, boolean>): void
  • Gets/Sets a list of key-value pairs [row ID, expansion state].

    remarks

    Includes only states that differ from the default one. Supports two-way binding.

    example
    <igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
    </igx-grid>

    Returns Map<any, boolean>

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

    remarks

    Includes only states that differ from the default one. Supports two-way binding.

    example
    <igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
    </igx-grid>

    Parameters

    • value: Map<any, boolean>

    Returns void

  • get filterCellList(): IgxGridFilteringCellComponent[]
  • Gets/Sets the filter mode.

    example
    <igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    
    remarks

    By default it's set to FilterMode.quickFilter.

    Returns FilterMode

  • Gets/Sets the filter mode.

    example
    <igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    
    remarks

    By default it's set to FilterMode.quickFilter.

    Parameters

    Returns void

  • get filteredData(): any
  • set filteredData(value: any): void
  • get filteredSortedData(): any[]
  • get filteringRow(): IgxGridFilteringRowComponent
  • get groupAreaTemplate(): TemplateRef<any>
  • set groupAreaTemplate(template: TemplateRef<any>): void
  • get groupRowTemplate(): TemplateRef<any>
  • set groupRowTemplate(template: TemplateRef<any>): void
  • Gets/Sets a list of expansion states for group rows.

    remarks

    Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed. Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array). Supports two-way data binding.

    example
    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpansionState)]="model.groupingExpansionState"></igx-grid>
    

    Returns IGroupByExpandState[]

  • Gets/Sets a list of expansion states for group rows.

    remarks

    Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed. Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array). Supports two-way data binding.

    example
    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpansionState)]="model.groupingExpansionState"></igx-grid>
    

    Parameters

    Returns void

  • Gets/Sets the group by state.

    example
    let groupByState = this.grid.groupingExpressions;
    this.grid.groupingExpressions = [...];
    remarks

    Supports two-way data binding.

    example
    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpressions)]="model.groupingExpressions"></igx-grid>
    

    Returns IGroupingExpression[]

  • Gets/Sets the group by state.

    example
    let groupByState = this.grid.groupingExpressions;
    this.grid.groupingExpressions = [...];
    remarks

    Supports two-way data binding.

    example
    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpressions)]="model.groupingExpressions"></igx-grid>
    

    Parameters

    Returns void

  • get groupsRowList(): QueryList<any>
  • get hasColumnGroups(): boolean
  • get hasColumnLayouts(): boolean
  • get hasColumnsToAutosize(): boolean
  • get hasEditableColumns(): boolean
  • get hasFilterableColumns(): boolean
  • get hasGroupableColumns(): boolean
  • get hasMovableColumns(): boolean
  • Returns if the IgxGridComponent has moveable columns.

    deprecated

    Use IgxGridComponent.moving instead.

    example
    const movableGrid = this.grid.hasMovableColumns;
    

    Returns boolean

  • get hasSortableColumns(): boolean
  • get hasSummarizedColumns(): boolean
  • get headerCellList(): IgxGridHeaderComponent[]
  • get headerDragContainer(): ElementRef<HTMLElement>
  • get headerGroupContainer(): ElementRef<HTMLElement>
  • get headerGroups(): IgxGridHeaderGroupComponent[]
  • get headerGroupsList(): IgxGridHeaderGroupComponent[]
  • get headerSelectorContainer(): ElementRef<HTMLElement>
  • get headerWidth(): number
  • get height(): string
  • set height(value: string): void
  • get hiddenColumnsCount(): number
  • get hideGroupedColumns(): boolean
  • set hideGroupedColumns(value: boolean): void
  • get hideRowSelectors(): boolean
  • set hideRowSelectors(value: boolean): void
  • get isFirstPage(): boolean
  • get isLastPage(): boolean
  • get isLoading(): boolean
  • set isLoading(value: boolean): void
  • Gets/Sets whether the grid is going to show a loading indicator.

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

    Returns boolean

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

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

    Parameters

    • value: boolean

    Returns void

  • get locale(): string
  • set locale(value: string): void
  • get nativeElement(): HTMLElement
  • get page(): number
  • set page(val: number): void
  • deprecated

    in version 12.1.0. Use page property form paginator component instead

    Gets/Sets the current page index.

    example
    <igx-grid #grid [data]="Data" [autoGenerate]="true">
    <igx-paginator [(page)]="model.page"></igx-paginator>
    </igx-grid>
    remarks

    Supports two-way binding.

    Returns number

  • deprecated

    in version 12.1.0. Use page property form paginator component instead

    Gets/Sets the current page index.

    example
    <igx-grid #grid [data]="Data" [autoGenerate]="true">
    <igx-paginator [(page)]="model.page"></igx-paginator>
    </igx-grid>
    remarks

    Supports two-way binding.

    Parameters

    • val: number

    Returns void

  • get paging(): boolean
  • set paging(value: boolean): void
  • deprecated

    in version 12.1.0. Use the corresponding method exposed by the igx-paginator

    Gets/Sets whether the paging feature is enabled.

    remarks

    The default state is disabled (false).

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

    Returns boolean

  • deprecated

    in version 12.1.0. Use the corresponding method exposed by the igx-paginator

    Gets/Sets whether the paging feature is enabled.

    remarks

    The default state is disabled (false).

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

    Parameters

    • value: boolean

    Returns void

  • get perPage(): number
  • set perPage(val: number): void
  • deprecated

    in version 12.1.0. Use perPage property from paginator component instead

    Gets/Sets the number of visible items per page.

    remarks

    The default is 15.

    example
    <igx-grid #grid [data]="Data" [autoGenerate]="true">
    <igx-paginator [(perPage)]="model.perPage"></igx-paginator>
    </igx-grid>

    Returns number

  • deprecated

    in version 12.1.0. Use perPage property from paginator component instead

    Gets/Sets the number of visible items per page.

    remarks

    The default is 15.

    example
    <igx-grid #grid [data]="Data" [autoGenerate]="true">
    <igx-paginator [(perPage)]="model.perPage"></igx-paginator>
    </igx-grid>

    Parameters

    • val: number

    Returns void

  • get pinnedColumnsCount(): number
  • get pinnedDataView(): any[]
  • Returns the currently transformed paged/filtered/sorted/grouped pinned row data, displayed in the grid.

    example
         const pinnedDataView = this.grid.pinnedDataView;
    

    Returns any[]

  • get pinnedRowHeight(): any
  • get pinnedWidth(): number
  • Gets/Sets the initial pinning configuration.

    remarks

    Allows to apply pinning the columns to the start or the end. Note that pinning to both sides at a time is not allowed.

    example
    <igx-grid [pinning]="pinningConfig"></igx-grid>
    

    Returns IPinningConfig

  • Gets/Sets the initial pinning configuration.

    remarks

    Allows to apply pinning the columns to the start or the end. Note that pinning to both sides at a time is not allowed.

    example
    <igx-grid [pinning]="pinningConfig"></igx-grid>
    

    Parameters

    Returns void

  • get rowDraggable(): boolean
  • set rowDraggable(val: boolean): void
  • get rowEditable(): boolean
  • set rowEditable(val: boolean): void
  • Gets/Sets whether the rows are editable.

    remarks

    By default it is set to false.

    example
    <igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>
    

    Returns boolean

  • Gets/Sets whether the rows are editable.

    remarks

    By default it is set to false.

    example
    <igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>
    

    Parameters

    • val: boolean

    Returns void

  • get rowHeight(): any
  • set rowHeight(value: any): void
  • get rowList(): QueryList<IgxRowDirective>
  • get selectRowOnClick(): boolean
  • set selectRowOnClick(enabled: boolean): void
  • get selectedRows(): any[]
  • set selectedRows(rowIDs: any[]): void
  • Gets/Sets the current selection state.

    remarks

    Represents the selected rows' IDs (primary key or rowData)

    example
    <igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>
    

    Returns any[]

  • Gets/Sets the current selection state.

    remarks

    Represents the selected rows' IDs (primary key or rowData)

    example
    <igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>
    

    Parameters

    • rowIDs: any[]

    Returns void

  • get showGroupArea(): boolean
  • set showGroupArea(value: boolean): void
  • get showSummaryOnCollapse(): boolean
  • set showSummaryOnCollapse(value: boolean): void
  • Controls whether the summary row is visible when groupBy/parent row is collapsed.

    example
    <igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid>
    
    remarks

    By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible when the groupBy/parent row is collapsed.

    Returns boolean

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

    example
    <igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid>
    
    remarks

    By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible when the groupBy/parent row is collapsed.

    Parameters

    • value: boolean

    Returns void

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

    example
    const _sortingOptions: ISortingOptions = {
    mode: 'single'
    }
    ```html
    <igx-grid [sortingOptions]="sortingOptions"><igx-grid>

    Parameters

    Returns void

  • Gets/Sets the summary calculation mode.

    example
    <igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
    
    remarks

    By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level.

    Returns GridSummaryCalculationMode

  • Gets/Sets the summary calculation mode.

    example
    <igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
    
    remarks

    By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level.

    Parameters

    Returns void

  • get summaryRowHeight(): number
  • set summaryRowHeight(value: number): void
  • get totalHeight(): any
  • get totalItemCount(): number
  • set totalItemCount(count: number): void
  • Gets/Sets the total number of records in the data source.

    remarks

    This property is required for remote grid virtualization to function when it is bound to remote data.

    example
    const itemCount = this.grid1.totalItemCount;
    this.grid1.totalItemCount = 55;

    Returns number

  • Gets/Sets the total number of records in the data source.

    remarks

    This property is required for remote grid virtualization to function when it is bound to remote data.

    example
    const itemCount = this.grid1.totalItemCount;
    this.grid1.totalItemCount = 55;

    Parameters

    • count: number

    Returns void

  • get totalPages(): number
  • get totalRecords(): number
  • set totalRecords(total: number): void
  • get totalWidth(): number
  • get unpinnedDataView(): any[]
  • get unpinnedWidth(): number
  • get width(): string
  • set width(value: string): void

Methods

  • addRow(data: any): void
  • beginAddRowById(rowID: any, asChild?: boolean): void
  • Enters add mode by spawning the UI under the specified row by rowID.

    remarks

    If null is passed as rowID, the row adding UI is spawned as the first record in the data view

    remarks

    Spawning the UI to add a child for a record only works if you provide a rowID

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

    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

    • Optional asChild: boolean

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

    Returns void

  • beginAddRowByIndex(index: number): void
  • clearFilter(name?: string): void
  • clearGrouping(name?: string | string[]): void
  • Clears grouping for particular column, array of columns or all columns.

    remarks

    Clears all grouping in the grid, if no parameter is passed. If a parameter is provided, clears grouping for a particular column or an array of columns.

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

    Parameters

    • Optional name: string | string[]

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

    Returns void

  • clearSearch(): void
  • clearSort(name?: string): void
  • closeAdvancedFilteringDialog(applyChanges: boolean): void
  • collapseAll(): void
  • collapseRow(rowID: any): void
  • combineSelectedCellAndColumnData(columnData: any[], formatters?: boolean, headers?: boolean): any[]
  • deleteRow(rowSelector: any): any
  • deselectAllColumns(): void
  • deselectAllRows(onlyFilterData?: boolean): void
  • deselectColumns(columns: string[] | ColumnType[]): void
  • deselectRows(rowIDs: any[]): void
  • disableSummaries(...rest: any[]): void
  • enableSummaries(...rest: any[]): void
  • Enables summaries for the specified column and applies your customSummary.

    remarks

    If you do not provide the customSummary, then the default summary for the column data type will be applied.

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

    Enable summaries for the listed columns.

    example
    grid.enableSummaries('ProductName');
    

    Parameters

    • Rest ...rest: any[]

    Returns void

  • endEdit(commit?: boolean, event?: Event): void
  • expandAll(): void
  • expandRow(rowID: any): void
  • filterGlobal(value: any, condition: any, ignoreCase?: any): void
  • findNext(text: string, caseSensitive?: boolean, exactMatch?: boolean): number
  • Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.

    remarks

    Returns how many times the grid contains the string.

    example
    this.grid.findNext("financial");
    

    Parameters

    • text: string

      the string to search.

    • Optional caseSensitive: boolean

      optionally, if the search should be case sensitive (defaults to false).

    • Optional exactMatch: boolean

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

    Returns number

  • findPrev(text: string, caseSensitive?: boolean, exactMatch?: boolean): number
  • Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.

    remarks

    Returns how many times the grid contains the string.

    example
    this.grid.findPrev("financial");
    

    Parameters

    • text: string

      the string to search.

    • Optional caseSensitive: boolean

      optionally, if the search should be case sensitive (defaults to false).

    • Optional exactMatch: boolean

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

    Returns number

  • getCellByColumn(rowIndex: number, columnField: string): CellType
  • getCellByColumnVisibleIndex(rowIndex: number, index: number): CellType
  • getCellByKey(rowSelector: any, columnField: string): CellType
  • getNextCell(currRowIndex: number, curVisibleColIndex: number, callback?: ((IgxColumnComponent: any) => boolean)): ICellPosition
  • Returns ICellPosition which defines the next cell, according to the current position, that match specific criteria.

    remarks

    You can pass callback function as a third parameter of getPreviousCell method. The callback function accepts IgxColumnComponent as a param

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

    Parameters

    • currRowIndex: number
    • curVisibleColIndex: number
    • callback: ((IgxColumnComponent: any) => boolean) = null
        • (IgxColumnComponent: any): boolean
        • Parameters

          • IgxColumnComponent: any

          Returns boolean

    Returns ICellPosition

  • getPinnedWidth(takeHidden?: boolean): number
  • getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback?: ((IgxColumnComponent: any) => boolean)): ICellPosition
  • Returns ICellPosition which defines the previous cell, according to the current position, that match specific criteria.

    remarks

    You can pass callback function as a third parameter of getPreviousCell method. The callback function accepts IgxColumnComponent as a param

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

    Parameters

    • currRowIndex: number
    • curVisibleColIndex: number
    • callback: ((IgxColumnComponent: any) => boolean) = null
        • (IgxColumnComponent: any): boolean
        • Parameters

          • IgxColumnComponent: any

          Returns boolean

    Returns ICellPosition

  • getRowByIndex(index: number): RowType
  • getRowData(rowSelector: any): any
  • getSelectedColumnsData(formatters?: boolean, headers?: boolean): any[]
  • getSelectedData(formatters?: boolean, headers?: boolean): any[]
  • Groups by a new IgxColumnComponent based on the provided expression, or modifies an existing one.

    remarks

    Also allows for multiple columns to be grouped at once if an array of ISortingExpression is passed. The onGroupingDone event would get raised only once if this method gets called multiple times with the same arguments.

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

    Parameters

    Returns void

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

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

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

    
    
    example
    grid.markForCheck();
    

    Returns void

  • navigateTo(rowIndex: number, visibleColIndex?: number, cb?: ((args: any) => void)): void
  • Navigates to a position in the grid based on provided rowindex and visibleColumnIndex.

    remarks

    Also can execute a custom logic over the target element, through a callback function that accepts { targetType: GridKeydownTargetType, target: Object }

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

    Parameters

    • rowIndex: number
    • visibleColIndex: number = -1
    • cb: ((args: any) => void) = null
        • (args: any): void
        • Parameters

          • args: any

          Returns void

    Returns void

  • nextPage(): void
  • paginate(val: number): void
  • pinRow(rowID: any, index?: number): boolean
  • previousPage(): void
  • reflow(): void
  • refreshSearch(updateActiveInfo?: boolean, endEdit?: boolean): number
  • selectAllColumns(): void
  • selectAllRows(onlyFilterData?: boolean): void
  • Selects all rows

    remarks

    By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows.

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

    Parameters

    • onlyFilterData: boolean = true

    Returns void

  • selectColumns(columns: string[] | ColumnType[], clearCurrentSelection?: boolean): void
  • selectRows(rowIDs: any[], clearCurrentSelection?: boolean): void
  • selectRowsInGroup(groupRow: IGroupByRecord, clearPrevSelection?: boolean): void
  • selectedColumns(): ColumnType[]
  • toggleAllGroupRows(): void
  • toggleRow(rowID: any): void
  • unpinRow(rowID: any): boolean
  • updateCell(value: any, rowSelector: any, column: string): void
  • updateRow(value: any, rowSelector: any): void
  • Updates the IgxGridRowComponent

    remarks

    The row is specified by rowSelector parameter and the data source record with the passed value. This method will apply requested update only if primary key is specified in the grid.

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

    Parameters

    • value: any
    • rowSelector: any

      correspond to rowID

    Returns void