An @Input property that sets the title to be displayed in the built-in column hiding UI.
<igx-grid [showToolbar]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"></igx-grid>An @Input property that sets the title to be displayed in the UI of the column pinning.
<igx-grid #grid [data]="localData" [columnPinning]="'true" [columnPinningTitle]="'Column Hiding'" [autoGenerate]="true"></igx-grid>The custom template, if any, that should be used when rendering the row drag indicator icon
// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.dragIndicatorIconTemplate = myCustomTemplate;<!-- Set in markup -->
<igx-grid #grid>
...
<ng-template igxDragIndicatorIcon>
<igx-icon fontSet="material">info</igx-icon>
</ng-template>
</igx-grid>A template reference for the template when the filtered IgxGridComponent is empty.
const emptyTempalte = this.grid.emptyGridTemplate;A template reference for the template when the IgxGridComponent is empty.
const emptyTempalte = this.grid.emptyGridTemplate;An @Input property that sets a custom template when the IgxGridComponent is empty.
<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>An @Input property that adds styling classes applied to all even IgxGridRowComponents in the grid.
<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>The custom template, if any, that should be used when rendering a header collapse indicator.
The custom template, if any, that should be used when rendering a header expand indicator.
Sets the key of the row island by which child data would be taken from the row data if such is provided.
<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
<igx-row-island [key]="'childData'">
<!-- ... -->
</igx-row-island>
</igx-hierarchical-grid>An @Input property that sets a custom template when the IgxGridComponent is loading.
<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>An @Input property that adds styling classes applied to all odd IgxGridRowComponents in the grid.
<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>Emitted when IgxGridCellComponent is clicked. Returns the IgxGridCellComponent.
<igx-grid #grid (onCellClick)="onCellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>public onCellClick(e){
alert("The cell has been clicked!");
}An @Output property emitting an event when IgxGridCellComponent editing has been performed in the grid.
Event is fired after editing is completed, when the cell is exiting edit mode.
This event is cancelable.
args: IGridEditEventArgs = { cancel: bool, cellID: { columnID: int, rowID: int, rowIndex: int } newValue: object, oldValue: object, rowID: int }
editDone(event: IGridEditEventArgs){
const value: IgxColumnComponent = event.newValue;
}<igx-grid #grid3 (onCellEdit)="editDone($event)" [data]="remote | async" (onSortingDone)="process($event)"
[primaryKey]="'ProductID'">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>An @Output property emitting an event when IgxGridCellComponent
editing has been performed in the grid and the values have not been submitted (e.g. Esc key was pressed).
This event is cancelable.
args: IGridEditEventArgs = { cancel: bool, cellID: { columnID: int, rowID: int, rowIndex: int } newValue: object, oldValue: object, rowID: int }
editCancel(event: IGridEditEventArgs){
const rowID: IgxColumnComponent = event.rowID;
}<igx-grid #grid3 (onCellEditCancel)="editCancel($event)" [data]="remote | async" [primaryKey]="'ProductID'">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>An @Output property emitting an event when IgxGridCellComponent enters edit mode.
This event is cancelable.
args: IGridEditEventArgs = { cancel: bool, cellID: { columnID: int, rowID: int, rowIndex: int } oldValue: object, rowID: int }
editStart(event: IGridEditEventArgs){
const value: IgxColumnComponent = event.newValue;
}<igx-grid #grid3 (onCellEditEnter)="editStart($event)" [data]="remote | async" (onSortingDone)="process($event)"
[primaryKey]="'ProductID'">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>Emitted when a grid column is initialized. Returns the column object.
<igx-grid #grid [data]="localData" [onColumnInit]="initColumns($event)" [autoGenerate]="true"></igx-grid>initColumns(event: IgxColumnComponent) {
const column: IgxColumnComponent = event;
column.filterable = true;
column.sortable = true;
column.editable = true;
}Emitted throughout the IgxColumnComponent moving operation.
Returns the source and target IgxColumnComponent objects. This event is cancelable.
moving(event: IColumnMovingEventArgs){
const moving = event;
}<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMoving)="moving($event)"></igx-grid>Emitted when IgxColumnComponent moving ends.
Returns the source and target IgxColumnComponent objects.
movingEnds(event: IColumnMovingEndEventArgs){
const movingEnds = event;
}<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingEnd)="movingEnds($event)"></igx-grid>Emitted when IgxColumnComponent moving starts. Returns the moved IgxColumnComponent object.
movingStart(event: IColumnMovingStartEventArgs){
const movingStarts = event;
}<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingStart)="movingStart($event)"></igx-grid>Emitted when 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 when IgxColumnComponent is resized.
Returns the IgxColumnComponent object's old and new width.
resizing(event: IColumnResizeEventArgs){
const grouping = event;
}<igx-grid #grid [data]="localData" (onColumnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>Emitted when IgxColumnComponent visibility is changed. Args: { column: any, newValue: boolean }
visibilityChanged(event: IColumnVisibilityChangedEventArgs){
const visiblity = event;
}<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnVisibilityChanged)="visibilityChanged($event)"></igx-grid>Emitted when a IgxGridCellComponent is right clicked. Returns the IgxGridCellComponent object.
contextMenu(event: IGridCellEventArgs){
const resizing = event;
console.log(resizing);
}<igx-grid #grid [data]="localData" (onContextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>Emitted when a new chunk of data is loaded from virtualization.
<igx-grid #grid [data]="localData" [autoGenerate]="true" (onDataPreLoad)='handleDataPreloadEvent()'></igx-grid>Emitted when a IgxGridCellComponent is double clicked. Returns the IgxGridCellComponent object.
dblClick(event: IGridCellEventArgs){
const dblClick = event;
console.log(dblClick);
}<igx-grid #grid [data]="localData" (onDoubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>Emitted when filtering is performed through the UI. Returns the filtering expressions tree of the column for which filtering was performed.
filteringDone(event: IFilteringExpressionsTree){
const filteringTree = event;
}<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onFilteringDone)="filteringDone($event)"></igx-grid>Emitted when a copy operation is executed.
Fired only if copy behavior is enabled through the [clipboardOptions]{@link IgxGridBaseComponent#clipboardOptions}.
Event emmited when a grid is being created based on this row island.
<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
<igx-row-island [key]="'childData'" (onGridCreated)="gridCreated($event)" #rowIsland>
<!-- ... -->
</igx-row-island>
</igx-hierarchical-grid>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.
customKeydown(args: IGridKeydownEventArgs) {
const keydownEvent = args.event;
} <igx-grid (onGridKeydown)="customKeydown($event)"></igx-grid>Emitted when paging is performed. Returns an object consisting of the previous and next pages.
pagingDone(event: IPageEventArgs){
const paging = event;
}<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onPagingDone)="pagingDone($event)"></igx-grid>Emitted when making a range selection either through drag selection or through keyboard selection.
Emitted when a IgxGridRowComponent is being added to the IgxGridComponent through the API.
Returns the data for the new IgxGridRowComponent object.
rowAdded(event: IRowDataEventArgs){
const rowInfo = event;
}<igx-grid #grid [data]="localData" (onRowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>Emitted when a IgxGridRowComponent is deleted through the IgxGridComponent API.
Returns an IRowDataEventArgs object.
rowDeleted(event: IRowDataEventArgs){
const rowInfo = event;
}<igx-grid #grid [data]="localData" (onRowDeleted)="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.
An @Output property emitting an event 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.
args: IGridEditEventArgs = {
cancel: bool,
newValue:
Bind to the event in markup as follows:
<igx-grid #grid3 (onRowEdit)="editDone($event)" [data]="remote | async" (onSortingDone)="process($event)"
[primaryKey]="'ProductID'" [rowEditable]="true">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid> editDone(event: IGridEditEventArgs) {
const originalRowObj = event.oldValue;
const updatedRowObj = event.newValue;
const cancelValue = event.cancel;
const rowID = event.rowID;
}An @Output property emitting an event 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.
This event is cancelable.
args: IGridEditEventArgs = {
cancel: bool,
newValue:
Bind to the event in markup as follows:
<igx-grid #grid3 (onRowEditCancel)="editCancel($event)" [data]="remote | async" (onSortingDone)="process($event)"
[primaryKey]="'ProductID'" [rowEditable]="true">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid> editCancel(emitted: { row: IgxGridRowComponent, newValue: any, oldValue: any }): void {
const originalRowObj = event.oldValue;
const updatedRowObj = event.newValue;
const cancelValue = event.cancel;
const rowID = event.rowID;
}An @Output property emitting an event when [rowEditable]="true" a row enters edit mode. This event is cancelable.
args: IGridEditEventArgs = {
cancel: bool,
oldValue:
Bind to the event in markup as follows:
<igx-grid #grid3 (onRowEditEnter)="editStart($event)" [data]="remote | async" (onSortingDone)="process($event)"
[primaryKey]="'ProductID'" [rowEditable]="true">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid> editStart(event: IGridEditEventArgs) {
const editedRowObj = event.oldValue;
const cancelValue = event.cancel;
const rowID = event.rowID;
} Emitted when IgxGridRowComponent is selected.
<igx-grid #grid (onRowSelectionChange)="onCellClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>public onCellClickChange(e){
alert("The selected row has been changed!");
}Emitted when IgxGridCellComponent is selected. Returns the IgxGridCellComponent.
<igx-grid #grid (onSelection)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>public onCellSelect(e){
alert("The cell has been selected!");
}Emitted when sorting is performed through the UI. Returns the sorting expression.
<igx-grid #grid [data]="localData" [autoGenerate]="true" (onSortingDone)="sortingDone($event)"></igx-grid>sortingDone(event: SortingDirection){
const sortingDirection = event;
}Emitted when an export process is initiated by the user.
toolbarExporting(event: IGridToolbarExportEventArgs){
const toolbarExporting = event;
}You can provide a custom ng-template for the pagination UI of the grid.
<igx-grid #grid [paging]="true" [myTemplate]="myTemplate" [height]="'305px'"></igx-grid>An @Input property that sets the primary key of the IgxGridComponent.
<igx-grid #grid [data]="localData" [showToolbar]="true" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>The custom template, if any, that should be used when rendering a row collapse indicator.
The custom template, if any, that should be used when rendering a row expand indicator.
A property that allows the columns to 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;
this.remoteData = this.remoteService.remoteData;Provides access to the IgxToolbarComponent.
const gridToolbar = this.grid.toolbar;An @Input property that 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>public columnValuesStrategy = (column: IgxColumnComponent,
filteringExpressionsTree: IFilteringExpressionsTree,
done: (uniqueValues: any[]) => void) => {
this.dataService.getColumnData(column, filteringExpressionsTree, uniqueValues => done(uniqueValues));
}Returns the advanced filtering state of IgxGridComponent.
let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;Sets the advanced filtering state of the IgxGridComponent.
const logic = new FilteringExpressionsTree(FilteringLogic.And);
logic.filteringOperands = [
{
condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
fieldName: 'ID',
searchVal: 1
},
{
condition: IgxStringFilteringOperand.instance().condition('contains'),
fieldName: 'CompanyName',
searchVal: 'a'
}
];
this.grid.advancedFilteringExpressionsTree = logic;Returns a value indicating whether the advanced filtering is enabled.
let filtering = this.grid.allowAdvancedFiltering;Sets a value indicating whether the advanced filtering is enabled. By default it's disabled.
<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [showToolbar]="true" [autoGenerate]="true"></igx-grid>Returns if the filtering is enabled.
let filtering = this.grid.allowFiltering;Sets if the filtering is enabled. By default it's disabled.
<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>Returns the maximum width of the container for the pinned IgxColumnComponents.
The width is 80% of the total grid width.
const maxPinnedColWidth = this.grid.calcPinnedContainerMaxWidth;Returns the current cell selection state, which can be none, single or multiple
Allows you to set cell selection mode By default the cell selection mode is multiple
Returns whether the column hiding UI for the IgxGridComponent is enabled.
By default it is disabled (false).
let gridColHiding = this.grid.columnHiding;Sets whether the column hiding UI for the IgxGridComponent is enabled.
In order for the UI to work, you need to enable the toolbar as shown in the example below.
<igx-grid [data]="Data" [autoGenerate]="true" [showToolbar]="true" [columnHiding]="true"></igx-grid>Returns if the built-in column pinning UI should be shown in the toolbar.
let colPinning = this.grid.columnPinning;Sets if the built-in column pinning UI should be shown in the toolbar. By default it's disabled.
<igx-grid #grid [data]="localData" [columnPinning]="'true" [height]="'305px'" [autoGenerate]="true"></igx-grid>An @Input property that sets the default width of the IgxGridComponent's columns.
<igx-grid #grid [data]="localData" [showToolbar]="true" [columnWidth]="100" [autoGenerate]="true"></igx-grid>An @Input property that sets the default width of the IgxGridComponent's columns.
<igx-grid #grid [data]="localData" [showToolbar]="true" [columnWidth]="100" [autoGenerate]="true"></igx-grid>Returns an array of IgxColumnComponents.
const colums = this.grid.columns.A list of IgxGridRowComponent, currently rendered.
const dataList = this.grid.dataRowList;Returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid.
const dataView = this.grid.dataView;Returns the IgxGridHeaderGroupComponent's minimum allowed width.
Used internally for restricting header group component width.
The values below depend on the header cell default right/left padding values.
Returns the IgxGridComponent's rows height.
const rowHeigh = this.grid.defaultRowHeight;Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;Sets the theme of the component.
An accessor that returns the message displayed when there are no records and the grid is filtered.
An @Input property that 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>An accessor that returns the message displayed when there are no records.
An @Input property that sets the message displayed when there are no records.
<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>Gets if all immediate children of the grids for this IgxRowIslandComponent have been set to be expanded/collapsed.
const expanded = this.rowIsland.expandChildren;Sets if all immediate children of the grids for this IgxRowIslandComponent should be expanded/collapsed.
<igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
<igx-row-island [key]="'childData'" [expandChildren]="true" #rowIsland>
<!-- ... -->
</igx-row-island>
</igx-hierarchical-grid>Returns whether the option for exporting to CSV is enabled or disabled.
const exportCsv = this.grid.exportCsv;Enable or disable the option for exporting to CSV.
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportCsv]="true"></igx-grid>Returns the textual content for the CSV export button.
const csvText = this.grid.exportCsvText;Sets the textual content for the CSV export button.
<igx-grid [exportCsvText]="'My Csv Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportExcel]="true"></igx-grid>Returns whether the option for exporting to MS Excel is enabled or disabled.
cosnt excelExporter = this.grid.exportExcel;Enable or disable the option for exporting to MS Excel.
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportExcel]="true"></igx-grid>Returns the textual content for the MS Excel export button.
const excelText = this.grid.exportExcelText;Sets the textual content for the MS Excel export button.
<igx-grid [exportExcelText]="'My Excel Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>Returns the textual content for the main export button.
const exportText = this.grid.exportText;Sets the textual content for the main export button.
<igx-grid [data]="localData" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>A list of all IgxGridFilteringCellComponent.
const filterCells = this.grid.filterCellList;Returns the filter mode.
let filtering = this.grid.filterMode;Sets filter mode. By default it's set to FilterMode.quickFilter.
<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>Gets the filtering strategy of the grid.
let filterStrategy = this.grid.filterStrategySets the filtering strategy of the grid.
<igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>Returns an array containing the filtered sorted data.
const filteredSortedData = this.grid1.filteredSortedData;Returns an array containing the filtered sorted data.
const filteredSortedData = this.grid1.filteredSortedData;Returns the filtering state of IgxGridComponent.
let filteringExpressionsTree = this.grid.filteringExpressionsTree;Sets the filtering state of the IgxGridComponent.
const logic = new FilteringExpressionsTree(FilteringLogic.And, "ID");
logic.filteringOperands = [
{
condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
fieldName: 'ID',
searchVal: 1
}
];
this.grid.filteringExpressionsTree = (logic);Two-way data binding.
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>Sets the filtering logic of the IgxGridComponent.
The default is AND.
<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>Sets the filtering logic of the IgxGridComponent.
The default is AND.
<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>Returns if the IgxGridComponent has column groups.
const groupGrid = this.grid.hasColumnGroups;Returns if the IgxGridComponent has column layouts for multi-row layout definition.
const layoutGrid = this.grid.hasColumnLayouts;Returns if the IgxGridComponent has editable columns.
const editableGrid = this.grid.hasEditableColumns;Returns if the IgxGridComponent has fiterable columns.
const filterableGrid = this.grid.hasFilterableColumns;Returns if the IgxGridComponent has moveable columns.
const movableGrid = this.grid.hasMovableColumns;Returns if the IgxGridComponent has sortable columns.
const sortableGrid = this.grid.hasSortableColumns;Returns if the IgxGridComponent has summarized columns.
const summarizedGrid = this.grid.hasSummarizedColumns;A list of all IgxGridHeaderComponent.
const headers = this.grid.headerCellList;A list of all IgxGridHeaderGroupComponent.
const headerGroupsList = this.grid.headerGroupsList;Returns the width of the header of the IgxGridComponent.
let gridHeaderWidth = this.grid.headerWidth;Returns the height of the IgxGridComponent.
let gridHeight = this.grid.height;Sets the height of the IgxGridComponent.
<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>Returns the number of hidden IgxColumnComponent.
`typescript
const hiddenCol = this.grid.hiddenColumnsCount;
Returns the text to be displayed inside the toggle button
for the built-in column hiding UI of theIgxColumnComponent.
const hiddenColText = this.grid.hiddenColumnsText;Sets the text to be displayed inside the toggle button
for the built-in column hiding UI of theIgxColumnComponent.
<igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>Returns if the row selectors are hidden
Allows you to change the visibility of the row selectors By default row selectors are shown
Returns if the current page is the first page.
const firstPage = this.grid.isFirstPage;Returns if the current page is the last page.
const lastPage = this.grid.isLastPage;An accessor that returns whether the grid is showing loading indicator.
An @Input property that sets whether the grid is going to show loading indicator.
<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>Returns the locale of the grid. If not set, returns browser's language.
Sets the locale of the grid.
Returns the native element of the IgxGridComponent.
const nativeEl = this.grid.nativeElement.Returns the current page index.
let gridPage = this.grid.page;Sets the current page index.
<igx-grid #grid [data]="Data" [paging]="true" [page]="5" [autoGenerate]="true"></igx-grid>Two-way data binding.
<igx-grid #grid [data]="Data" [paging]="true" [(page)]="model.page" [autoGenerate]="true"></igx-grid>Returns whether the paging feature is enabled/disabled. The default state is disabled (false).
const paging = this.grid.paging;Enables/Disables the paging feature.
<igx-grid #grid [data]="Data" [autoGenerate]="true" [paging]="true"></igx-grid>Returns the number of visible items per page of the IgxGridComponent.
The default is 15.
let itemsPerPage = this.grid.perPage;Two-way data binding.
<igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>Sets the number of visible items per page of the IgxGridComponent.
<igx-grid #grid [data]="Data" [paging]="true" [perPage]="5" [autoGenerate]="true"></igx-grid>Two-way data binding.
<igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>Returns an array of the pinned IgxColumnComponents.
const pinnedColumns = this.grid.pinnedColumns.Returns the text to be displayed inside the toggle button
for the built-in column pinning UI of theIgxColumnComponent.
const pinnedText = this.grid.pinnedColumnsText;Sets the text to be displayed inside the toggle button
for the built-in column pinning UI of theIgxColumnComponent.
<igx-grid [pinnedColumnsText]="'PinnedCols Text" [data]="data" [width]="'100%'" [height]="'500px'"></igx-grid>Returns the current width of the container for the pinned IgxColumnComponents.
const pinnedWidth = this.grid.getPinnedWidth;An accessor that returns the resource strings.
An accessor that sets the resource strings. By default it uses EN resources.
Sets whether rows can be moved.
<igx-grid #grid [rowDraggable]="true"></igx-grid>Sets whether rows can be moved.
<igx-grid #grid [rowDraggable]="true"></igx-grid>Sets whether the IgxGridRowComponent is editable.
By default it is set to false.
let rowEditable = this.grid.rowEditable;Sets whether rows can be edited.
<igx-grid #grid [showToolbar]="true" [rowEditable]="true" [primaryKey]="'ProductID'" [columnHiding]="true"></igx-grid>Returns the row height.
const rowHeight = this.grid.rowHeight;Sets the row height.
<igx-grid #grid [data]="localData" [showToolbar]="true" [rowHeight]="100" [autoGenerate]="true"></igx-grid>A list of IgxGridRowComponent.
const rowList = this.grid.rowList;Returns the current row selection state, which can be none, single or multiple
Allows you to set row selection mode By default the row selection mode is none
Returns an array of the selected IgxGridCellComponents.
const selectedCells = this.grid.selectedCells;Returns whether the IgxGridComponent's toolbar is shown or hidden.
const toolbarGrid = this.grid.showToolbar;Shows or hides the IgxGridComponent's toolbar.
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" ></igx-grid>Returns the sorting state of the IgxGridComponent.
const sortingState = this.grid.sortingExpressions;Two-way data binding.
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>Sets the sorting state of the IgxGridComponent.
this.grid.sortingExpressions = [{
fieldName: "ID",
dir: SortingDirection.Desc,
ignoreCase: true
}];Two-way data binding.
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>Returns the summary calculation mode.
let summaryCalculationMode = this.grid.summaryCalculationMode;Sets summary calculation mode. By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level.
<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>Returns the summary position.
let summaryPosition = this.grid.summaryPosition;Sets summary position. By default it is bottom.
<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>Returns the template which will be used by the toolbar to show custom content.
let customContentTemplate = this.grid.toolbarCustomContentTemplate;Returns the toolbar's title.
const toolbarTitle = this.grid.toolbarTitle;Sets the toolbar's title.
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [toolbarTitle]="'My Grid'"></igx-grid>Returns the total number of pages.
const totalPages = this.grid.totalPages;Returns the total number of records. Only functions when paging is enabled.
const totalRecords = this.grid.totalRecords;Returns the total width of the IgxGridComponent.
const gridWidth = this.grid.totalWidth;Get transactions service for the children grid components.
Returns the minimum width of the container for the unpinned IgxColumnComponents.
The width is 20% of the total grid width.
const minUnpinnedColWidth = this.grid.unpinnedAreaMinWidth;Returns an array of unpinned IgxColumnComponents.
const unpinnedColumns = this.grid.unpinnedColumns.Returns the current width of the container for the unpinned IgxColumnComponents.
const unpinnedWidth = this.grid.getUnpinnedWidth;Returns an array of visible IgxColumnComponents.
const visibleColumns = this.grid.visibleColumns.Returns the width of the IgxGridComponent.
let gridWidth = this.grid.width;Returns the width of the IgxGridComponent.
let gridWidth = this.grid.width;Creates a new IgxGridRowComponent and adds the data record to the end of the data source.
const record = {
ID: this.grid1.data[this.grid1.data.length - 1].ID + 1,
Name: this.newRecord
};
this.grid1.addRow(record);If name is provided, clears the filtering state of the corresponding IgxColumnComponent,
otherwise clears the filtering state of all IgxColumnComponents.
this.grid.clearFilter();Removes all the highlights in the cell.
this.grid.clearSearch();If name is provided, clears the sorting state of the corresponding IgxColumnComponent,
otherwise clears the sorting state of all IgxColumnComponent.
this.grid.clearSort();Closes the advanced filtering dialog.
indicates whether the changes should be applied
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);Deselects all rows Note: 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.deselectAllRows();Deselect specified rows by ID.
this.grid.deselectRows([1,2,5]);Disable summaries for the specified column.
grid.disableSummaries('ProductName');Disable summaries for the listed columns.
grid.disableSummaries([{ fieldName: 'ProductName' }]);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.
If commit === true, passes them from the pending state to the data (or transaction service)
Binding to the event
<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"));
}Filters all the IgxColumnComponent in the IgxGridComponent with the same condition.
grid.filterGlobal('some', 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. Returns how many times the grid contains the string.
this.grid.findNext("financial");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. Returns how many times the grid contains the string.
this.grid.findPrev("financial");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 IgxGridCellComponent that matches the conditions.
const myCell = this.grid1.getCellByColumn(2,"UnitPrice");Returns an IgxGridCellComponent object by the specified primary key and column field.
Requires that the primaryKey property is set.
grid.getCellByKey(1, 'index');match any rowID
Returns the IgxColumnComponent by field name.
const myCol = this.grid1.getColumnByName("ID");Returns 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);Gets calculated width of the pinned area.
const pinnedWidth = this.grid.getPinnedWidth();If we should take into account the hidden columns in the pinned area.
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 the IgxRowComponent by index.
const myRow = this.grid1.getRowByIndex(1);Returns IgxGridRowComponent object by the specified primary key .
Requires that the primaryKey property is set.
const myRow = this.grid1.getRowByKey("cell5");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.
Manually marks the IgxGridComponent for change detection.
this.grid1.markForCheck();Moves a column to the specified drop target.
grid.moveColumn(compName, persDetails);This method allows you to navigate to a position
in the grid based on provided rowindex and visibleColumnIndex,
also to 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(); });Goes to the next page of the IgxGridComponent, if the grid is not already at the last page.
this.grid1.nextPage();Opens the advanced filtering dialog.
Goes to the desired page index.
this.grid1.paginate(1);Pins a column by field name. Returns whether the operation is successful.
this.grid.pinColumn("ID");Goes to the previous page of the IgxGridComponent, if the grid is not already at the first page.
this.grid1.previousPage();Reapplies the existing search. Returns how many times the grid contains the last search.
this.grid.refreshSearch();Selects all rows Note: 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 rows by ID.
this.grid.selectRows([1,2,5], true);if true clears the current selection
Get current selection state. Returns an array with selected rows' IDs (primaryKey or rowData)
const selectedRows = this.grid.selectedRows();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 });Toggles the specified column's visibility.
this.grid1.toggleColumnVisibility({
column: this.grid1.columns[0],
newValue: true
});Unpins a column by field name. Returns whether the operation is successful.
this.grid.pinColumn("ID");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, which 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
Controls the copy behavior of the grid.
Apply the columns formatters (if any) on the data in the clipboard output.
Include the columns headers in the clipboard output.
Enables/disables the copy behavior
The separator used for formatting the copy output. Defaults to \t.
An @Input property that autogenerates the
IgxGridComponentcolumns. The default value is false.<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>IgxGridBaseComponent