<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>
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>
Emitted when a cell is clicked.
Returns the IgxGridCell
.
<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
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>
Emitted after cell has been edited and editing has been committed.
<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
Emitted when cell enters edit mode.
This event is cancelable.
<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
Emitted when cell exits edit mode.
<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>
Emitted when a column is initialized.
Returns the column object.
<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid>
Emitted during the column moving operation.
Returns the source and target IgxColumnComponent
objects. This event is cancelable.
<igx-grid (columnMoving)="moving($event)"></igx-grid>
Emitted when column moving ends.
Returns the source and target IgxColumnComponent
objects.
<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid>
Emitted when column moving starts.
Returns the moved IgxColumnComponent
object.
<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid>
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;
}
}
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;
}
}
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>
Emitted when IgxColumnComponent
is selected.
<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
Emitted after column visibility is changed.
Args: { column: IgxColumnComponent, newValue: boolean }
<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
Emitted before column visibility is changed.
Args: { column: any, newValue: boolean }
<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>
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>
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>
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>
Emitted when a new chunk of data is loaded from virtualization.
<igx-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" (dataPreLoad)="handleEvent()">
</igx-hierarchical-grid>
Emitted when a cell is double clicked.
Returns the IgxGridCell
object.
<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>
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>
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>
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>
Emitted when formGroup is created on edit of row/cell.
<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Emitted when a copy operation is executed.
Fired only if copy behavior is enabled through the [clipboardOptions
]IgxGridBaseDirective#clipboardOptions.
Event emitted when a grid is being created based on this row island.
<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
<igx-row-island [key]="'childData'" (gridCreated)="gridCreated($event)" #rowIsland>
<!-- ... -->
</igx-row-island>
</igx-hierarchical-grid>
IgxRowIslandComponent
Emitted after a grid is being initialized for this row island.
The emitting is done in ngAfterViewInit
.
<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
<igx-row-island [key]="'childData'" (gridInitialized)="gridInitialized($event)" #rowIsland>
<!-- ... -->
</igx-row-island>
</igx-hierarchical-grid>
IgxRowIslandComponent
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>
Emitted when grid is scrolled horizontally/vertically.
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(gridScroll)="onScroll($event)"></igx-grid>
Emitted when making a range selection.
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.
This event is cancelable. Returns an IRowDataCancellableEventArgs` object.
<igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
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>
Emitted when a row is clicked.
Returns the IgxGridRow
.
<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
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>
Emitted when a row is deleted.
Returns an IRowDataEventArgs
object.
<igx-grid #grid [data]="localData" (rowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Emitted when dropping a row.
Return the dropped row.
Emitted when start dragging a row.
Return the dragged row.
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>
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>
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>
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>
Emitted when the pinned state of a row is changed.
<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid>
Emitted when the pinned state of a row is changed.
<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid>
Emitted when IgxGridRowComponent
is selected.
<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
Emitted when the expanded state of a row gets changed.
<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>
Emitted when a cell is selected.
Returns the IgxGridCell
.
<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
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>
Emitted after sorting is completed.
Returns the sorting expression.
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>
Emitted before sorting is performed.
Returns the sorting expressions.
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
Emitted when an export process is initiated by the user.
toolbarExporting(event: IGridToolbarExportEventArgs){
const toolbarExporting = event;
}
Emitted when grid's validation status changes.
<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Emmited when the active node is changed.