Pivot Grid provides a way to present and manipulate data in a pivot table view.
Igx Module
IgxPivotGridModule
Igx Theme
igx-grid-theme
Igx Keywords
pivot, grid, table
Igx Group
Grids & Lists

Remarks

[object Object]

Example

<igx-pivot-grid [data]="data" [pivotConfiguration]="configuration">
</igx-pivot-grid>

Constructors

Section titled "Constructors"

IgxPivotGridComponent 

new IgxPivotGridComponent(): IgxPivotGridComponent

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3471

Returns IgxPivotGridComponent

Properties

Section titled "Properties"

activeNodeChange

Section titled "activeNodeChange"

Inherited from: IgxGridBaseDirective

Emitted when the active node is changed.

 
activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1058

Example

<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>

advancedFilteringExpressionsTreeChange

Section titled "advancedFilteringExpressionsTreeChange"

Inherited from: IgxGridBaseDirective

Emitted after advanced filtering is performed.

 
advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:385

Remarks

Returns the advanced filtering expressions tree.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
          (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>

autoGenerateConfig

Section titled "autoGenerateConfig"

Gets/Sets whether to auto-generate the pivot configuration based on the provided data.

 
autoGenerateConfig: boolean = false

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:435

Remarks

The default value is false. When set to true, it will override all dimensions and values in the pivotConfiguration.

Example

<igx-pivot-grid [data]="Data" [autoGenerateConfig]="true"></igx-pivot-grid>

cdr

Section titled "cdr"

Inherited from: IgxGridBaseDirective

Provides change detection functionality. A change-detection tree collects all views that are to be checked for changes. The property cannot be changed (readonly)

 
cdr: ChangeDetectorRef

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:167

cellClick

Section titled "cellClick"

Inherited from: IgxGridBaseDirective

Emitted when a cell is clicked.

 
cellClick: EventEmitter<IGridCellEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:499

Remarks

Returns the grid cell.

Example

<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

clipboardOptions

Section titled "clipboardOptions"

Inherited from: IgxGridBaseDirective

Controls the copy behavior of the grid.

 
clipboardOptions: IClipboardOptions

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:340

columnInit

Section titled "columnInit"

Inherited from: IgxGridBaseDirective

Emitted when a column is initialized.

 
columnInit: EventEmitter<IgxColumnComponent>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:737

Remarks

Returns the column object.

Example

<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid>

columnResized

Section titled "columnResized"

Inherited from: IgxGridBaseDirective

Emitted after column is resized.

 
columnResized: EventEmitter<IColumnResizeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:859

Remarks

Returns the column object's old and new width.

Example

<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>

columnSelectionChanging

Section titled "columnSelectionChanging"

Inherited from: IgxGridBaseDirective

Emitted when column is selected.

 
columnSelectionChanging: EventEmitter<IColumnSelectionEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:570

Example

<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>

columnVisibilityChanged

Section titled "columnVisibilityChanged"

Inherited from: IgxGridBaseDirective

Emitted after column visibility is changed.

 
columnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:910

Remarks

Args: { column: IgxColumnComponent, newValue: boolean }

Example

<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>

columnVisibilityChanging

Section titled "columnVisibilityChanging"

Inherited from: IgxGridBaseDirective

Emitted before column visibility is changed.

 
columnVisibilityChanging: EventEmitter<IColumnVisibilityChangingEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:897

Remarks

Args: { column: any, newValue: boolean }

Example

<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>

contextMenu

Section titled "contextMenu"

Inherited from: IgxGridBaseDirective

Emitted when a cell or row is right clicked.

 
contextMenu: EventEmitter<IGridContextMenuEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:871

Remarks

Returns the grid cell object if the immediate context menu target is a cell or an grid row otherwise.

<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>

dataChanged

Section titled "dataChanged"

Inherited from: IgxGridBaseDirective

Emitted after the grid's data view is changed because of a data operation, rebinding, etc.

 
dataChanged: EventEmitter<IForOfDataChangeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1128

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>

dataChanging

Section titled "dataChanging"

Inherited from: IgxGridBaseDirective

Emitted before the grid's data view is changed because of a data operation, rebinding, etc.

 
dataChanging: EventEmitter<IForOfDataChangeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1117

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>

dimensionInit

Section titled "dimensionInit"

Emitted when the dimension is initialized.

 
dimensionInit: EventEmitter<IPivotDimension>

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:310

Remarks

Emits the dimension that is about to be initialized.

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
             (dimensionInit)="dimensionInit($event)"></igx-pivot-grid>

dimensionsChange

Section titled "dimensionsChange"

Emitted when the dimension collection is changed via the grid chip area.

 
dimensionsChange: EventEmitter<IDimensionsChange>

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:284

Remarks

Returns the new dimension collection and its type:

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
             (dimensionsChange)="dimensionsChange($event)"></igx-grid>

dimensionsSortingExpressionsChange

Section titled "dimensionsSortingExpressionsChange"

Emitted when a dimension is sorted.

 
dimensionsSortingExpressionsChange: EventEmitter<ISortingExpression<any>[]>

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:336

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
             (dimensionsSortingExpressionsChange)="dimensionsSortingExpressionsChange($event)"></igx-pivot-grid>

doubleClick

Section titled "doubleClick"

Inherited from: IgxGridBaseDirective

Emitted when a cell is double clicked.

 
doubleClick: EventEmitter<IGridCellEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:884

Remarks

Returns the grid cell object.

Example

<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>

emptyPivotGridTemplate

Section titled "emptyPivotGridTemplate"

Gets/Sets a custom template when pivot grid is empty.

 
emptyPivotGridTemplate: TemplateRef<void>

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:2558

Example

<igx-pivot-grid [emptyPivotGridTemplate]="myTemplate"><igx-pivot-grid>

expansionStatesChange

Section titled "expansionStatesChange"

Inherited from: IgxGridBaseDirective

Emitted when the rows are expanded or collapsed.

 
expansionStatesChange: EventEmitter<Map<any, boolean>>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1002

Example

<igx-grid [data]="employeeData" (expansionStatesChange)="expansionStatesChange($event)" [autoGenerate]="true"></igx-grid>

filtering

Section titled "filtering"

Inherited from: IgxGridBaseDirective

Emitted before filtering expressions are applied.

 
filtering: EventEmitter<IFilteringEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:777

Remarks

Returns an IFilteringEventArgs object. filteringExpressions key holds the filtering expressions for the column.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid>

filteringDone

Section titled "filteringDone"

Inherited from: IgxGridBaseDirective

Emitted after filtering is performed through the UI.

 
filteringDone: EventEmitter<IFilteringExpressionsTree>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:790

Remarks

Returns the filtering expressions tree of the column for which filtering was performed.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid>

filteringExpressionsTreeChange

Section titled "filteringExpressionsTreeChange"

Inherited from: IgxGridBaseDirective

Emitted after filtering is performed.

 
filteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:371

Remarks

Returns the filtering expressions tree of the column for which filtering was performed.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
             (filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>

formGroupCreated

Section titled "formGroupCreated"

Inherited from: IgxGridBaseDirective

Emitted when formGroup is created on edit of row/cell.

 
formGroupCreated: EventEmitter<IGridFormGroupCreatedEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:524

Example

<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

gridAPI

Section titled "gridAPI"

Represents the grid service type providing API methods for the grid

 
gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:265

gridCopy

Section titled "gridCopy"

Inherited from: IgxGridBaseDirective

Emitted when a copy operation is executed.

 
gridCopy: EventEmitter<IGridClipboardEvent>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:990

Remarks

Fired only if copy behavior is enabled through the [clipboardOptions]IgxGridBaseDirective#clipboardOptions.

gridKeydown

Section titled "gridKeydown"

Inherited from: IgxGridBaseDirective

Emitted when keydown is triggered over element inside grid's body.

 
gridKeydown: EventEmitter<IGridKeydownEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:963

Remarks

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.

Example

<igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>

gridScroll

Section titled "gridScroll"

Inherited from: IgxGridBaseDirective

Emitted when grid is scrolled horizontally/vertically.

 
gridScroll: EventEmitter<IGridScrollEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:397

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
             (gridScroll)="onScroll($event)"></igx-grid>
Section titled "navigation" 
navigation: IgxPivotGridNavigationService

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:267

pivotConfigurationChange

Section titled "pivotConfigurationChange"

Emitted when any of the pivotConfiguration properties is changed via the grid chip area.

 
pivotConfigurationChange: EventEmitter<IPivotConfigurationChangedEventArgs>

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:296

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
             (pivotConfigurationChanged)="configurationChanged($event)"></igx-grid>

rangeSelected

Section titled "rangeSelected"

Inherited from: IgxGridBaseDirective

Emitted when making a range selection.

 
rangeSelected: EventEmitter<GridSelectionRange>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1096

Remarks

Range selection can be made either through drag selection or through keyboard selection.

rendered

Section titled "rendered"

Inherited from: IgxGridBaseDirective

Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM

 
rendered: EventEmitter<boolean>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1100

rowClasses

Section titled "rowClasses"

Inherited from: IgxGridBaseDirective

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>
rowClasses: any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:416

rowClick

Section titled "rowClick"

Inherited from: IgxGridBaseDirective

Emitted when a row is clicked.

 
rowClick: EventEmitter<IGridRowEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:512

Remarks

Returns the grid row.

Example

<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

rowDimensionHeaderTemplate

Section titled "rowDimensionHeaderTemplate" 
rowDimensionHeaderTemplate: TemplateRef<IgxColumnTemplateContext>

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:395

rowSelectionChanging

Section titled "rowSelectionChanging"

Inherited from: IgxGridBaseDirective

Emitted when grid row is selected.

 
rowSelectionChanging: EventEmitter<IRowSelectionEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:559

Example

<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>

rowStyles

Section titled "rowStyles"

Inherited from: IgxGridBaseDirective

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>
rowStyles: GridStyleCSSProperty | null = null

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:436

rowToggle

Section titled "rowToggle"

Inherited from: IgxGridBaseDirective

Emitted when the expanded state of a row gets changed.

 
rowToggle: EventEmitter<IRowToggleEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1025

Example

<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>

selected

Section titled "selected"

Inherited from: IgxGridBaseDirective

Emitted when a cell is selected.

 
selected: EventEmitter<IGridCellEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:548

Remarks

Returns the grid cell.

Example

<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

selectedRowsChange

Section titled "selectedRowsChange"

Inherited from: IgxGridBaseDirective

Emitted when the rows are selected or deselected.

 
selectedRowsChange: EventEmitter<any[]>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1014

Example

<igx-grid [data]="employeeData" (selectedRowsChange)="selectedRowsChange($event)" [autoGenerate]="true"></igx-grid>

sorting

Section titled "sorting"

Inherited from: IgxGridBaseDirective

Emitted before sorting expressions are applied.

 
sorting: EventEmitter<ISortingEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:751

Remarks

Returns an ISortingEventArgs object. sortingExpressions key holds the sorting expressions.

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid>

sortingDone

Section titled "sortingDone"

Inherited from: IgxGridBaseDirective

Emitted after sorting is completed.

 
sortingDone: EventEmitter<ISortingExpression<any> | ISortingExpression<any>[]>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:764

Remarks

Returns the sorting expression.

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>

sortingExpressionsChange

Section titled "sortingExpressionsChange"

Inherited from: IgxGridBaseDirective

Emitted before sorting is performed.

 
sortingExpressionsChange: EventEmitter<ISortingExpression<any>[]>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1071

Remarks

Returns the sorting expressions.

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>

Optional uniqueColumnValuesStrategy

Section titled "uniqueColumnValuesStrategy"

Inherited from: IgxGridBaseDirective

Gets/Sets a unique values strategy used by the Excel Style Filtering

 
uniqueColumnValuesStrategy: object

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:470

Remarks

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.

Example

<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>

validation

Section titled "validation"

Inherited from: IgxGridBaseDirective

Represents the validation service for the grid. The type contains properties and methods (logic) for validating records

 
validation: IgxGridValidationService

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:155

validationStatusChange

Section titled "validationStatusChange"

Inherited from: IgxGridBaseDirective

Emitted when grid's validation status changes.

 
validationStatusChange: EventEmitter<IGridValidationStatusEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:535

Example

<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

validationTrigger

Section titled "validationTrigger"

Inherited from: IgxGridBaseDirective

Gets/Sets the trigger for validators used when editing the grid.

 
validationTrigger: GridValidationTrigger = 'change'

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2049

Example

<igx-grid #grid validationTrigger='blur'></igx-grid>

valueChipTemplate

Section titled "valueChipTemplate"

Gets/Sets a custom template for the value chips.

 
valueChipTemplate: TemplateRef<IgxPivotGridValueTemplateContext>

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:392

Example

<igx-pivot-grid [valueChipTemplate]="myTemplate"><igx-pivot-grid>

valueInit

Section titled "valueInit"

Emitted when the value is initialized.

 
valueInit: EventEmitter<IPivotValue>

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:323

Remarks

Emits the value that is about to be initialized.

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
             (valueInit)="valueInit($event)"></igx-pivot-grid>

valuesChange

Section titled "valuesChange"

Emitted when the values collection is changed via the grid chip area.

 
valuesChange: EventEmitter<IValuesChange>

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:350

Remarks

Returns the new dimension

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
             (valuesChange)="valuesChange($event)"></igx-grid>

Accessors

Section titled "Accessors"

advancedFilteringExpressionsTree

Section titled "advancedFilteringExpressionsTree"

Inherited from: IgxGridBaseDirective

Gets/Sets the advanced filtering state.

 
get advancedFilteringExpressionsTree(): IFilteringExpressionsTree

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1906

Example

let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
this.grid.advancedFilteringExpressionsTree = logic;

Returns IFilteringExpressionsTree 

set advancedFilteringExpressionsTree(value: IFilteringExpressionsTree): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1910

Parameters

Returns void

allDimensions

Section titled "allDimensions"

Gets the full list of dimensions.

 
get allDimensions(): IPivotDimension[]

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1163

Example

const dimensions = this.grid.allDimensions;

Returns IPivotDimension[]

allowAdvancedFiltering

Section titled "allowAdvancedFiltering"

Gets/Sets a value indicating whether the advanced filtering is enabled.

 
set allowAdvancedFiltering(_value: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:864

Example

<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>

Parameters

  • _value: boolean

Returns void

allowFiltering

Section titled "allowFiltering"

Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered

 
get allowFiltering(): any

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:886

Gets/Sets if the filtering is enabled.

 
set allowFiltering(_value: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:886

Example

<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>

Parameters

  • _value: boolean

Returns void

batchEditing

Section titled "batchEditing"

Gets/Sets whether the grid has batch editing enabled. When batch editing is enabled, changes are not made directly to the underlying data. Instead, they are stored as transactions, which can later be committed w/ the commit method.

 
set batchEditing(_val: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1053

Example

<igx-grid [batchEditing]="true" [data]="someData">
</igx-grid>

Parameters

  • _val: boolean

Returns void

cellMergeMode

Section titled "cellMergeMode"

Inherited from: IgxGridBaseDirective

Gets/Sets cell merge mode.

 
get cellMergeMode(): GridCellMergeMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2874

Returns GridCellMergeMode 

set cellMergeMode(value: GridCellMergeMode): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2878

Parameters

Returns void

cellSelection

Section titled "cellSelection"

Inherited from: IgxGridBaseDirective

Gets/Sets cell selection mode.

 
get cellSelection(): GridSelectionMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2855

Returns GridSelectionMode

Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade'

 
set cellSelection(selectionMode: GridSelectionMode): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2859

Parameters

Returns void

columns

Section titled "columns"

Inherited from: IgxGridBaseDirective

Gets an array of columns.

 
get columns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4589

Example

const colums = this.grid.columns.

Returns IgxColumnComponent[]

columnSelection

Section titled "columnSelection"

Inherited from: IgxGridBaseDirective

Gets/Sets column selection mode

 
get columnSelection(): GridSelectionMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2916

Returns GridSelectionMode

Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade'

 
set columnSelection(selectionMode: GridSelectionMode): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2920

Parameters

Returns void

columnWidth

Section titled "columnWidth"

Inherited from: IgxGridBaseDirective

Gets/Sets the default width of the columns.

 
get columnWidth(): string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2173

Example

<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid>

Returns string 

set columnWidth(value: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2176

Parameters

  • value: string

Returns void

data

Section titled "data"

Returns an array of data set to the component.

let data = this.grid.data;
get data(): any[] | null

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1267

Returns any[] | null

Gets/Sets the array of data that populates the component.

<igx-pivot-grid [data]="Data"></igx-pivot-grid>
set data(value: any[] | null): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1243

Parameters

  • value: any[] | null

Returns void

dataCloneStrategy

Section titled "dataCloneStrategy"

Inherited from: IgxGridBaseDirective

Gets/Sets the data clone strategy of the grid when in edit mode.

 
get dataCloneStrategy(): IDataCloneStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:325

Example

<igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>

Returns IDataCloneStrategy

Strategy, used for cloning the provided data. The type has one method, that takes any type of data

 
set dataCloneStrategy(strategy: IDataCloneStrategy): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:329

Parameters

Returns void

dataRowList

Section titled "dataRowList"

Inherited from: IgxGridBaseDirective

A list of currently rendered grid row's.

 
get dataRowList(): QueryList<IgxRowDirective>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2593

Example

const dataList = this.grid.dataRowList;

Returns QueryList<IgxRowDirective>

dataView

Section titled "dataView"

Inherited from: IgxGridBaseDirective

Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.

 
get dataView(): any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5799

Example

const dataView = this.grid.dataView;

Returns any[]

defaultExpandState

Section titled "defaultExpandState"

Gets/Sets the default expand state for all rows.

 
get defaultExpandState(): boolean

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:780

Returns boolean 

set defaultExpandState(val: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:784

Parameters

  • val: boolean

Returns void

defaultRowHeight

Section titled "defaultRowHeight"

Inherited from: IgxGridBaseDirective

Gets the default row height.

 
get defaultRowHeight(): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4489

Example

const rowHeigh = this.grid.defaultRowHeight;

Returns number

dimensionsSortingExpressions

Section titled "dimensionsSortingExpressions"

Gets the sorting expressions generated for the dimensions.

 
get dimensionsSortingExpressions(): ISortingExpression<any>[]

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:361

Example

const expressions = this.grid.dimensionsSortingExpressions;

Returns ISortingExpression<any>[]

dragGhostCustomTemplate

Section titled "dragGhostCustomTemplate"

Inherited from: IgxGridBaseDirective

Gets the custom template, if any, used for row drag ghost.

 
get dragGhostCustomTemplate(): TemplateRef<IgxGridRowDragGhostContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1217

Returns TemplateRef<IgxGridRowDragGhostContext>

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;
set dragGhostCustomTemplate(template: TemplateRef<IgxGridRowDragGhostContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1234

Parameters

Returns void

dragIndicatorIconTemplate

Section titled "dragIndicatorIconTemplate"

The template for drag indicator icons. Could be of any type

 
get dragIndicatorIconTemplate(): any

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:973

The custom template, if any, that should be used when rendering the row drag indicator icon

 
set dragIndicatorIconTemplate(_val: TemplateRef<any>): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:973

Parameters

  • _val: TemplateRef<any>

Returns void

emptyFilteredGridMessage

Section titled "emptyFilteredGridMessage"

Inherited from: IgxGridBaseDirective 

get emptyFilteredGridMessage(): string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2260

Returns string

Gets/Sets the message displayed when there are no records and the grid is filtered.

 
set emptyFilteredGridMessage(value: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2256

Example

<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>

Parameters

  • value: string

Returns void

emptyGridMessage

Section titled "emptyGridMessage"

Inherited from: IgxGridBaseDirective 

get emptyGridMessage(): string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2194

Returns string

Get/Sets the message displayed when there are no records.

 
set emptyGridMessage(value: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2191

Example

<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>

Parameters

  • value: string

Returns void

emptyGridTemplate

Section titled "emptyGridTemplate"

Inherited from: IgxGridBaseDirective

Gets/Sets a custom template when empty.

 
get emptyGridTemplate(): TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:252

Example

<ng-template igxGridEmpty>
  <!-- content to show when the grid is empty -->
</ng-template>

Or

<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

Returns TemplateRef<IgxGridTemplateContext> 

set emptyGridTemplate(template: TemplateRef<IgxGridTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:255

Parameters

Returns void

excelStyleHeaderIconTemplate

Section titled "excelStyleHeaderIconTemplate"

Inherited from: IgxGridBaseDirective

Gets the excel style header icon.

 
get excelStyleHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1567

Returns TemplateRef<IgxGridHeaderTemplateContext>

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;
set excelStyleHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1584

Parameters

Returns void

expansionStates

Section titled "expansionStates"

Inherited from: IgxGridBaseDirective

Gets/Sets a list of key-value pairs [row ID, expansion state].

 
get expansionStates(): Map<any, boolean>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4354

Example

<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
</igx-grid>

Returns Map<any, boolean> 

set expansionStates(value: Map<any, boolean>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4359

Parameters

  • value: Map<any, boolean>

Returns void

filteredData

Section titled "filteredData"

Inherited from: IgxGridBaseDirective

Returns an array of objects containing the filtered data.

 
get filteredData(): any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3329

Example

let filteredData = this.grid.filteredData;

Returns any

filteredSortedData

Section titled "filteredSortedData"

Inherited from: IgxGridBaseDirective

Returns an array containing the filtered sorted data.

 
get filteredSortedData(): any[] | null

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3341

Example

const filteredSortedData = this.grid1.filteredSortedData;

Returns any[] | null

filteringExpressionsTree

Section titled "filteringExpressionsTree"

Inherited from: IgxGridBaseDirective

Gets/Sets the filtering state.

 
get filteringExpressionsTree(): IFilteringExpressionsTree

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1860

Example

<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>

Returns IFilteringExpressionsTree 

set filteringExpressionsTree(value: IFilteringExpressionsTree): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1864

Parameters

Returns void

filteringLogic

Section titled "filteringLogic"

Inherited from: IgxGridBaseDirective

Gets/Sets the filtering logic of the grid.

 
get filteringLogic(): FilteringLogic

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1839

Example

<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>

Returns FilteringLogic 

set filteringLogic(value: FilteringLogic): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1843

Parameters

Returns void

filterMode

Section titled "filterMode"

The filter mode for the grid. It can be quick filter of excel-style filter

 
get filterMode(): any

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:875

Gets/Sets the filter mode.

 
set filterMode(_value: FilterMode): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:875

Example

<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>

Parameters

Returns void

filterStrategy

Section titled "filterStrategy"

Inherited from: IgxGridBaseDirective

Gets/Sets the filtering strategy of the grid.

 
get filterStrategy(): IFilteringStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2443

Example

<igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>

Returns IFilteringStrategy 

set filterStrategy(classRef: IFilteringStrategy): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2447

Parameters

Returns void

hasVisibleColumns

Section titled "hasVisibleColumns"

Inherited from: IgxGridBaseDirective

Indicates whether the grid has columns that are shown

 
get hasVisibleColumns(): any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5529

Indicates whether the grid has columns that are shown

 
set hasVisibleColumns(value: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5529

Parameters

  • value: boolean

Returns void

headerCollapsedIndicatorTemplate

Section titled "headerCollapsedIndicatorTemplate"

Inherited from: IgxGridBaseDirective

Gets the row collapse indicator template.

 
get headerCollapsedIndicatorTemplate(): TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1538

Returns TemplateRef<IgxGridTemplateContext>

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;
set headerCollapsedIndicatorTemplate(template: TemplateRef<IgxGridTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1555

Parameters

Returns void

headerExpandedIndicatorTemplate

Section titled "headerExpandedIndicatorTemplate"

Inherited from: IgxGridBaseDirective

Gets the header expand indicator template.

 
get headerExpandedIndicatorTemplate(): TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1507

Returns TemplateRef<IgxGridTemplateContext>

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;
set headerExpandedIndicatorTemplate(template: TemplateRef<IgxGridTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1524

Parameters

Returns void

headSelectorTemplate

Section titled "headSelectorTemplate"

Inherited from: IgxGridBaseDirective

Gets the header row selector template.

 
get headSelectorTemplate(): TemplateRef<IgxHeadSelectorTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2607

Returns TemplateRef<IgxHeadSelectorTemplateContext>

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;
set headSelectorTemplate(template: TemplateRef<IgxHeadSelectorTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2624

Parameters

Returns void

height

Section titled "height"

Inherited from: IgxGridBaseDirective

Gets/Sets the height.

 
get height(): string | null

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2095

Example

<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>

Returns string | null 

set height(value: string | null): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2099

Parameters

  • value: string | null

Returns void

hideRowSelectors

Section titled "hideRowSelectors"

Gets/Sets if the row selectors are hidden.

 
set hideRowSelectors(_value: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:808

Parameters

  • _value: boolean

Returns void

id

Section titled "id"

Gets/Sets the value of the id attribute.

 
get id(): string

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1226

Example

<igx-pivot-grid [id]="'igx-pivot-1'" [data]="Data"></igx-pivot-grid>

Returns string

isLoading

Section titled "isLoading"

Inherited from: IgxGridBaseDirective 

get isLoading(): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2222

Returns boolean

Gets/Sets whether the grid is going to show a loading indicator.

 
set isLoading(value: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2209

Example

<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>

Parameters

  • value: boolean

Returns void

lastSearchInfo

Section titled "lastSearchInfo"

Inherited from: IgxGridBaseDirective

Represents the last search information.

 
get lastSearchInfo(): ISearchInfo

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2963

Returns ISearchInfo

loadingGridTemplate

Section titled "loadingGridTemplate"

Inherited from: IgxGridBaseDirective

Gets/Sets a custom template when loading.

 
get loadingGridTemplate(): TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:285

Example

<ng-template igxGridLoading>
  <!-- content to show when the grid is loading -->
</ng-template>

Or

<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

Returns TemplateRef<IgxGridTemplateContext> 

set loadingGridTemplate(template: TemplateRef<IgxGridTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:288

Parameters

Returns void

locale

Section titled "locale"

Inherited from: IgxGridBaseDirective

Gets/Sets the locale.

 
get locale(): string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1956

Returns string

Represents the locale of the grid: USD, EUR, GBP, CNY, JPY, etc.

 
set locale(value: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1960

Parameters

  • value: string

Returns void

mergeStrategy

Section titled "mergeStrategy"

Inherited from: IgxGridBaseDirective

Gets/Sets the merge strategy of the grid.

 
get mergeStrategy(): IGridMergeStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2478

Example

<igx-grid #grid [data]="localData" [mergeStrategy]="mergeStrategy"></igx-grid>

Returns IGridMergeStrategy 

set mergeStrategy(value: IGridMergeStrategy): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2481

Parameters

Returns void

nativeElement

Section titled "nativeElement"

Inherited from: IgxGridBaseDirective

Gets the native element.

 
get nativeElement(): HTMLElement

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4458

Example

const nativeEl = this.grid.nativeElement.

Returns HTMLElement

outlet

Section titled "outlet"

Inherited from: IgxGridBaseDirective

Gets/Sets the outlet used to attach the grid's overlays to.

 
get outlet(): IgxOverlayOutletDirective

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4472

Returns IgxOverlayOutletDirective

pagingMode

Section titled "pagingMode"

Represents the paging of the grid. It can be either 'Local' or 'Remote'

  • Local: Default value; The grid will paginate the data source based on the page
 
get pagingMode(): any

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:796

Represents the paging of the grid. It can be either 'Local' or 'Remote'

  • Local: Default value; The grid will paginate the data source based on the page
 
set pagingMode(_val: GridPagingMode): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:796

Parameters

Returns void

pinnedEndColumns

Section titled "pinnedEndColumns"

Inherited from: IgxGridBaseDirective

Gets an array of the pinned to the right columns.

 
get pinnedEndColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4629

Example

const pinnedColumns = this.grid.pinnedEndColumns.

Returns IgxColumnComponent[]

pinnedStartColumns

Section titled "pinnedStartColumns"

Inherited from: IgxGridBaseDirective

Gets an array of the pinned to the left columns.

 
get pinnedStartColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4617

Example

const pinnedColumns = this.grid.pinnedStartColumns.

Returns IgxColumnComponent[]

pinning

Section titled "pinning"

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)

 
get pinning(): any

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:995

Gets/Sets the initial pinning configuration.

 
set pinning(_value: object): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:995

Example

<igx-grid [pinning]="pinningConfig"></igx-grid>

Parameters

  • _value: object

Returns void

pivotConfiguration

Section titled "pivotConfiguration"

The configuration settings for the pivot grid. it includes dimension strategy for rows and columns, filters and data keys

 
get pivotConfiguration(): IPivotConfiguration

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:420

Returns IPivotConfiguration

Gets/Sets the pivot configuration with all related dimensions and values.

 
set pivotConfiguration(value: IPivotConfiguration): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:408

Example

<igx-pivot-grid [pivotConfiguration]="config"></igx-pivot-grid>

Parameters

Returns void

pivotUI

Section titled "pivotUI"

Specifies whether to show the pivot configuration UI in the grid.

 
get pivotUI(): IPivotUISettings

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:453

Returns IPivotUISettings

Specifies whether to show the pivot configuration UI in the grid.

 
set pivotUI(value: IPivotUISettings): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:447

Parameters

Returns void

pivotValueCloneStrategy

Section titled "pivotValueCloneStrategy" 
set pivotValueCloneStrategy(strategy: IDataCloneStrategy): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:505

Parameters

Returns void

primaryKey

Section titled "primaryKey"

Inherited from: IgxGridBaseDirective

Gets/Sets the primary key.

 
get primaryKey(): string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:448

Example

<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>

Returns string

Represents the unique primary key used for identifying rows in the grid

 
set primaryKey(value: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:452

Parameters

  • value: string

Returns void

resourceStrings

Section titled "resourceStrings"

Inherited from: IgxGridBaseDirective

Gets/Sets the resource strings.

 
set resourceStrings(value: IGridResourceStrings): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1818

Parameters

Returns void

rowAddTextTemplate

Section titled "rowAddTextTemplate"

Inherited from: IgxGridBaseDirective

Gets the row add text template.

 
get rowAddTextTemplate(): TemplateRef<IgxGridEmptyTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1384

Returns TemplateRef<IgxGridEmptyTemplateContext>

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;
set rowAddTextTemplate(template: TemplateRef<IgxGridEmptyTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1400

Parameters

Returns void

rowCollapsedIndicatorTemplate

Section titled "rowCollapsedIndicatorTemplate"

Inherited from: IgxGridBaseDirective

Gets the row collapse indicator template.

 
get rowCollapsedIndicatorTemplate(): TemplateRef<IgxGridRowTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1476

Returns TemplateRef<IgxGridRowTemplateContext>

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;
set rowCollapsedIndicatorTemplate(template: TemplateRef<IgxGridRowTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1493

Parameters

Returns void

rowDraggable

Section titled "rowDraggable"

Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged

 
get rowDraggable(): any

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:853

Gets/Sets whether rows can be moved.

 
set rowDraggable(_val: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:853

Example

<igx-grid #grid [rowDraggable]="true"></igx-grid>

Parameters

  • _val: boolean

Returns void

rowEditable

Section titled "rowEditable"

Indicates whether rows in the grid are editable. If te value is true, the rows can be edited

 
get rowEditable(): any

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:985

Gets/Sets whether the rows are editable.

 
set rowEditable(_val: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:985

Example

<igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>

Parameters

  • _val: boolean

Returns void

rowEditActionsTemplate

Section titled "rowEditActionsTemplate"

Inherited from: IgxGridBaseDirective

Gets the row edit actions template.

 
get rowEditActionsTemplate(): TemplateRef<IgxGridRowEditActionsTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1414

Returns TemplateRef<IgxGridRowEditActionsTemplateContext>

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;
set rowEditActionsTemplate(template: TemplateRef<IgxGridRowEditActionsTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1431

Parameters

Returns void

rowEditTextTemplate

Section titled "rowEditTextTemplate"

Inherited from: IgxGridBaseDirective

Gets the row edit text template.

 
get rowEditTextTemplate(): TemplateRef<IgxGridRowEditTextTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1354

Returns TemplateRef<IgxGridRowEditTextTemplateContext>

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;
set rowEditTextTemplate(template: TemplateRef<IgxGridRowEditTextTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1370

Parameters

Returns void

rowExpandedIndicatorTemplate

Section titled "rowExpandedIndicatorTemplate"

Inherited from: IgxGridBaseDirective

Gets the row expand indicator template.

 
get rowExpandedIndicatorTemplate(): TemplateRef<IgxGridRowTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1445

Returns TemplateRef<IgxGridRowTemplateContext>

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;
set rowExpandedIndicatorTemplate(template: TemplateRef<IgxGridRowTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1462

Parameters

Returns void

rowHeight

Section titled "rowHeight"

Inherited from: IgxGridBaseDirective

Gets/Sets the row height.

 
get rowHeight(): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2152

Example

<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid>

Returns number

The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling

 
set rowHeight(value: string | number): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2156

Parameters

  • value: string | number

Returns void

rowList

Section titled "rowList"

Inherited from: IgxGridBaseDirective

A list of grid row.

 
get rowList(): QueryList<IgxRowDirective>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2572

Example

const rowList = this.grid.rowList;

Returns QueryList<IgxRowDirective>

rowSelection

Section titled "rowSelection"

Inherited from: IgxGridBaseDirective

Gets/Sets row selection mode

 
get rowSelection(): GridSelectionMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2895

Returns GridSelectionMode

Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade'

 
set rowSelection(selectionMode: GridSelectionMode): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2899

Parameters

Returns void

rowSelectorTemplate

Section titled "rowSelectorTemplate"

Inherited from: IgxGridBaseDirective

Gets the row selector template.

 
get rowSelectorTemplate(): TemplateRef<IgxRowSelectorTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2640

Returns TemplateRef<IgxRowSelectorTemplateContext>

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;
set rowSelectorTemplate(template: TemplateRef<IgxRowSelectorTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2657

Parameters

Returns void

selectedRows

Section titled "selectedRows"

Gets/Sets the current selection state.

 
get selectedRows(): any[]

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1057

Example

<igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>

Returns any[]

selectRowOnClick

Section titled "selectRowOnClick"

Inherited from: IgxGridBaseDirective

Gets/Sets whether clicking over a row should select/deselect it

 
get selectRowOnClick(): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5812

Returns boolean 

set selectRowOnClick(enabled: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5816

Parameters

  • enabled: boolean

Returns void

shouldGenerate

Section titled "shouldGenerate"

Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid

 
set shouldGenerate(value: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:831

Example

this.grid.shouldGenerate = true;

Parameters

  • value: boolean

Returns void

showSummaryOnCollapse

Section titled "showSummaryOnCollapse"

Controls whether the summary row is visible when groupBy/parent row is collapsed.

 
set showSummaryOnCollapse(_value: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1028

Example

<igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid>

Parameters

  • _value: boolean

Returns void

sortAscendingHeaderIconTemplate

Section titled "sortAscendingHeaderIconTemplate"

Inherited from: IgxGridBaseDirective

The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.

 
get sortAscendingHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1600

Returns TemplateRef<IgxGridHeaderTemplateContext>

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;
set sortAscendingHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1621

Parameters

Returns void

sortDescendingHeaderIconTemplate

Section titled "sortDescendingHeaderIconTemplate"

Inherited from: IgxGridBaseDirective

The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.

 
get sortDescendingHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1633

Returns TemplateRef<IgxGridHeaderTemplateContext>

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;
set sortDescendingHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1650

Parameters

Returns void

sortHeaderIconTemplate

Section titled "sortHeaderIconTemplate"

Inherited from: IgxGridBaseDirective

Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.

 
get sortHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1665

Returns TemplateRef<IgxGridHeaderTemplateContext>

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;
set sortHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1682

Parameters

Returns void

sortingExpressions

Section titled "sortingExpressions"

Inherited from: IgxGridBaseDirective

Gets/Sets the sorting state.

 
get sortingExpressions(): ISortingExpression<any>[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2760

Example

<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>

Returns ISortingExpression<any>[] 

set sortingExpressions(value: ISortingExpression<any>[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2764

Parameters

Returns void

sortingOptions

Section titled "sortingOptions"

Inherited from: IgxGridBaseDirective

Gets/Sets the sorting options - single or multiple sorting. Accepts an ISortingOptions object with any of the mode properties.

 
set sortingOptions(value: ISortingOptions): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2499

Example

const _sortingOptions: ISortingOptions = {
     mode: 'single'
}

html <igx-grid [sortingOptions]="sortingOptions">

Parameters

Returns void

sortStrategy

Section titled "sortStrategy"

Inherited from: IgxGridBaseDirective

Gets/Sets the sorting strategy of the grid.

 
get sortStrategy(): IGridSortingStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2460

Example

<igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>

Returns IGridSortingStrategy 

set sortStrategy(value: IGridSortingStrategy): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2464

Parameters

Returns void

summaryCalculationMode

Section titled "summaryCalculationMode"

Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels'

 
get summaryCalculationMode(): any

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1017

Gets/Sets the summary calculation mode.

 
set summaryCalculationMode(_value: GridSummaryCalculationMode): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1017

Example

<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>

Parameters

Returns void

summaryPosition

Section titled "summaryPosition"

Represents the position of summaries: 'top', 'bottom'

 
get summaryPosition(): any

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1006

Gets/Sets the summary position.

 
set summaryPosition(_value: GridSummaryPosition): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1006

Example

<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>

Parameters

Returns void

summaryRowHeight

Section titled "summaryRowHeight"

Get/Set summary row height

 
get summaryRowHeight(): number

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:953

Returns number

superCompactMode

Section titled "superCompactMode"

Enables a super compact theme for the component.

 
get superCompactMode(): boolean

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:474

Example

<igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid>

Returns boolean 

set superCompactMode(value: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:478

Parameters

  • value: boolean

Returns void

totalRecords

Section titled "totalRecords"

Returns the total number of records.

 
set totalRecords(_total: number): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1450

Example

const totalRecords = this.grid.totalRecords;

Parameters

  • _total: number

Returns void

virtualizationState

Section titled "virtualizationState"

Inherited from: IgxGridBaseDirective

Returns the state of the grid virtualization.

 
get virtualizationState(): IForOfState

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3569

Example

const gridVirtState = this.grid1.virtualizationState;

Returns IForOfState

visibleColumns

Section titled "visibleColumns"

Inherited from: IgxGridBaseDirective

Returns an array of visible columns.

 
get visibleColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4717

Example

const visibleColumns = this.grid.visibleColumns.

Returns IgxColumnComponent[]

width

Section titled "width"

Inherited from: IgxGridBaseDirective

Gets/Sets the width of the grid.

 
get width(): string | null

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2125

Example

let gridWidth = this.grid.width;

Returns string | null 

set width(value: string | null): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2129

Parameters

  • value: string | null

Returns void

Methods

Section titled "Methods"

autoSizeRowDimension

Section titled "autoSizeRowDimension"

Auto-sizes row dimension cells.

 
autoSizeRowDimension(dimension: IPivotDimension): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1709

Parameters

Returns void

Example

this.grid.autoSizeRowDimension(dimension);

clearCellSelection

Section titled "clearCellSelection"

Inherited from: IgxGridBaseDirective

Deselect selected cells.

 
clearCellSelection(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5896

Returns void

Example

this.grid.clearCellSelection();

clearFilter

Section titled "clearFilter"

Inherited from: IgxGridBaseDirective

If name is provided, clears the filtering state of the corresponding column.

 
clearFilter(name: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5231

Parameters

  • name: string

Returns void

Example

this.grid.clearFilter();

clearSort

Section titled "clearSort"

Inherited from: IgxGridBaseDirective

If name is provided, clears the sorting state of the corresponding column.

 
clearSort(name: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5246

Parameters

  • name: string

Returns void

Example

this.grid.clearSort();

deselectAllColumns

Section titled "deselectAllColumns"

Inherited from: IgxGridBaseDirective

Deselects all columns

 
deselectAllColumns(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6059

Returns void

Example

this.grid.deselectAllColumns();

deselectAllRows

Section titled "deselectAllRows"

Inherited from: IgxGridBaseDirective

Deselects all rows

 
deselectAllRows(onlyFilterData: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5880

Parameters

  • onlyFilterData: boolean

Returns void

Example

this.grid.deselectAllRows();

deselectColumns

Section titled "deselectColumns"

Inherited from: IgxGridBaseDirective

Deselect specified columns by field.

 
deselectColumns(columns: string[] | ColumnType[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6033

Parameters

Returns void

Example

this.grid.deselectColumns(['ID','Name']);

deselectRows

Section titled "deselectRows"

Inherited from: IgxGridBaseDirective

Deselect specified rows by ID.

 
deselectRows(rowIDs: any[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5844

Parameters

  • rowIDs: any[]

Returns void

Example

this.grid.deselectRows([1,2,5]);

filter

Section titled "filter"

Inherited from: IgxGridBaseDirective

Filters a single column.

 
filter(name: string, value: any, conditionOrExpressionTree: IFilteringOperation | IFilteringExpressionsTree, ignoreCase: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5133

Parameters

Returns void

Example

public filter(term) {
     this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
}

filterDimension

Section titled "filterDimension"

Filters a single IPivotDimension.

 
filterDimension(dimension: IPivotDimension, value: any, conditionOrExpressionTree: IFilteringOperation | IFilteringExpressionsTree): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1973

Parameters

Returns void

Example

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'));
}

filterGlobal

Section titled "filterGlobal"

Inherited from: IgxGridBaseDirective

Filters all the column in the grid with the same condition.

 
filterGlobal(value: any, condition: IFilteringOperation, ignoreCase: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5150

Parameters

Returns void

Example

grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));

getColumnByName

Section titled "getColumnByName"

Inherited from: IgxGridBaseDirective

Returns the column by field name.

 
getColumnByName(name: string): IgxColumnComponent

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4680

Parameters

  • name: string

Returns IgxColumnComponent

Example

const myCol = this.grid1.getColumnByName("ID");

getColumnByVisibleIndex

Section titled "getColumnByVisibleIndex"

Inherited from: IgxGridBaseDirective 

getColumnByVisibleIndex(index: number): IgxColumnComponent

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4684

Parameters

  • index: number

Returns IgxColumnComponent

getColumnGroupExpandState

Section titled "getColumnGroupExpandState" 
getColumnGroupExpandState(col: IgxColumnComponent): boolean

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1645

Parameters

Returns boolean

getHeaderGroupWidth

Section titled "getHeaderGroupWidth"

Inherited from: IgxGridBaseDirective

Gets the width to be set on grid header group.

 
getHeaderGroupWidth(column: IgxColumnComponent): string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4665

Parameters

Returns string

getPinnedEndWidth

Section titled "getPinnedEndWidth"

Inherited from: IgxGridBaseDirective

Gets calculated width of the pinned areas.

 
getPinnedEndWidth(takeHidden: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5740

Parameters

  • takeHidden: boolean

    If we should take into account the hidden columns in the pinned area.

Returns number

Example

const pinnedWidth = this.grid.getPinnedEndWidth();

getRowData

Section titled "getRowData"

Inherited from: IgxGridBaseDirective

Returns the data that is contained in the row component.

 
getRowData(rowSelector: any): any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5066

Parameters

  • rowSelector: any

    correspond to rowID

Returns any

Example

const data = grid.getRowData(94741);

getSelectedColumnsData

Section titled "getSelectedColumnsData"

Inherited from: IgxGridBaseDirective

Returns an array of the current columns selection in the form of [{ column.field: cell.value }, ...].

 
getSelectedColumnsData(formatters: boolean, headers: boolean): any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6084

Parameters

  • formatters: boolean
  • headers: boolean

Returns any[]

getSelectedData

Section titled "getSelectedData"

Inherited from: IgxGridBaseDirective

Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...].

 
getSelectedData(formatters: boolean, headers: boolean): any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5976

Parameters

  • formatters: boolean
  • headers: boolean

Returns any[]

getSelectedRanges

Section titled "getSelectedRanges"

Inherited from: IgxGridBaseDirective

Get the currently selected ranges in the grid.

 
getSelectedRanges(): GridSelectionRange[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5964

Returns GridSelectionRange[]

insertDimensionAt

Section titled "insertDimensionAt"

Inserts dimension in target collection by type at specified index or at the collection's end.

 
insertDimensionAt(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index: number): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1742

Parameters

  • dimension: IPivotDimension

    The dimension that will be added.
  • targetCollectionType: PivotDimensionType

    The target collection type to add to. Can be Row, Column or Filter.
  • index: number

    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.

Returns void

Example

this.grid.insertDimensionAt(dimension, PivotDimensionType.Row, 1);

insertValueAt

Section titled "insertValueAt"

Inserts value at specified index or at the end.

 
insertValueAt(value: IPivotValue, index: number): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1852

Parameters

  • value: IPivotValue

    The value definition that will be added.
  • index: number

    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.

Returns void

Example

this.grid.insertValueAt(value, 1);

markForCheck

Section titled "markForCheck"

Inherited from: IgxGridBaseDirective

Triggers change detection for the grid. 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();
markForCheck(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4902

Returns void

Example

grid.markForCheck();

moveDimension

Section titled "moveDimension"

Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end.

 
moveDimension(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index: number): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1774

Parameters

  • dimension: IPivotDimension

    The dimension that will be moved.
  • targetCollectionType: PivotDimensionType

    The target collection type to move it to. Can be Row, Column or Filter.
  • index: number

    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.

Returns void

Example

this.grid.moveDimension(dimension, PivotDimensionType.Row, 1);

moveValue

Section titled "moveValue"

Move value from its currently at specified index or at the end.

 
moveValue(value: IPivotValue, index: number): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1880

Parameters

  • value: IPivotValue

    The value that will be moved.
  • index: number

    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.

Returns void

Example

this.grid.moveValue(value, 1);
Section titled "navigateTo"

Inherited from: IgxGridBaseDirective

Navigates to a position in the grid based on provided rowindex and visibleColumnIndex.

 
navigateTo(rowIndex: number, visibleColIndex: number, cb: object): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6218

Parameters

  • rowIndex: number
  • visibleColIndex: number
  • cb: object

Returns void

Example

this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });

notifyDimensionChange

Section titled "notifyDimensionChange"

Notifies for dimension change.

 
notifyDimensionChange(regenerateColumns: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1147

Parameters

  • regenerateColumns: boolean

Returns void

recalculateAutoSizes

Section titled "recalculateAutoSizes"

Inherited from: IgxGridBaseDirective

Recalculates all widths of columns that have size set to auto.

 
recalculateAutoSizes(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4699

Returns void

Example

this.grid1.recalculateAutoSizes();

reflow

Section titled "reflow"

Inherited from: IgxGridBaseDirective

Recalculates grid width/height dimensions.

 
reflow(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5397

Returns void

Example

this.grid.reflow();

removeDimension

Section titled "removeDimension"

Removes dimension from its currently collection.

 
removeDimension(dimension: IPivotDimension): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1798

Parameters

Returns void

Example

this.grid.removeDimension(dimension);

removeValue

Section titled "removeValue"

Removes value from collection.

 
removeValue(value: IPivotValue): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1899

Parameters

Returns void

Example

this.grid.removeValue(dimension);

selectAllColumns

Section titled "selectAllColumns"

Inherited from: IgxGridBaseDirective

Selects all columns

 
selectAllColumns(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6072

Returns void

Example

this.grid.deselectAllColumns();

selectAllRows

Section titled "selectAllRows"

Inherited from: IgxGridBaseDirective

Selects all rows

 
selectAllRows(onlyFilterData: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5862

Parameters

  • onlyFilterData: boolean

Returns void

Example

this.grid.selectAllRows();
this.grid.selectAllRows(false);

selectColumns

Section titled "selectColumns"

Inherited from: IgxGridBaseDirective

Select specified columns.

 
selectColumns(columns: string[] | ColumnType[], clearCurrentSelection: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6005

Parameters

  • columns: string[] | ColumnType[]
  • clearCurrentSelection: boolean

    if true clears the current selection

Returns void

Example

this.grid.selectColumns(['ID','Name'], true);

selectedColumns

Section titled "selectedColumns"

Inherited from: IgxGridBaseDirective

Get current selected columns.

 
selectedColumns(): ColumnType[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5990

Returns ColumnType[]

Example

Returns an array with selected columns

const selectedColumns = this.grid.selectedColumns();

selectRange

Section titled "selectRange"

Inherited from: IgxGridBaseDirective

Select range(s) of cells between certain rows and columns of the grid.

 
selectRange(arg: GridSelectionRange | GridSelectionRange[] | null | undefined): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5924

Parameters

Returns void

selectRows

Section titled "selectRows"

Inherited from: IgxGridBaseDirective

Select specified rows by ID.

 
selectRows(rowIDs: any[], clearCurrentSelection: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5830

Parameters

  • rowIDs: any[]
  • clearCurrentSelection: boolean

    if true clears the current selection

Returns void

Example

this.grid.selectRows([1,2,5], true);

sort

Section titled "sort"

Inherited from: IgxGridBaseDirective

Sort a single column.

 
sort(expression: ISortingExpression<any> | ISortingExpression<any>[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5085

Parameters

Returns void

Example

this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });

sortDimension

Section titled "sortDimension"

Sort the dimension and its children in the provided direction.

 
sortDimension(dimension: IPivotDimension, sortDirection: SortingDirection): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1939

Parameters

Returns void

Example

this.grid.sortDimension(dimension, SortingDirection.Asc);

toggleColumn

Section titled "toggleColumn" 
toggleColumn(col: IgxColumnComponent): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1389

Parameters

Returns void

toggleDimension

Section titled "toggleDimension"

Toggles the dimension's enabled state on or off.

 
toggleDimension(dimension: IPivotDimension): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1821

Parameters

Returns void

Example

this.grid.toggleDimension(dimension);

toggleRow

Section titled "toggleRow"

Inherited from: IgxGridBaseDirective

Toggles the row by its id.

 
toggleRow(rowID: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4436

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.

Returns void

Example

this.grid.toggleRow(rowID);

toggleRowGroup

Section titled "toggleRowGroup" 
toggleRowGroup(col: IgxColumnComponent, newState: boolean): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1651

Parameters

Returns void

toggleValue

Section titled "toggleValue"

Toggles the value's enabled state on or off.

 
toggleValue(value: IPivotValue): void

Defined in projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts:1921

Parameters

Returns void

Example

this.grid.toggleValue(value);