Grid provides a way to present and manipulate tabular data.
Properties
Section titled "Properties"Gets/Sets the array of data that populates the component.
data: any[] detailTemplate
Section titled "detailTemplate"Returns a reference to the master-detail template.
detailTemplate: (ctx: IgrGridMasterDetailContext) => React.ReactNode dropAreaMessage
Section titled "dropAreaMessage"Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.
dropAreaMessage: string dropAreaTemplate
Section titled "dropAreaTemplate"Gets/Sets the template that will be rendered as a GroupBy drop area.
dropAreaTemplate: (ctx: void) => React.ReactNode groupByRowSelectorTemplate
Section titled "groupByRowSelectorTemplate"Gets the group by row selector template.
groupByRowSelectorTemplate: (ctx: IgrGroupByRowSelectorTemplateContext) => React.ReactNode groupingExpansionState
Section titled "groupingExpansionState"Gets/Sets a list of expansion states for group rows.
groupingExpansionState: IgrGroupByExpandState[] groupingExpressions
Section titled "groupingExpressions"Gets/Sets the group by state.
groupingExpressions: IgrGroupingExpression[] groupRowTemplate
Section titled "groupRowTemplate"Gets/Sets the template reference for the group row.
groupRowTemplate: (ctx: IgrGroupByRowTemplateContext) => React.ReactNode groupsExpanded
Section titled "groupsExpanded"Gets/Sets whether created groups are rendered expanded or collapsed.
groupsExpanded: boolean groupStrategy
Section titled "groupStrategy"Gets/Sets the grouping strategy of the grid.
groupStrategy: IgrGridGroupingStrategy hideGroupedColumns
Section titled "hideGroupedColumns"Gets/Sets whether the grouped columns should be hidden.
hideGroupedColumns: boolean Gets/Sets the value of the id attribute.
id: string showGroupArea
Section titled "showGroupArea"Returns whether the GridComponent has group area.
showGroupArea: boolean totalItemCount
Section titled "totalItemCount"Gets/Sets the total number of records in the data source.
totalItemCount: number addRowEmptyTemplate
Section titled "addRowEmptyTemplate"addRowEmptyTemplate: (ctx: void) => React.ReactNode advancedFilteringExpressionsTree
Section titled "advancedFilteringExpressionsTree"advancedFilteringExpressionsTree: IgrFilteringExpressionsTree allowAdvancedFiltering
Section titled "allowAdvancedFiltering"allowAdvancedFiltering: boolean allowFiltering
Section titled "allowFiltering"allowFiltering: boolean autoGenerate
Section titled "autoGenerate"autoGenerate: boolean autoGenerateExclude
Section titled "autoGenerateExclude"autoGenerateExclude: string[] batchEditing
Section titled "batchEditing"batchEditing: boolean cellMergeMode
Section titled "cellMergeMode"cellMergeMode: GridCellMergeMode cellSelection
Section titled "cellSelection"cellSelection: GridSelectionMode clipboardOptions
Section titled "clipboardOptions"clipboardOptions: IgrClipboardOptions columnSelection
Section titled "columnSelection"columnSelection: GridSelectionMode columnWidth
Section titled "columnWidth"columnWidth: string dataCloneStrategy
Section titled "dataCloneStrategy"dataCloneStrategy: IgrDataCloneStrategy dragGhostCustomTemplate
Section titled "dragGhostCustomTemplate"dragGhostCustomTemplate: (ctx: IgrGridRowDragGhostContext) => React.ReactNode dragIndicatorIconTemplate
Section titled "dragIndicatorIconTemplate"dragIndicatorIconTemplate: (ctx: IgrGridEmptyTemplateContext) => React.ReactNode emptyFilteredGridMessage
Section titled "emptyFilteredGridMessage"emptyFilteredGridMessage: string emptyGridMessage
Section titled "emptyGridMessage"emptyGridMessage: string emptyGridTemplate
Section titled "emptyGridTemplate"emptyGridTemplate: (ctx: IgrGridTemplateContext) => React.ReactNode excelStyleHeaderIconTemplate
Section titled "excelStyleHeaderIconTemplate"excelStyleHeaderIconTemplate: (ctx: IgrGridHeaderTemplateContext) => React.ReactNode expansionStates
Section titled "expansionStates"expansionStates: Map<any, boolean> filteringExpressionsTree
Section titled "filteringExpressionsTree"filteringExpressionsTree: IgrFilteringExpressionsTree filteringLogic
Section titled "filteringLogic"filteringLogic: FilteringLogic filterMode
Section titled "filterMode"filterMode: FilterMode filterStrategy
Section titled "filterStrategy"filterStrategy: IgrFilteringStrategy headerCollapsedIndicatorTemplate
Section titled "headerCollapsedIndicatorTemplate"headerCollapsedIndicatorTemplate: (ctx: IgrGridTemplateContext) => React.ReactNode headerExpandedIndicatorTemplate
Section titled "headerExpandedIndicatorTemplate"headerExpandedIndicatorTemplate: (ctx: IgrGridTemplateContext) => React.ReactNode headSelectorTemplate
Section titled "headSelectorTemplate"headSelectorTemplate: (ctx: IgrHeadSelectorTemplateContext) => React.ReactNode height
Section titled "height"height: string hideRowSelectors
Section titled "hideRowSelectors"hideRowSelectors: boolean isLoading
Section titled "isLoading"isLoading: boolean loadingGridTemplate
Section titled "loadingGridTemplate"loadingGridTemplate: (ctx: IgrGridTemplateContext) => React.ReactNode locale
Section titled "locale"locale: string mergeStrategy
Section titled "mergeStrategy"mergeStrategy: IgrGridMergeStrategy moving
Section titled "moving"moving: boolean outlet
Section titled "outlet"outlet: IgrOverlayOutletDirective pagingMode
Section titled "pagingMode"pagingMode: GridPagingMode pinning
Section titled "pinning"pinning: IgrPinningConfig primaryKey
Section titled "primaryKey"primaryKey: string resourceStrings
Section titled "resourceStrings"resourceStrings: IgrGridResourceStrings rowAddTextTemplate
Section titled "rowAddTextTemplate"rowAddTextTemplate: (ctx: IgrGridEmptyTemplateContext) => React.ReactNode rowClasses
Section titled "rowClasses"rowClasses: any rowCollapsedIndicatorTemplate
Section titled "rowCollapsedIndicatorTemplate"rowCollapsedIndicatorTemplate: (ctx: IgrGridRowTemplateContext) => React.ReactNode rowDraggable
Section titled "rowDraggable"rowDraggable: boolean rowEditable
Section titled "rowEditable"rowEditable: boolean rowEditActionsTemplate
Section titled "rowEditActionsTemplate"rowEditActionsTemplate: (ctx: IgrGridRowEditActionsTemplateContext) => React.ReactNode rowEditTextTemplate
Section titled "rowEditTextTemplate"rowEditTextTemplate: (ctx: IgrGridRowEditTextTemplateContext) => React.ReactNode rowExpandedIndicatorTemplate
Section titled "rowExpandedIndicatorTemplate"rowExpandedIndicatorTemplate: (ctx: IgrGridRowTemplateContext) => React.ReactNode rowHeight
Section titled "rowHeight"rowHeight: number rowSelection
Section titled "rowSelection"rowSelection: GridSelectionMode rowSelectorTemplate
Section titled "rowSelectorTemplate"rowSelectorTemplate: (ctx: IgrRowSelectorTemplateContext) => React.ReactNode rowStyles
Section titled "rowStyles"rowStyles: any selectedRows
Section titled "selectedRows"selectedRows: any[] selectRowOnClick
Section titled "selectRowOnClick"selectRowOnClick: boolean shouldGenerate
Section titled "shouldGenerate"shouldGenerate: boolean showSummaryOnCollapse
Section titled "showSummaryOnCollapse"showSummaryOnCollapse: boolean snackbarDisplayTime
Section titled "snackbarDisplayTime"snackbarDisplayTime: number sortAscendingHeaderIconTemplate
Section titled "sortAscendingHeaderIconTemplate"sortAscendingHeaderIconTemplate: (ctx: IgrGridHeaderTemplateContext) => React.ReactNode sortDescendingHeaderIconTemplate
Section titled "sortDescendingHeaderIconTemplate"sortDescendingHeaderIconTemplate: (ctx: IgrGridHeaderTemplateContext) => React.ReactNode sortHeaderIconTemplate
Section titled "sortHeaderIconTemplate"sortHeaderIconTemplate: (ctx: IgrGridHeaderTemplateContext) => React.ReactNode sortingExpressions
Section titled "sortingExpressions"sortingExpressions: IgrSortingExpression[] sortingOptions
Section titled "sortingOptions"sortingOptions: IgrSortingOptions sortStrategy
Section titled "sortStrategy"sortStrategy: IgrGridSortingStrategy summaryCalculationMode
Section titled "summaryCalculationMode"summaryCalculationMode: GridSummaryCalculationMode summaryPosition
Section titled "summaryPosition"summaryPosition: GridSummaryPosition summaryRowHeight
Section titled "summaryRowHeight"summaryRowHeight: number totalRecords
Section titled "totalRecords"totalRecords: number validationTrigger
Section titled "validationTrigger"validationTrigger: GridValidationTrigger width
Section titled "width"width: string Accessors
Section titled "Accessors"groupsRecords
Section titled "groupsRecords"Gets the hierarchical representation of the group by records.
get groupsRecords(): IgrGroupByRecord[] Returns IgrGroupByRecord[]
selectedCells
Section titled "selectedCells"Returns an array of the selected GridCells.
get selectedCells(): IgrCellType[] Returns IgrCellType[]
actionStripComponents
Section titled "actionStripComponents"get actionStripComponents(): IgcActionStripToken[] Returns IgcActionStripToken[]
columnList
Section titled "columnList"get columnList(): IgrColumnComponent[] Returns IgrColumnComponent[]
columns
Section titled "columns"Gets an array of ColumnComponents.
get columns(): IgrColumnComponent[] Example
const colums = this.grid.columns. Returns IgrColumnComponent[]
dataRowList
Section titled "dataRowList"A list of currently rendered GridRowComponent's.
get dataRowList(): IgrRowDirective[] Example
const dataList = this.grid.dataRowList; Returns IgrRowDirective[]
dataView
Section titled "dataView"Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.
get dataView(): any[] Example
const dataView = this.grid.dataView; Returns any[]
defaultRowHeight
Section titled "defaultRowHeight"Gets the default row height.
get defaultRowHeight(): number Example
const rowHeigh = this.grid.defaultRowHeight; Returns number
filteredData
Section titled "filteredData"Returns an array of objects containing the filtered data.
get filteredData(): any Example
let filteredData = this.grid.filteredData; Returns any
filteredSortedData
Section titled "filteredSortedData"Returns an array containing the filtered sorted data.
get filteredSortedData(): any[] Example
const filteredSortedData = this.grid1.filteredSortedData; Returns any[]
hiddenColumnsCount
Section titled "hiddenColumnsCount"Gets the number of hidden columns.
get hiddenColumnsCount(): number Example
const hiddenCol = this.grid.hiddenColumnsCount;
`` Returns number
lastSearchInfo
Section titled "lastSearchInfo"paginationComponents
Section titled "paginationComponents"get paginationComponents(): IgrPaginatorComponent[] Returns IgrPaginatorComponent[]
pinnedColumns
Section titled "pinnedColumns"Gets an array of the pinned ColumnComponents.
get pinnedColumns(): IgrColumnComponent[] Example
const pinnedColumns = this.grid.pinnedColumns. Returns IgrColumnComponent[]
pinnedColumnsCount
Section titled "pinnedColumnsCount"Gets the number of pinned columns.
get pinnedColumnsCount(): number Returns number
pinnedEndColumns
Section titled "pinnedEndColumns"Gets an array of the pinned to the right ColumnComponents.
get pinnedEndColumns(): IgrColumnComponent[] Example
const pinnedColumns = this.grid.pinnedEndColumns. Returns IgrColumnComponent[]
pinnedRows
Section titled "pinnedRows"Gets an array of the pinned RowComponents.
get pinnedRows(): IgrGridRowComponent[] Example
const pinnedRow = this.grid.pinnedRows; Returns IgrGridRowComponent[]
pinnedStartColumns
Section titled "pinnedStartColumns"Gets an array of the pinned to the left ColumnComponents.
get pinnedStartColumns(): IgrColumnComponent[] Example
const pinnedColumns = this.grid.pinnedStartColumns. Returns IgrColumnComponent[]
rowList
Section titled "rowList"A list of GridRowComponent.
get rowList(): IgrRowDirective[] Example
const rowList = this.grid.rowList; Returns IgrRowDirective[]
toolbar
Section titled "toolbar"get toolbar(): IgrGridToolbarComponent[] Returns IgrGridToolbarComponent[]
unpinnedColumns
Section titled "unpinnedColumns"Gets an array of unpinned ColumnComponents.
get unpinnedColumns(): IgrColumnComponent[] Example
const unpinnedColumns = this.grid.unpinnedColumns. Returns IgrColumnComponent[]
virtualizationState
Section titled "virtualizationState"Returns the state of the grid virtualization.
get virtualizationState(): IgrForOfState Example
const gridVirtState = this.grid1.virtualizationState; Returns IgrForOfState
visibleColumns
Section titled "visibleColumns"Returns an array of visible ColumnComponents.
get visibleColumns(): IgrColumnComponent[] Example
const visibleColumns = this.grid.visibleColumns. Returns IgrColumnComponent[]
Methods
Section titled "Methods"clearGrouping
Section titled "clearGrouping"Clears grouping for particular column, array of columns or all columns.
clearGrouping(name: string): void Parameters
- name:
stringName of column or array of column names to be ungrouped.
Returns void
Example
this.grid.clearGrouping(); //clears all grouping
this.grid.clearGrouping("ID"); //ungroups a single column
this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns deselectRowsInGroup
Section titled "deselectRowsInGroup"Deselect all rows within a group.
deselectRowsInGroup(groupRow: IgrGroupByRecord): void Parameters
- groupRow:
IgrGroupByRecordThe group record which rows would be deselected.
Returns void
Example
public groupRow: IGroupByRecord;
this.grid.deselectRowsInGroup(this.groupRow); fullyExpandGroup
Section titled "fullyExpandGroup"Expands the specified group and all of its parent groups.
fullyExpandGroup(groupRow: IgrGroupByRecord): void Parameters
- groupRow:
IgrGroupByRecordThe group record to fully expand.
Returns void
Example
public groupRow: IGroupByRecord;
this.grid.fullyExpandGroup(this.groupRow); getCellByColumn
Section titled "getCellByColumn"Returns a CellType object that matches the conditions.
getCellByColumn(rowIndex: number, columnField: string): IgrCellType Parameters
- rowIndex:
number - columnField:
string
Returns IgrCellType
Example
const myCell = this.grid1.getCellByColumn(2, "UnitPrice"); getCellByKey
Section titled "getCellByKey"Returns a CellType object that matches the conditions.
getCellByKey(rowSelector: any, columnField: string): IgrCellType Parameters
- rowSelector:
anymatch any rowID
- columnField:
string
Returns IgrCellType
Example
grid.getCellByKey(1, 'index'); getRowByIndex
Section titled "getRowByIndex"Returns the GridRow by index.
getRowByIndex(index: number): IgrRowType Parameters
- index:
number
Returns IgrRowType
Example
const myRow = grid.getRowByIndex(1); getRowByKey
Section titled "getRowByKey"Returns GridRow object by the specified primary key.
getRowByKey(key: any): IgrRowType Parameters
- key:
any
Returns IgrRowType
Example
const myRow = this.grid1.getRowByKey("cell5"); getSelectedData
Section titled "getSelectedData"Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...].
getSelectedData(formatters: boolean, headers: boolean): any[] Parameters
- formatters:
boolean - headers:
boolean
Returns any[]
groupBy
Section titled "groupBy"Groups by a new ColumnComponent based on the provided expression, or modifies an existing one.
groupBy(expression: IgrGroupingExpression[]): void Parameters
- expression:
IgrGroupingExpression[]
Returns void
Example
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 }
]); isExpandedGroup
Section titled "isExpandedGroup"Returns if a group is expanded or not.
isExpandedGroup(group: IgrGroupByRecord): boolean Parameters
- group:
IgrGroupByRecordThe group record.
Returns boolean
Example
public groupRow: IGroupByRecord;
const expandedGroup = this.grid.isExpandedGroup(this.groupRow); pinRow
Section titled "pinRow"Pin the row by its id.
pinRow(rowID: any, index: number): boolean Parameters
- rowID:
anyThe row id - primaryKey value or the data record instance.
- index:
numberThe index at which to insert the row in the pinned collection.
Returns boolean
Example
this.grid.pinRow(rowID); selectRowsInGroup
Section titled "selectRowsInGroup"Select all rows within a group.
selectRowsInGroup(groupRow: IgrGroupByRecord, clearPrevSelection: boolean): void Parameters
- groupRow:
IgrGroupByRecord - clearPrevSelection:
boolean
Returns void
Example
this.grid.selectRowsInGroup(this.groupRow, true); toggleAllGroupRows
Section titled "toggleAllGroupRows"Toggles the expansion state of all group rows recursively.
toggleAllGroupRows(): void Returns void
Example
this.grid.toggleAllGroupRows; toggleGroup
Section titled "toggleGroup"Toggles the expansion state of a group.
toggleGroup(groupRow: IgrGroupByRecord): void Parameters
- groupRow:
IgrGroupByRecordThe group record to toggle.
Returns void
Example
public groupRow: IGroupByRecord;
const toggleExpGroup = this.grid.toggleGroup(this.groupRow); unpinRow
Section titled "unpinRow"Unpin the row by its id.
unpinRow(rowID: any): boolean Parameters
- rowID:
anyThe row id - primaryKey value or the data record instance.
Returns boolean
Example
this.grid.unpinRow(rowID); addRow
Section titled "addRow"Creates a new GridRowComponent and adds the data record to the end of the data source.
addRow(data: any): void Parameters
- data:
any
Returns void
Example
this.grid1.addRow(record); beginAddRowById
Section titled "beginAddRowById"Enters add mode by spawning the UI under the specified row by rowID.
beginAddRowById(rowID: any, asChild: boolean): void Parameters
- rowID:
anyThe rowID to spawn the add row UI for, or null to spawn it as the first record in the data view
- asChild:
booleanWhether the record should be added as a child. Only applicable to igxTreeGrid.
Returns void
Example
this.grid.beginAddRowById('ALFKI');
this.grid.beginAddRowById('ALFKI', true);
this.grid.beginAddRowById(null); beginAddRowByIndex
Section titled "beginAddRowByIndex"Enters add mode by spawning the UI at the specified index.
beginAddRowByIndex(index: number): void Parameters
- index:
numberThe index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
Returns void
Example
this.grid.beginAddRowByIndex(0); clearCellSelection
Section titled "clearCellSelection"Deselect selected cells.
clearCellSelection(): void Returns void
Example
this.grid.clearCellSelection(); clearFilter
Section titled "clearFilter"If name is provided, clears the filtering state of the corresponding ColumnComponent.
clearFilter(name: string): void Parameters
- name:
string
Returns void
Example
this.grid.clearFilter(); clearSearch
Section titled "clearSearch"Removes all the highlights in the cell.
clearSearch(): void Returns void
Example
this.grid.clearSearch(); clearSort
Section titled "clearSort"If name is provided, clears the sorting state of the corresponding ColumnComponent.
clearSort(name: string): void Parameters
- name:
string
Returns void
Example
this.grid.clearSort(); closeAdvancedFilteringDialog
Section titled "closeAdvancedFilteringDialog"Closes the advanced filtering dialog.
closeAdvancedFilteringDialog(applyChanges: boolean): void Parameters
- applyChanges:
booleanindicates whether the changes should be applied
Returns void
collapseAll
Section titled "collapseAll"Collapses all rows.
collapseAll(): void Returns void
Example
this.grid.collapseAll(); collapseRow
Section titled "collapseRow"Collapses the row by its id.
collapseRow(rowID: any): void Parameters
- rowID:
anyThe row id - primaryKey value or the data record instance.
Returns void
Example
this.grid.collapseRow(rowID); deleteRow
Section titled "deleteRow"Removes the GridRowComponent and the corresponding data record by primary key.
deleteRow(rowSelector: any): any Parameters
- rowSelector:
any
Returns any
Example
this.grid1.deleteRow(0); deselectAllColumns
Section titled "deselectAllColumns"Deselects all columns
deselectAllColumns(): void Returns void
Example
this.grid.deselectAllColumns(); deselectAllRows
Section titled "deselectAllRows"Deselects all rows
deselectAllRows(onlyFilterData: boolean): void Parameters
- onlyFilterData:
boolean
Returns void
Example
this.grid.deselectAllRows(); deselectColumns
Section titled "deselectColumns"Deselect specified columns by field.
deselectColumns(columns: string[] | IgrColumnComponent[]): void Parameters
- columns:
string[] | IgrColumnComponent[]
Returns void
Example
this.grid.deselectColumns(['ID','Name']); deselectRows
Section titled "deselectRows"Deselect specified rows by ID.
deselectRows(rowIDs: any[]): void Parameters
- rowIDs:
any[]
Returns void
Example
this.grid.deselectRows([1,2,5]); disableSummaries
Section titled "disableSummaries"Disable summaries for the specified column.
disableSummaries(rest: any[]): void Parameters
- rest:
any[]
Returns void
Example
grid.disableSummaries('ProductName'); enableSummaries
Section titled "enableSummaries"Enables summaries for the specified column and applies your customSummary.
enableSummaries(rest: any[]): void Parameters
- rest:
any[]
Returns void
Example
grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);Enable summaries for the listed columns.
endEdit
Section titled "endEdit"Finishes the row transactions on the current row and returns whether the grid editing was canceled.
endEdit(commit: boolean, evt: any): boolean Parameters
- commit:
boolean - evt:
any
Returns boolean
expandAll
Section titled "expandAll"Expands all rows.
expandAll(): void Returns void
Example
this.grid.expandAll(); expandRow
Section titled "expandRow"Expands the row by its id.
expandRow(rowID: any): void Parameters
- rowID:
anyThe row id - primaryKey value or the data record instance.
Returns void
Example
this.grid.expandRow(rowID); filter
Section titled "filter"Filters a single ColumnComponent.
filter(name: string, value: any, conditionOrExpressionTree: IgrFilteringExpressionsTree | IgrFilteringOperation, ignoreCase: boolean): void Parameters
- name:
string - value:
any - conditionOrExpressionTree:
IgrFilteringExpressionsTree | IgrFilteringOperation - ignoreCase:
boolean
Returns void
filterGlobal
Section titled "filterGlobal"Filters all the ColumnComponent in the GridComponent with the same condition.
filterGlobal(value: any, condition: any, ignoreCase: any): void Parameters
- value:
any - condition:
any - ignoreCase:
any
Returns void
findNext
Section titled "findNext"Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
findNext(text: string, caseSensitive: boolean, exactMatch: boolean): number Parameters
- text:
stringthe string to search.
- caseSensitive:
booleanoptionally, if the search should be case sensitive (defaults to false).
- exactMatch:
booleanoptionally, if the text should match the entire value (defaults to false).
Returns number
Example
this.grid.findNext("financial"); findPrev
Section titled "findPrev"Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
findPrev(text: string, caseSensitive: boolean, exactMatch: boolean): number Parameters
- text:
stringthe string to search.
- caseSensitive:
booleanoptionally, if the search should be case sensitive (defaults to false).
- exactMatch:
booleanoptionally, if the text should match the entire value (defaults to false).
Returns number
Example
this.grid.findPrev("financial"); getColumnByName
Section titled "getColumnByName"Returns the ColumnComponent by field name.
getColumnByName(name: string): IgrColumnComponent Parameters
- name:
string
Returns IgrColumnComponent
Example
const myCol = this.grid1.getColumnByName("ID"); getColumnByVisibleIndex
Section titled "getColumnByVisibleIndex"getColumnByVisibleIndex(index: number): IgrColumnComponent Parameters
- index:
number
Returns IgrColumnComponent
getHeaderGroupWidth
Section titled "getHeaderGroupWidth"Gets the width to be set on GridHeaderGroupComponent.
getHeaderGroupWidth(column: IgrColumnComponent): string Parameters
- column:
IgrColumnComponent
Returns string
getNextCell
Section titled "getNextCell"Returns ICellPosition which defines the next cell,
according to the current position, that match specific criteria.
getNextCell(currRowIndex: number, curVisibleColIndex: number, callback: any): IgrCellPosition Parameters
- currRowIndex:
number - curVisibleColIndex:
number - callback:
any
Returns IgrCellPosition
Example
const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable); getPinnedEndWidth
Section titled "getPinnedEndWidth"Gets calculated width of the pinned areas.
getPinnedEndWidth(takeHidden: boolean): void Parameters
- takeHidden:
booleanIf we should take into account the hidden columns in the pinned area.
Returns void
Example
const pinnedWidth = this.grid.getPinnedEndWidth(); getPinnedStartWidth
Section titled "getPinnedStartWidth"Gets calculated width of the pinned areas.
getPinnedStartWidth(takeHidden: boolean): void Parameters
- takeHidden:
booleanIf we should take into account the hidden columns in the pinned area.
Returns void
Example
const pinnedWidth = this.grid.getPinnedStartWidth(); getPreviousCell
Section titled "getPreviousCell"Returns ICellPosition which defines the previous cell,
according to the current position, that match specific criteria.
getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback: any): IgrCellPosition Parameters
- currRowIndex:
number - curVisibleColIndex:
number - callback:
any
Returns IgrCellPosition
Example
const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable); getRowData
Section titled "getRowData"Returns the data that is contained in the row component.
getRowData(rowSelector: any): any Parameters
- rowSelector:
anycorrespond to rowID
Returns any
Example
const data = grid.getRowData(94741); getSelectedColumnsData
Section titled "getSelectedColumnsData"Returns an array of the current columns selection in the form of [{ column.field: cell.value }, ...].
getSelectedColumnsData(formatters: boolean, headers: boolean): void Parameters
- formatters:
boolean - headers:
boolean
Returns void
getSelectedRanges
Section titled "getSelectedRanges"Get the currently selected ranges in the grid.
getSelectedRanges(): IgrGridSelectionRange[] Returns IgrGridSelectionRange[]
isRecordPinnedByIndex
Section titled "isRecordPinnedByIndex"Returns whether the record is pinned or not.
isRecordPinnedByIndex(rowIndex: number): void Parameters
- rowIndex:
numberIndex of the record in the
filteredSortedDatacollection.
Returns void
markForCheck
Section titled "markForCheck"Triggers change detection for the GridComponent.
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:
``
markForCheck(): void Returns void
Example
grid.markForCheck(); moveColumn
Section titled "moveColumn"Places a column before or after the specified target column.
moveColumn(column: IgrColumnComponent, target: IgrColumnComponent, pos: DropPosition): void Parameters
- column:
IgrColumnComponent - target:
IgrColumnComponent - pos:
DropPosition
Returns void
Example
grid.moveColumn(column, target); navigateTo
Section titled "navigateTo"Navigates to a position in the grid based on provided rowindex and visibleColumnIndex.
navigateTo(rowIndex: number, visibleColIndex: number, cb: any): void Parameters
- rowIndex:
number - visibleColIndex:
number - cb:
any
Returns void
Example
this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); }); openAdvancedFilteringDialog
Section titled "openAdvancedFilteringDialog"Opens the advanced filtering dialog.
openAdvancedFilteringDialog(overlaySettings: IgrOverlaySettings): void Parameters
- overlaySettings:
IgrOverlaySettings
Returns void
pinColumn
Section titled "pinColumn"Pins a column by field name.
pinColumn(columnName: string, index: number, pinningPosition: ColumnPinningPosition): boolean Parameters
- columnName:
string - index:
number - pinningPosition:
ColumnPinningPosition
Returns boolean
Example
this.grid.pinColumn("ID"); recalculateAutoSizes
Section titled "recalculateAutoSizes"Recalculates all widths of columns that have size set to auto.
recalculateAutoSizes(): void Returns void
Example
this.grid1.recalculateAutoSizes(); reflow
Section titled "reflow"Recalculates grid width/height dimensions.
reflow(): void Returns void
Example
this.grid.reflow(); refreshSearch
Section titled "refreshSearch"Reapplies the existing search.
refreshSearch(updateActiveInfo: boolean, endEdit: boolean): number Parameters
- updateActiveInfo:
boolean - endEdit:
boolean
Returns number
Example
this.grid.refreshSearch(); selectAllColumns
Section titled "selectAllColumns"Selects all columns
selectAllColumns(): void Returns void
Example
this.grid.deselectAllColumns(); selectAllRows
Section titled "selectAllRows"Selects all rows
selectAllRows(onlyFilterData: boolean): void Parameters
- onlyFilterData:
boolean
Returns void
Example
this.grid.selectAllRows();
this.grid.selectAllRows(false); selectColumns
Section titled "selectColumns"Select specified columns.
selectColumns(columns: string[] | IgrColumnComponent[], clearCurrentSelection: boolean): void Parameters
- columns:
string[] | IgrColumnComponent[] - clearCurrentSelection:
booleanif true clears the current selection
Returns void
Example
this.grid.selectColumns(['ID','Name'], true); selectedColumns
Section titled "selectedColumns"Get current selected columns.
selectedColumns(): IgrColumnComponent[] Returns IgrColumnComponent[]
Example
Returns an array with selected columns
const selectedColumns = this.grid.selectedColumns(); selectRange
Section titled "selectRange"Select range(s) of cells between certain rows and columns of the grid.
selectRange(arg: IgrGridSelectionRange[]): void Parameters
- arg:
IgrGridSelectionRange[]
Returns void
selectRows
Section titled "selectRows"Select specified rows by ID.
selectRows(rowIDs: any[], clearCurrentSelection: boolean): void Parameters
- rowIDs:
any[] - clearCurrentSelection:
booleanif true clears the current selection
Returns void
Example
this.grid.selectRows([1,2,5], true); Sort a single ColumnComponent.
sort(expression: IgrSortingExpression[]): void Parameters
- expression:
IgrSortingExpression[]
Returns void
Example
this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); toggleColumnVisibility
Section titled "toggleColumnVisibility"Toggles the specified column's visibility.
toggleColumnVisibility(args: IgrColumnVisibilityChangedEventArgs): void Parameters
Returns void
Example
this.grid1.toggleColumnVisibility({
column: this.grid1.columns[0],
newValue: true
}); toggleRow
Section titled "toggleRow"Toggles the row by its id.
toggleRow(rowID: any): void Parameters
- rowID:
anyThe row id - primaryKey value or the data record instance.
Returns void
Example
this.grid.toggleRow(rowID); unpinColumn
Section titled "unpinColumn"Unpins a column by field name. Returns whether the operation is successful.
unpinColumn(columnName: string, index: number): boolean Parameters
- columnName:
string - index:
number
Returns boolean
Example
this.grid.pinColumn("ID"); updateCell
Section titled "updateCell"Updates the GridRowComponent and the corresponding data record by primary key.
updateCell(value: any, rowSelector: any, column: string): void Parameters
- value:
anythe new value which is to be set.
- rowSelector:
anycorresponds to rowID.
- column:
stringcorresponds to column field.
Returns void
Example
this.gridWithPK.updateCell('Updated', 1, 'ProductName'); updateRow
Section titled "updateRow"Updates the GridRowComponent
updateRow(value: any, rowSelector: any): void Parameters
- value:
any - rowSelector:
anycorrespond to rowID
Returns void
Example
grid.updateRow({
ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')
}, 1); Events
Section titled "Events"onActiveNodeChange
Section titled "onActiveNodeChange"onActiveNodeChange(args: CustomEvent<IgrActiveNodeChangeEventArgs>): void Parameters
Returns void
onAdvancedFilteringExpressionsTreeChange
Section titled "onAdvancedFilteringExpressionsTreeChange"onAdvancedFilteringExpressionsTreeChange(args: CustomEvent<IgrFilteringExpressionsTree>): void Parameters
Returns void
onCellClick
Section titled "onCellClick"onCellClick(args: CustomEvent<IgrGridCellEventArgs>): void Parameters
- args:
CustomEvent<IgrGridCellEventArgs>
Returns void
onCellEdit
Section titled "onCellEdit"onCellEdit(args: CustomEvent<IgrGridEditEventArgs>): void Parameters
- args:
CustomEvent<IgrGridEditEventArgs>
Returns void
onCellEditDone
Section titled "onCellEditDone"onCellEditDone(args: CustomEvent<IgrGridEditDoneEventArgs>): void Parameters
Returns void
onCellEditEnter
Section titled "onCellEditEnter"onCellEditEnter(args: CustomEvent<IgrGridEditEventArgs>): void Parameters
- args:
CustomEvent<IgrGridEditEventArgs>
Returns void
onCellEditExit
Section titled "onCellEditExit"onCellEditExit(args: CustomEvent<IgrGridEditDoneEventArgs>): void Parameters
Returns void
onColumnInit
Section titled "onColumnInit"onColumnInit(args: CustomEvent<IgrColumnComponent>): void Parameters
- args:
CustomEvent<IgrColumnComponent>
Returns void
onColumnMoving
Section titled "onColumnMoving"onColumnMoving(args: CustomEvent<IgrColumnMovingEventArgs>): void Parameters
Returns void
onColumnMovingEnd
Section titled "onColumnMovingEnd"onColumnMovingEnd(args: CustomEvent<IgrColumnMovingEndEventArgs>): void Parameters
Returns void
onColumnMovingStart
Section titled "onColumnMovingStart"onColumnMovingStart(args: CustomEvent<IgrColumnMovingStartEventArgs>): void Parameters
Returns void
onColumnPin
Section titled "onColumnPin"onColumnPin(args: CustomEvent<IgrPinColumnCancellableEventArgs>): void Parameters
Returns void
onColumnPinned
Section titled "onColumnPinned"onColumnPinned(args: CustomEvent<IgrPinColumnEventArgs>): void Parameters
- args:
CustomEvent<IgrPinColumnEventArgs>
Returns void
onColumnResized
Section titled "onColumnResized"onColumnResized(args: CustomEvent<IgrColumnResizeEventArgs>): void Parameters
Returns void
onColumnsAutogenerated
Section titled "onColumnsAutogenerated"onColumnsAutogenerated(args: CustomEvent<IgrColumnsAutoGeneratedEventArgs>): void Parameters
Returns void
onColumnSelectionChanging
Section titled "onColumnSelectionChanging"onColumnSelectionChanging(args: CustomEvent<IgrColumnSelectionEventArgs>): void Parameters
Returns void
onColumnVisibilityChanged
Section titled "onColumnVisibilityChanged"onColumnVisibilityChanged(args: CustomEvent<IgrColumnVisibilityChangedEventArgs>): void Parameters
Returns void
onColumnVisibilityChanging
Section titled "onColumnVisibilityChanging"onColumnVisibilityChanging(args: CustomEvent<IgrColumnVisibilityChangingEventArgs>): void Parameters
Returns void
onContextMenu
Section titled "onContextMenu"onContextMenu(args: CustomEvent<IgrGridContextMenuEventArgs>): void Parameters
Returns void
onDataChanged
Section titled "onDataChanged"onDataChanged(args: CustomEvent<IgrForOfDataChangeEventArgs>): void Parameters
Returns void
onDataChanging
Section titled "onDataChanging"onDataChanging(args: CustomEvent<IgrForOfDataChangeEventArgs>): void Parameters
Returns void
onDataPreLoad
Section titled "onDataPreLoad"onDataPreLoad(args: CustomEvent<IgrForOfState>): void Parameters
- args:
CustomEvent<IgrForOfState>
Returns void
onDoubleClick
Section titled "onDoubleClick"onDoubleClick(args: CustomEvent<IgrGridCellEventArgs>): void Parameters
- args:
CustomEvent<IgrGridCellEventArgs>
Returns void
onExpansionStatesChange
Section titled "onExpansionStatesChange"onExpansionStatesChange(args: CustomEvent<Map<any, boolean>>): void Parameters
- args:
CustomEvent<Map<any, boolean>>
Returns void
onFiltering
Section titled "onFiltering"onFiltering(args: CustomEvent<IgrFilteringEventArgs>): void Parameters
- args:
CustomEvent<IgrFilteringEventArgs>
Returns void
onFilteringDone
Section titled "onFilteringDone"onFilteringDone(args: CustomEvent<IgrFilteringExpressionsTree>): void Parameters
Returns void
onFilteringExpressionsTreeChange
Section titled "onFilteringExpressionsTreeChange"onFilteringExpressionsTreeChange(args: CustomEvent<IgrFilteringExpressionsTree>): void Parameters
Returns void
onFormGroupCreated
Section titled "onFormGroupCreated"onFormGroupCreated(args: CustomEvent<IgrGridFormGroupCreatedEventArgs>): void Parameters
Returns void
onGridCopy
Section titled "onGridCopy"onGridCopy(args: CustomEvent<IgrGridClipboardEvent>): void Parameters
- args:
CustomEvent<IgrGridClipboardEvent>
Returns void
onGridKeydown
Section titled "onGridKeydown"onGridKeydown(args: CustomEvent<IgrGridKeydownEventArgs>): void Parameters
Returns void
onGridScroll
Section titled "onGridScroll"onGridScroll(args: CustomEvent<IgrGridScrollEventArgs>): void Parameters
Returns void
onGroupingDone
Section titled "onGroupingDone"onGroupingDone(args: CustomEvent<IgrGroupingDoneEventArgs>): void Parameters
Returns void
onGroupingExpansionStateChange
Section titled "onGroupingExpansionStateChange"onGroupingExpansionStateChange(args: CustomEvent<IgrGroupByExpandState[]>): void Parameters
- args:
CustomEvent<IgrGroupByExpandState[]>
Returns void
onGroupingExpressionsChange
Section titled "onGroupingExpressionsChange"onGroupingExpressionsChange(args: CustomEvent<IgrGroupingExpression[]>): void Parameters
- args:
CustomEvent<IgrGroupingExpression[]>
Returns void
onRangeSelected
Section titled "onRangeSelected"onRangeSelected(args: CustomEvent<IgrGridSelectionRange>): void Parameters
- args:
CustomEvent<IgrGridSelectionRange>
Returns void
onRendered
Section titled "onRendered"onRendered(args: CustomEvent<boolean>): void Parameters
- args:
CustomEvent<boolean>
Returns void
onRowAdd
Section titled "onRowAdd"onRowAdd(args: CustomEvent<IgrRowDataCancelableEventArgs>): void Parameters
Returns void
onRowAdded
Section titled "onRowAdded"onRowAdded(args: CustomEvent<IgrRowDataEventArgs>): void Parameters
- args:
CustomEvent<IgrRowDataEventArgs>
Returns void
onRowClick
Section titled "onRowClick"onRowClick(args: CustomEvent<IgrGridRowEventArgs>): void Parameters
- args:
CustomEvent<IgrGridRowEventArgs>
Returns void
onRowDelete
Section titled "onRowDelete"onRowDelete(args: CustomEvent<IgrRowDataCancelableEventArgs>): void Parameters
Returns void
onRowDeleted
Section titled "onRowDeleted"onRowDeleted(args: CustomEvent<IgrRowDataEventArgs>): void Parameters
- args:
CustomEvent<IgrRowDataEventArgs>
Returns void
onRowDragEnd
Section titled "onRowDragEnd"onRowDragEnd(args: CustomEvent<IgrRowDragEndEventArgs>): void Parameters
Returns void
onRowDragStart
Section titled "onRowDragStart"onRowDragStart(args: CustomEvent<IgrRowDragStartEventArgs>): void Parameters
Returns void
onRowEdit
Section titled "onRowEdit"onRowEdit(args: CustomEvent<IgrGridEditEventArgs>): void Parameters
- args:
CustomEvent<IgrGridEditEventArgs>
Returns void
onRowEditDone
Section titled "onRowEditDone"onRowEditDone(args: CustomEvent<IgrGridEditDoneEventArgs>): void Parameters
Returns void
onRowEditEnter
Section titled "onRowEditEnter"onRowEditEnter(args: CustomEvent<IgrGridEditEventArgs>): void Parameters
- args:
CustomEvent<IgrGridEditEventArgs>
Returns void
onRowEditExit
Section titled "onRowEditExit"onRowEditExit(args: CustomEvent<IgrGridEditDoneEventArgs>): void Parameters
Returns void
onRowPinned
Section titled "onRowPinned"onRowPinned(args: CustomEvent<IgrPinRowEventArgs>): void Parameters
- args:
CustomEvent<IgrPinRowEventArgs>
Returns void
onRowPinning
Section titled "onRowPinning"onRowPinning(args: CustomEvent<IgrPinRowEventArgs>): void Parameters
- args:
CustomEvent<IgrPinRowEventArgs>
Returns void
onRowSelectionChanging
Section titled "onRowSelectionChanging"onRowSelectionChanging(args: CustomEvent<IgrRowSelectionEventArgs>): void Parameters
Returns void
onRowToggle
Section titled "onRowToggle"onRowToggle(args: CustomEvent<IgrRowToggleEventArgs>): void Parameters
- args:
CustomEvent<IgrRowToggleEventArgs>
Returns void
onSelected
Section titled "onSelected"onSelected(args: CustomEvent<IgrGridCellEventArgs>): void Parameters
- args:
CustomEvent<IgrGridCellEventArgs>
Returns void
onSelectedRowsChange
Section titled "onSelectedRowsChange"onSelectedRowsChange(args: CustomEvent<any[]>): void Parameters
- args:
CustomEvent<any[]>
Returns void
onSorting
Section titled "onSorting"onSorting(args: CustomEvent<IgrSortingEventArgs>): void Parameters
- args:
CustomEvent<IgrSortingEventArgs>
Returns void
onSortingDone
Section titled "onSortingDone"onSortingDone(args: CustomEvent<IgrSortingExpression[]>): void Parameters
- args:
CustomEvent<IgrSortingExpression[]>
Returns void
onSortingExpressionsChange
Section titled "onSortingExpressionsChange"onSortingExpressionsChange(args: CustomEvent<IgrSortingExpression[]>): void Parameters
- args:
CustomEvent<IgrSortingExpression[]>
Returns void
onToolbarExporting
Section titled "onToolbarExporting"onToolbarExporting(args: CustomEvent<IgrGridToolbarExportEventArgs>): void Parameters
Returns void
onValidationStatusChange
Section titled "onValidationStatusChange"onValidationStatusChange(args: CustomEvent<IgrGridValidationStatusEventArgs>): void