Class IgxGridComponent

Grid provides a way to present and manipulate tabular data.

IgxGridModule

Grids & Lists

grid, table

igx-grid-theme

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.

<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

Hierarchy

  • IgxGridBaseDirective
    • IgxGridComponent

Implements

  • GridType
  • OnInit
  • DoCheck
  • AfterContentInit
  • AfterViewInit

Constructors

Properties

Accessors

Methods

Constructors

  • Parameters

    • validation: IgxGridValidationService

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

    • colResizingService: IgxColumnResizingService
    • gridAPI: GridServiceType

      Represents the grid service type providing API methods for the grid

    • transactionFactory: IgxFlatTransactionFactory
    • elementRef: ElementRef<HTMLElement>
    • zone: NgZone
    • cdr: ChangeDetectorRef

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

    • differs: IterableDiffers
    • viewRef: ViewContainerRef
    • injector: Injector
    • envInjector: EnvironmentInjector
    • navigation: IgxGridNavigationService
    • textHighlightService: IgxTextHighlightService
    • overlayService: IgxOverlayService
    • localeId: string
    • platform: PlatformUtil
    • _diTransactions: TransactionService<Transaction, State>

    Returns IgxGridComponent

Properties

activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs> = ...

Emmited when the active node is changed.

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

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

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

Emitted after advanced filtering is performed.

Returns the advanced filtering expressions tree.

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

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

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

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

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

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

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

cellClick: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is clicked.

Returns the IgxGridCell.

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

Emitted when cell has been edited.

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

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

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

Emitted when cell enters edit mode.

This event is cancelable.

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

Emitted when cell exits edit mode.

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

Controls the copy behavior of the grid.

columnInit: EventEmitter<IgxColumnComponent> = ...

Emitted when a column is initialized.

Returns the column object.

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

Emitted during the column moving operation.

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

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

Emitted when column moving ends.

Returns the source and target IgxColumnComponent objects.

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

Emitted when column moving starts.

Returns the moved IgxColumnComponent object.

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

Emitted before IgxColumnComponent is pinned.

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

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

Emitted after IgxColumnComponent is pinned.

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

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

Emitted after column is resized.

Returns the IgxColumnComponent object's old and new width.

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

Emitted when IgxColumnComponent is selected.

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

Emitted after column visibility is changed.

Args: { column: IgxColumnComponent, newValue: boolean }

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

Emitted before column visibility is changed.

Args: { column: any, newValue: boolean }

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

Emitted when a cell or row is right clicked.

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

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

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

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

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

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

Emitted when a cell is double clicked.

Returns the IgxGridCell object.

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

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

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

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

Gets/Sets a custom template when empty.

<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
filtering: EventEmitter<IFilteringEventArgs> = ...

Emitted before filtering expressions are applied.

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

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

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

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

Emitted after filtering is performed.

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

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

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

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

Represents the grid service type providing API methods for the grid

gridCopy: EventEmitter<IGridClipboardEvent> = ...

Emitted when a copy operation is executed.

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

gridKeydown: EventEmitter<IGridKeydownEventArgs> = ...

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

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.

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

Emitted when grid is scrolled horizontally/vertically.

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

Emitted when columns are grouped/ungrouped.

The groupingDone 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.

<igx-grid #grid [data]="localData" (groupingDone)="groupingDone($event)" [autoGenerate]="true"></igx-grid>
groupsExpanded: boolean = true

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

The default rendered state is expanded.

<igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid>
id: string = ...

Gets/Sets the value of the id attribute.

If not provided it will be automatically generated.

<igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid>
loadingGridTemplate: TemplateRef<void>

Gets/Sets a custom template when loading.

<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
primaryKey: string

Gets/Sets the primary key.

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

Emitted when making a range selection.

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<IRowDataCancelableEventArgs> = ...

Emmited just before the newly added row is commited.

This event is cancelable. Returns an IRowDataCancellableEventArgs` object.

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

Emitted when a row is added.

Returns the data for the new IgxGridRowComponent object.

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

IgxColumnComponent

rowClick: EventEmitter<IGridRowEventArgs> = ...

Emitted when a row is clicked.

Returns the IgxGridRow.

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

Emmited when deleting a row.

This event is cancelable. Returns an IRowDataCancellableEventArgs` object.

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

Emitted when a row is deleted.

Returns an IRowDataEventArgs object.

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

Emitted when dropping a row.

Return the dropped row.

rowDragStart: EventEmitter<IRowDragStartEventArgs> = ...

Emitted when start dragging a row.

Return the dragged row.

rowEdit: EventEmitter<IGridEditEventArgs> = ...

Emitted when exiting edit mode for a row.

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.

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

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.

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

Emitted when a row enters edit mode.

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

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

Emitted when row editing is canceled.

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.

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

Emitted when the pinned state of a row is changed.

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

Emitted when the pinned state of a row is changed.

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

Emitted when IgxGridRowComponent is selected.

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

IgxColumnComponent

rowToggle: EventEmitter<IRowToggleEventArgs> = ...

Emitted when the expanded state of a row gets changed.

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

Emitted when a cell is selected.

Returns the IgxGridCell.

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

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

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.

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

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

By default it is 6000ms.

sorting: EventEmitter<ISortingEventArgs> = ...

Emitted before sorting expressions are applied.

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

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

Emitted after sorting is completed.

Returns the sorting expression.

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

Emitted before sorting is performed.

Returns the sorting expressions.

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

Emitted when an export process is initiated by the user.

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

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

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.

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

Type declaration

    • (column, filteringExpressionsTree, done): void
    • Parameters

      Returns void

validation: IgxGridValidationService

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

validationStatusChange: EventEmitter<IGridValidationStatusEventArgs> = ...

Emitted when grid's validation status changes.

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

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

Accessors

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

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

    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

  • set showSummaryOnCollapse(value): void
  • Parameters

    • value: boolean

    Returns void

Methods

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

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

    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

    • asChild: boolean

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

    Returns void

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

    Accepted values for index are integers from 0 to this.grid.dataView.length

    this.grid.beginAddRowByIndex(0);
    

    Parameters

    • index: number

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

    Returns void

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

    Otherwise clears the filtering state of all IgxColumnComponents.

    this.grid.clearFilter();
    

    Parameters

    • name: string

    Returns void

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

    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.

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

    Parameters

    • name: string | string[]

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

    Returns void

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

    Requires that the primaryKey property is set. The method accept rowSelector as a parameter, which is the rowID.

    this.grid1.deleteRow(0);
    

    Parameters

    • rowSelector: any

    Returns any

  • Deselects all rows

    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 deselect all rows in the grid exept deleted rows.

    this.grid.deselectAllRows();
    

    Parameters

    • onlyFilterData: boolean = true

    Returns void

  • Disable summaries for the specified column.

    grid.disableSummaries('ProductName');
    

    Disable summaries for the listed columns.

    grid.disableSummaries([{ fieldName: 'ProductName' }]);
    

    Parameters

    • ...rest: any[]

    Returns void

  • Enables summaries for the specified column and applies your customSummary.

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

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

    Enable summaries for the listed columns.

    grid.enableSummaries('ProductName');
    

    Parameters

    • ...rest: any[]

    Returns void

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

    If commit === true, passes them from the pending state to the data (or transaction service)

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

    Parameters

    • commit: boolean = true
    • event: Event

    Returns boolean

  • Expands the row by its id.

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

    this.grid.expandRow(rowID);
    

    Parameters

    • rowID: any

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

    Returns void

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

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

    Parameters

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

    Returns void

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

    Returns how many times the grid contains the string.

    this.grid.findNext("financial");
    

    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

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

    Returns how many times the grid contains the string.

    this.grid.findPrev("financial");
    

    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

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

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

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

    Parameters

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

          • IgxColumnComponent: any

          Returns boolean

    Returns ICellPosition

  • Gets calculated width of the pinned area.

    const pinnedWidth = this.grid.getPinnedWidth();
    

    Parameters

    • takeHidden: boolean = false

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

    Returns number

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

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

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

    Parameters

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

          • IgxColumnComponent: any

          Returns boolean

    Returns ICellPosition

  • Returns the data that is contained in the row component.

    If the primary key is not specified the row selector match the row data.

    const data = grid.getRowData(94741);
    

    Parameters

    • rowSelector: any

      correspond to rowID

    Returns any

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

    If formatters is enabled, the cell value will be formatted by its respective column formatter (if any). If headers is enabled, it will use the column header (if any) instead of the column field.

    Parameters

    • formatters: boolean = false
    • headers: boolean = false

    Returns any[]

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

    If formatters is enabled, the cell value will be formatted by its respective column formatter (if any). If headers is enabled, it will use the column header (if any) instead of the column field.

    Parameters

    • formatters: boolean = false
    • headers: boolean = false

    Returns any[]

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

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

    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

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

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

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

    Returns void

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

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

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

    Parameters

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

          • args: any

          Returns void

    Returns void

  • Pin the row by its id.

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

    this.grid.pinRow(rowID);
    

    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

  • Selects all rows

    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.

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

    Parameters

    • onlyFilterData: boolean = true

    Returns void

  • Toggles the row by its id.

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

    this.grid.toggleRow(rowID);
    

    Parameters

    • rowID: any

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

    Returns void

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

    Requires that the primaryKey property is set.

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

    Parameters

    • value: any

      the new value which is to be set.

    • rowSelector: any

      corresponds to rowID.

    • column: string

      corresponds to column field.

    Returns void

  • Updates the IgxGridRowComponent

    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.

    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