Emmited when the active node is changed.
Gets/Sets a custom template for adding row UI when grid is empty.
Emitted after advanced filtering is performed.
Gets/Sets whether to auto-generate the columns.
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 }]
ReadonlycdrProvides 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.
Emitted when cell has been edited.
Emitted after cell has been edited and editing has been committed.
Emitted when cell enters edit mode.
Emitted when cell exits edit mode.
Controls the copy behavior of the grid.
Emitted when a column is initialized.
Emitted during the column moving operation.
Emitted when column moving ends.
Emitted when column moving starts.
Emitted before IgxColumnComponent is pinned.
Emitted after IgxColumnComponent is pinned.
Emitted after column is resized.
Emitted when IgxColumnComponent is selected.
Emitted after column visibility is changed.
Emitted before column visibility is changed.
Emitted when a cell or row is right clicked.
Emitted after the grid's data view is changed because of a data operation, rebinding, etc.
Emitted before the grid's data view is changed because of a data operation, rebinding, etc.
Emitted when a new chunk of data is loaded from virtualization.
Emitted when a cell is double clicked.
Gets/Sets a custom template when empty.
Emitted before filtering expressions are applied.
Emitted after filtering is performed through the UI.
Emitted after filtering is performed.
Emitted when formGroup is created on edit of row/cell.
Represents the grid service type providing API methods for the grid
Emitted when a copy operation is executed.
Fired only if copy behavior is enabled through the [clipboardOptions]IgxGridBaseDirective#clipboardOptions.
Emitted when keydown is triggered over element inside grid's body.
Emitted when grid is scrolled horizontally/vertically.
Gets/Sets the key indicating whether a row has children. If row has no children it does not render an expand indicator.
Gets/Sets a custom template when loading.
Controls whether columns moving is enabled in the grid.
Gets/Sets the primary key.
Emitted when making a range selection.
Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM
Emmited just before the newly added row is commited.
Emitted when a row is added.
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>
Emitted when a row is clicked.
Emmited when deleting a row.
Emitted when a row is deleted.
Emitted when dropping a row.
Emitted when start dragging a 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 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.
Emitted when the pinned state of a row is changed.
Emitted when IgxGridRowComponent is selected.
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>
Emitted when the expanded state of a row gets changed.
Emitted when a cell is selected.
Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid
Gets/Sets whether the expand/collapse all button in the header should be rendered.
Gets/Sets the display time for the row adding snackbar notification.
Emitted before sorting expressions are applied.
Emitted after sorting is completed.
Emitted before sorting is performed.
Emitted when an export process is initiated by the user.
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>
ReadonlyvalidationRepresents the validation service for the grid. The type contains properties and methods (logic) for validating records
Emitted when grid's validation status changes.
Gets/Sets the trigger for validators used when editing the grid.
Gets/Sets the advanced filtering state.
let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
this.grid.advancedFilteringExpressionsTree = logic;
Gets/Sets a value indicating whether the advanced filtering is enabled.
<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>
Gets/Sets if the filtering is enabled.
<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered
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.
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.
Gets/Sets cell selection mode.
Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade'
Gets/Sets column selection mode
Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade'
Gets/Sets the default width of the columns.
Gets an array of IgxColumnComponents.
Returns an array of data set to the IgxHierarchicalGridComponent.
let filteredData = this.grid.filteredData;
Gets/Sets the array of data that populates the component.
<igx-hierarchical-grid [data]="Data" [autoGenerate]="true"></igx-hierarchical-grid>
Gets/Sets the data clone strategy of the grid when in edit mode.
Strategy, used for cloning the provided data. The type has one method, that takes any type of data
A list of currently rendered IgxGridRowComponent's.
Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.
Gets the default row height.
Gets the custom template, if any, used for row drag ghost.
Sets a custom template for the row drag ghost.
<ng-template #template igxRowDragGhost>
<igx-icon>menu</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.dragGhostCustomTemplate = this.template;
The custom template, if any, that should be used when rendering the row drag indicator icon
Sets a custom template that should be used when rendering the row drag indicator icon.
<ng-template #template igxDragIndicatorIcon>
<igx-icon>expand_less</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.dragIndicatorIconTemplate = this.template;
Gets/Sets the message displayed when there are no records and the grid is filtered.
<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
Gets the excel style header icon.
Sets the excel style header icon.
<ng-template #template igxExcelStyleHeaderIcon>
<igx-icon>filter_alt</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.excelStyleHeaderIconTemplate = this.template;
Gets if all immediate children of the IgxHierarchicalGridComponent previously have been set to be expanded/collapsed.
If previously set and some rows have been manually expanded/collapsed it will still return the last set value.
const expanded = this.grid.expandChildren;
Sets if all immediate children of the IgxHierarchicalGridComponent should be expanded/collapsed.
Default value is false.
<igx-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" [expandChildren]="true"></igx-hierarchical-grid>
Gets/Sets a list of key-value pairs [row ID, expansion state].
Includes only states that differ from the default one. Supports two-way binding.
<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
</igx-grid>
Gets/Sets the filter mode.
<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
By default it's set to FilterMode.quickFilter.
The filter mode for the grid. It can be quick filter of excel-style filter
Gets/Sets the filtering strategy of the grid.
Returns an array of objects containing the filtered data.
Returns an array containing the filtered sorted data.
Gets/Sets the filtering state.
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>
Supports two-way binding.
Gets/Sets the filtering logic of the IgxGridComponent.
The default is AND.
<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>
Gets the unique identifier of the parent row. It may be a string or number if primaryKey of the
parent grid is set or an object reference of the parent record otherwise.
const foreignKey = this.grid.foreignKey;
Indicates whether the grid has columns that are shown
Gets the header row selector template.
Sets the header row selector template.
<ng-template #template igxHeadSelector let-headContext>
{{ headContext.selectedCount }} / {{ headContext.totalCount }}
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headSelectorTemplate = this.template;
Gets the row collapse indicator template.
Sets the row collapse indicator template.
<ng-template igxHeaderCollapsedIndicator>
<igx-icon role="button">add</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headerCollapsedIndicatorTemplate = this.template;
Gets the header expand indicator template.
Sets the header expand indicator template.
<ng-template igxHeaderExpandedIndicator>
<igx-icon role="button">remove</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headerExpandedIndicatorTemplate = this.template;
Gets/Sets the height.
Gets the number of hidden columns.
Gets/Sets if the row selectors are hidden.
Gets/Sets whether the grid is going to show a loading indicator.
Represents the last search information.
Gets/Sets the locale.
Represents the locale of the grid: USD, EUR, GBP, CNY, JPY, etc.
Gets the native element.
Gets the outlet used to attach the grid's overlays to.
If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive.
Sets the outlet used to attach the grid's overlays to.
Represents the paging of the grid. It can be either 'Local' or 'Remote'
Represents the paging of the grid. It can be either 'Local' or 'Remote'
Gets an array of the pinned IgxColumnComponents.
Gets the number of pinned columns.
Gets an array of the pinned IgxRowComponents.
Gets/Sets the initial pinning configuration.
Allows to apply pinning the columns to the start or the end. Note that pinning to both sides at a time is not allowed.
<igx-grid [pinning]="pinningConfig"></igx-grid>
The configuration for columns and rows pinning in the grid It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom)
Gets/Sets the resource strings.
Gets the row add text template.
Sets the row add text template.
<ng-template #template igxRowAddText>
Adding Row
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowAddTextTemplate = this.template;
Gets the row collapse indicator template.
Sets the row collapse indicator template.
<ng-template igxRowCollapsedIndicator>
<igx-icon role="button">add</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowCollapsedIndicatorTemplate = this.template;
Gets/Sets whether rows can be moved.
Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged
Gets the row edit actions template.
Sets the row edit actions template.
<ng-template #template igxRowEditActions let-endRowEdit>
<button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
<button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowEditActionsTemplate = this.template;
Gets the row edit text template.
Sets the row edit text template.
<ng-template #template igxRowEditText let-rowChangesCount>
Changes: {{rowChangesCount}}
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowEditTextTemplate = this.template;
Gets/Sets whether the rows are editable.
By default it is set to false.
<igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>
Indicates whether rows in the grid are editable. If te value is true, the rows can be edited
Gets the row expand indicator template.
Sets the row expand indicator template.
<ng-template igxRowExpandedIndicator>
<igx-icon role="button">remove</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowExpandedIndicatorTemplate = this.template;
Gets/Sets the row height.
The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling
A list of IgxGridRowComponent.
Gets/Sets row selection mode
By default the row selection mode is 'none' Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple'
Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade'
Gets the row selector template.
Sets a custom template for the row selectors.
<ng-template #template igxRowSelector let-rowContext>
<igx-checkbox [checked]="rowContext.selected"></igx-checkbox>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowSelectorTemplate = this.template;
Gets/Sets whether clicking over a row should select/deselect it
Gets/Sets the current selection state.
Represents the selected rows' IDs (primary key or rowData)
<igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>
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.
The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.
Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order.
<ng-template #template igxSortAscendingHeaderIcon>
<igx-icon>expand_less</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortAscendingHeaderIconTemplate = this.template;
The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.
Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order.
<ng-template #template igxSortDescendingHeaderIcon>
<igx-icon>expand_more</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortDescendingHeaderIconTemplate = this.template;
Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.
Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted.
<ng-template #template igxSortHeaderIcon>
<igx-icon>unfold_more</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortHeaderIconTemplate = this.template;
Gets/Sets the sorting strategy of the grid.
Gets/Sets the sorting state.
Supports two-way data binding.
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
Gets/Sets the sorting options - single or multiple sorting.
Accepts an ISortingOptions object with any of the mode properties.
const _sortingOptions: ISortingOptions = {
mode: 'single'
}
```html
<igx-grid [sortingOptions]="sortingOptions"><igx-grid>
Gets/Sets the summary calculation mode.
<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level.
Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels'
Gets/Sets the summary position.
<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>
By default it is bottom.
Represents the position of summaries: 'top', 'bottom'
Get/Set IgxSummaryRow height
Gets/Sets the total number of records in the data source.
This property is required for remote grid virtualization to function when it is bound to remote data.
const itemCount = this.grid1.totalItemCount;
this.grid1.totalItemCount = 55;
Returns the total number of records.
Get transactions service for the grid.
Gets an array of unpinned IgxColumnComponents.
Returns the state of the grid virtualization.
Includes the start index and how many records are rendered.
const gridVirtState = this.grid1.virtualizationState;
Returns an array of visible IgxColumnComponents.
Gets/Sets the width of the grid.
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);
The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view
Whether the record should be added as a child. Only applicable to igxTreeGrid.
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);
The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
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();
Deselect specified columns by field.
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');
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>
Filters a single IgxColumnComponent.
public filter(term) {
this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
}
Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
the string to search.
optionally, if the search should be case sensitive (defaults to false).
optionally, if the text should match the entire value (defaults to false).
Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
the string to search.
optionally, if the search should be case sensitive (defaults to false).
optionally, if the text should match the entire value (defaults to false).
Returns the IgxColumnComponent by field name.
Gets the width to be set on IgxGridHeaderGroupComponent.
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);
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);
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.
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.
Get the currently selected ranges in the grid.
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();
Places a column before or after the specified target column.
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(); });
Opens the advanced filtering dialog.
Pins a column by field name.
Pin the row by its id.
ID is either the primaryKey value or the data record instance.
this.grid.pinRow(rowID);
The row id - primaryKey value or the data record instance.
The index at which to insert the row in the pinned collection.
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);
Select specified columns.
if true clears the current selection
Select range(s) of cells between certain rows and columns of the grid.
Get current selected columns.
Sort a single IgxColumnComponent.
Sort the IgxGridComponent's IgxColumnComponent based on the provided array of sorting expressions.
this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
Unpins a column by field name. Returns whether the operation is successful.
Updates the IgxGridRowComponent and the corresponding data record by primary key.
Requires that the primaryKey property is set.
this.gridWithPK.updateCell('Updated', 1, 'ProductName');
the new value which is to be set.
corresponds to rowID.
corresponds to column field.
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);
correspond to rowID
Hierarchical grid
Igx Module
IgxHierarchicalGridModule