Emmited when the active node is changed.
<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>
Emitted after advanced filtering is performed.
Returns the advanced filtering expressions tree.
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>
Readonly cdrProvides 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.
Returns the IgxGridCell.
<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Controls the copy behavior of the grid.
Emitted when a column is initialized.
Returns the column object.
<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid>
Emitted after column is resized.
Returns the IgxColumnComponent object's old and new width.
<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>
Emitted when IgxColumnComponent is selected.
<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
Emitted after column visibility is changed.
Args: { column: IgxColumnComponent, newValue: boolean }
<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
Emitted before column visibility is changed.
Args: { column: any, newValue: boolean }
<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>
Emitted when a cell is right clicked.
Returns the IgxGridCell object.
<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>
Emitted after the grid's data view is changed because of a data operation, rebinding, etc.
<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>
Emitted before the grid's data view is changed because of a data operation, rebinding, etc.
<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>
Emitted when the dimension is initialized.
Emits the dimension that is about to be initialized.
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionInit)="dimensionInit($event)"></igx-pivot-grid>
Emitted when the dimension collection is changed via the grid chip area.
Returns the new dimension collection and its type:
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionsChange)="dimensionsChange($event)"></igx-grid>
Emitted when a dimension is sorted.
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionsSortingExpressionsChange)="dimensionsSortingExpressionsChange($event)"></igx-pivot-grid>
Emitted when a cell is double clicked.
Returns the IgxGridCell object.
<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>
Gets/Sets a custom template when empty.
<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
Gets/Sets a custom template when pivot grid is empty.
<igx-pivot-grid [emptyPivotGridTemplate]="myTemplate"><igx-pivot-grid>
Emitted before filtering expressions are applied.
Returns an IFilteringEventArgs object. filteringExpressions key holds the filtering expressions for the column.
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid>
Emitted after filtering is performed through the UI.
Returns the filtering expressions tree of the column for which filtering was performed.
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid>
Emitted after filtering is performed.
Returns the filtering expressions tree of the column for which filtering was performed.
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>
Emitted when formGroup is created on edit of row/cell.
<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Readonly gridAPIRepresents 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.
This event is fired only if the key combination is supported in the grid. Return the target type, target object and the original event. This event is cancelable.
<igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>
Emitted when grid is scrolled horizontally/vertically.
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(gridScroll)="onScroll($event)"></igx-grid>
Represents the last search information.
Gets/Sets a custom template when loading.
<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
Emitted when any of the pivotConfiguration properties is changed via the grid chip area.
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(pivotConfigurationChanged)="configurationChanged($event)"></igx-grid>
Gets/Sets the primary key.
<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
Emitted when making a range selection.
Range selection can be made either through drag selection or through keyboard selection.
Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM
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>
IgxColumnComponent
Emitted when a row is clicked.
Returns the IgxGridRow.
<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Emitted when IgxGridRowComponent is selected.
<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
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>
IgxColumnComponent
Emitted when the expanded state of a row gets changed.
<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>
Emitted when a cell is selected.
Returns the IgxGridCell.
<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Emitted before sorting expressions are applied.
Returns an ISortingEventArgs object. sortingExpressions key holds the sorting expressions.
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid>
Emitted after sorting is completed.
Returns the sorting expression.
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>
Emitted before sorting is performed.
Returns the sorting expressions.
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
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>
Readonly validationRepresents the validation service for the grid. The type contains properties and methods (logic) for validating records
Emitted when grid's validation status changes.
<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Gets/Sets the trigger for validators used when editing the grid.
<igx-grid #grid validationTrigger='blur'></igx-grid>
Gets/Sets a custom template for the value chips.
<igx-pivot-grid [valueChipTemplate]="myTemplate"><igx-pivot-grid>
Emitted when the value is initialized.
Emits the value that is about to be initialized.
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(valueInit)="valueInit($event)"></igx-pivot-grid>
Emitted when the values collection is changed via the grid chip area.
Returns the new dimension
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(valuesChange)="valuesChange($event)"></igx-grid>
Gets/Sets the advanced filtering state.
let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
this.grid.advancedFilteringExpressionsTree = logic;
Gets the full list of dimensions.
const dimensions = this.grid.allDimensions;
Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered
Gets/Sets cell selection mode.
By default the cell selection mode is multiple
Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade'
Gets/Sets column selection mode
By default the row selection mode is none
Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade'
Gets/Sets the default width of the columns.
<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
Gets an array of IgxColumnComponents.
const colums = this.grid.columns.
Returns an array of data set to the component.
let data = this.grid.data;
Gets/Sets the array of data that populates the component.
<igx-pivot-grid [data]="Data"></igx-pivot-grid>
Gets/Sets the data clone strategy of the grid when in edit mode.
<igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>
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.
const dataList = this.grid.dataRowList;
Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.
const dataView = this.grid.dataView;
Gets/Sets the default expand state for all rows.
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.
Gets the default row height.
const rowHeigh = this.grid.defaultRowHeight;
Gets the sorting expressions generated for the dimensions.
const expressions = this.grid.dimensionsSortingExpressions;
Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
If set while superCompactMode is enabled will have no affect.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
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 template for drag indicator icons. Could be of any type
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>
Get/Sets the message displayed when there are no records.
<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/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>
The filter mode for the grid. It can be quick filter of excel-style filter
Gets/Sets the filtering strategy of the grid.
<igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>
Returns an array of objects containing the filtered data.
let filteredData = this.grid.filteredData;
Returns an array containing the filtered sorted data.
const filteredSortedData = this.grid1.filteredSortedData;
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>
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.
<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Gets/Sets the value of the id attribute.
If not provided it will be automatically generated.
<igx-pivot-grid [id]="'igx-pivot-1'" [data]="Data"></igx-pivot-grid>
Represents the unique identifier of the grid.
Gets/Sets whether the grid is going to show a loading indicator.
<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
Gets/Sets the locale.
If not set, returns browser's language.
Represents the locale of the Grid: USD, EUR, GBP, CNY, JPY, etc.
Gets the native element.
const nativeEl = this.grid.nativeElement.
Gets/Sets 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.
Represents the paging of the grid. It can be eighter 'Local' or 'Remote'
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.
By default it uses EN resources.
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;
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;
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.
<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid>
The height of each row in the grid. Setting a constant height can solve problems with not showing all alements when scrolling
A list of IgxGridRowComponent.
const rowList = this.grid.rowList;
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
By default it is set to true
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.
<igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-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>
Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels'
Represents the position of summaries: 'top', 'bottom'
Enables a super compact theme for the component.
Overrides the displayDensity option if one is set.
<igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid>
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.
const visibleColumns = this.grid.visibleColumns.
Gets/Sets the width of the grid.
let gridWidth = this.grid.width;
Auto-sizes row dimension cells.
Only sizes based on the dimension cells in view.
this.grid.autoSizeRowDimension(dimension);
The row dimension to size.
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.
this.grid.deselectColumns(['ID','Name']);
Filters a single IgxColumnComponent.
public filter(term) {
this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
}
Filters a single IPivotDimension.
public filter() {
const set = new Set();
set.add('Value 1');
set.add('Value 2');
this.grid1.filterDimension(this.pivotConfigHierarchy.rows[0], set, IgxStringFilteringOperand.instance().condition('in'));
}
Returns the IgxColumnComponent by field name.
const myCol = this.grid1.getColumnByName("ID");
Sets the --component-size CSS variable based on the value of Display Density
Gets the width to be set on IgxGridHeaderGroupComponent.
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.
Inserts dimension in target collection by type at specified index or at the collection's end.
this.grid.insertDimensionAt(dimension, PivotDimensionType.Row, 1);
The dimension that will be added.
The target collection type to add to. Can be Row, Column or Filter.
The index in the collection at which to add. This parameter is optional. If not set it will add it to the end of the collection.
Inserts value at specified index or at the end.
this.grid.insertValueAt(value, 1);
The value definition that will be added.
The index in the collection at which to add. This parameter is optional. If not set it will add it to the end of the collection.
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();
grid.markForCheck();
Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end.
this.grid.moveDimension(dimension, PivotDimensionType.Row, 1);
The dimension that will be moved.
The target collection type to move it to. Can be Row, Column or Filter.
The index in the collection at which to add. This parameter is optional. If not set it will add it to the end of the collection.
Move value from its currently at specified index or at the end.
this.grid.moveValue(value, 1);
The value that will be moved.
The index in the collection at which to add. This parameter is optional. If not set it will add it to the end of the collection.
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(); });
Removes dimension from its currently collection.
This is different than toggleDimension that enabled/disables the dimension. This completely removes the specified dimension from the collection.
this.grid.removeDimension(dimension);
The dimension to be removed.
Removes value from collection.
This is different than toggleValue that enabled/disables the value. This completely removes the specified value from the collection.
this.grid.removeValue(dimension);
The value to be removed.
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.
this.grid.selectColumns(['ID','Name'], true);
if true clears the current selection
Select range(s) of cells between certain rows and columns of the grid.
Get current selected columns.
Returns an array with selected columns
const selectedColumns = this.grid.selectedColumns();
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 });
Sort the dimension and its children in the provided direction.
this.grid.sortDimension(dimension, SortingDirection.Asc);
Toggles the dimension's enabled state on or off.
The dimension remains in its current collection. This just changes its enabled state.
this.grid.toggleDimension(dimension);
The dimension to be toggled.
Toggles the value's enabled state on or off.
The value remains in its current collection. This just changes its enabled state.
this.grid.toggleValue(value);
The value to be toggled.
Pivot Grid provides a way to present and manipulate data in a pivot table view.
Igx Module
IgxPivotGridModule
Igx Group
Grids & Lists
Igx Keywords
pivot, grid, table
Igx Theme
igx-grid-theme
Remarks
The Ignite UI Pivot Grid is used for grouping and aggregating simple flat data into a pivot table. Once data has been bound and the dimensions and values configured it can be manipulated via sorting and filtering.
Example