Emmited when the active node is changed.

Example

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

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

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

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

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

Remarks

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

Example

<igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid>
Copy

const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]
Copy

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

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

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

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

Example

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

Emitted when cell enters edit mode.

Remarks

This event is cancelable.

Example

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

Emitted when cell exits edit mode.

Example

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

Controls the copy behavior of the grid.

Emitted when a column is initialized.

Remarks

Returns the column object.

Example

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

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

Emitted when column moving ends.

Remarks

Returns the source and target IgxColumnComponent objects.

Example

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

Emitted when column moving starts.

Remarks

Returns the moved IgxColumnComponent object.

Example

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

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;
    }
}
Copy

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;
    }
}
Copy

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

Emitted when IgxColumnComponent is selected.

Example

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

Emitted after column visibility is changed.

Remarks

Args: { column: IgxColumnComponent, newValue: boolean }

Example

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

Emitted before column visibility is changed.

Remarks

Args: { column: any, newValue: boolean }

Example

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

Emitted when a cell or row is right clicked.

Remarks

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

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

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

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

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

Gets/Sets a custom template when empty.

Example

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

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

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

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

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

Represents the grid service type providing API methods for the grid

Emitted when a copy operation is executed.

Remarks

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

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

Emitted when grid is scrolled horizontally/vertically.

Example

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

Gets/Sets a custom template when loading.

Example

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

Controls whether columns moving is enabled in the grid.

Gets/Sets the primary key.

Example

<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
Copy

Emitted when making a range selection.

Remarks

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

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

Emmited just before the newly added row is commited.

Remarks

This event is cancelable. Returns an IRowDataCancellableEventArgs` object.

Example

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

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

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 };
Copy

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

Memberof

IgxColumnComponent

Emitted when a row is clicked.

Remarks

Returns the IgxGridRow.

Example

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

Emmited when deleting a row.

Remarks

This event is cancelable. Returns an IRowDataCancellableEventArgs` object.

Example

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

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

Emitted when dropping a row.

Remarks

Return the dropped row.

Emitted when start dragging a row.

Remarks

Return the dragged row.

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

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

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

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

Emitted when the pinned state of a row is changed.

Example

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

Emitted when the pinned state of a row is changed.

Example

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

Emitted when IgxGridRowComponent is selected.

Example

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

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'
}
Copy

<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
Copy

Memberof

IgxColumnComponent

Emitted when the expanded state of a row gets changed.

Example

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

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

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

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

Remarks

By default it is 6000ms.

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

Emitted after sorting is completed.

Remarks

Returns the sorting expression.

Example

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

Emitted before sorting is performed.

Remarks

Returns the sorting expressions.

Example

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

Emitted when an export process is initiated by the user.

Example

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

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

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

Emitted when grid's validation status changes.

Example

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

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

Example

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