Class IgxGridComponent

Grid provides a way to present and manipulate tabular data.

@igxmodule: IgxGridModule
@igxgroup: Grids & Lists
@igxkeywords: grid, table
@igxtheme: igx-grid-theme
@remarks: The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data has been bound, it can be manipulated through filtering, sorting & editing operations.
@example: <igx-grid [data]="employeeData" autoGenerate="false"> <igx-column field="first" header="First Name"></igx-column> <igx-column field="last" header="Last Name"></igx-column> <igx-column field="role" header="Role"></igx-column> </igx-grid>

Hierarchy

IgxGridBaseDirective
- IgxGridComponent

Implements

DoCheck
OnInit
OnInit
DoCheck
OnDestroy
AfterContentInit
AfterViewInit
GridType
OnInit
DoCheck
AfterContentInit
AfterViewInit

Constructors

constructor

Properties

Accessors

Methods

Object literals

clipboardOptions

Constructors

constructor

new IgxGridComponent(selectionService: IgxGridSelectionService, crudService: IgxGridCRUDService, colResizingService: IgxColumnResizingService, gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, _transactions: TransactionService<Transaction, State>, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions): IgxGridComponent

Inherited from IgxGridComponent.constructor

Overrides DisplayDensityBase.constructor
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2820
Parameters
- selectionService: IgxGridSelectionService
- crudService: IgxGridCRUDService
- colResizingService: IgxColumnResizingService
- gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>
- _transactions: TransactionService<Transaction, State>
- elementRef: ElementRef
- zone: NgZone
- document: any
- cdr: ChangeDetectorRef
- resolver: ComponentFactoryResolver
- differs: IterableDiffers
- viewRef: ViewContainerRef
- navigation: IgxGridNavigationService
- filteringService: IgxFilteringService
- overlayService: IgxOverlayService
- summaryService: IgxGridSummaryService
- _displayDensityOptions: IDisplayDensityOptions
Returns IgxGridComponent

Properties

_destroyed

_destroyed: boolean = false

advancedFilteringExpressionsTreeChange

advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree> = new EventEmitter<IFilteringExpressionsTree>()

Emitted after advanced filtering is performed.

@remarks: Returns the advanced filtering expressions tree.
@example: <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>

autoGenerate

autoGenerate: boolean = false

Gets/Sets whether to autogenerate the columns.

@remarks: The default value is false. When set to true, it will override all columns declared through code or in markup.
@example: <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>

cdr

cdr: ChangeDetectorRef

colResizingService

colResizingService: IgxColumnResizingService

columnHidingTitle

columnHidingTitle: string = ""

Gets/Sets the title to be displayed in the built-in column hiding UI.

@example: <igx-grid [showToolbar]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"></igx-grid>

columnPinningTitle

columnPinningTitle: string = ""

Gets/Sets the title to be displayed in the UI of the column pinning.

@example: <igx-grid #grid [data]="localData" [columnPinning]="'true" [columnPinningTitle]="'Column Hiding'" [autoGenerate]="true"></igx-grid>

crudService

crudService: IgxGridCRUDService

document

document: any

dragRowID

dragRowID: any = null

Gets the row ID that is being dragged.

@remarks: The row ID is either the primaryKey value or the data record instance.

dropAreaTemplate

dropAreaTemplate: TemplateRef<any>

Gets/Sets the template that will be rendered as a GroupBy drop area.

@remarks: The grid needs to have at least one groupable column in order the GroupBy area to be displayed.
@example: <igx-grid [dropAreaTemplate]="dropAreaRef"> </igx-grid> <ng-template #myDropArea> <span> Custom drop area! </span> </ng-template>

emptyFilteredGridTemplate

emptyFilteredGridTemplate: TemplateRef<any>

A template reference for the template when the filtered grid is empty.

@example: const emptyTempalte = this.grid.emptyGridTemplate;

emptyGridDefaultTemplate

emptyGridDefaultTemplate: TemplateRef<any>

A template reference for the template when the grid is empty.

@example: const emptyTempalte = this.grid.emptyGridTemplate;

emptyGridTemplate

emptyGridTemplate: TemplateRef<any>

Gets/Sets a custom template when empty.

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

evenRowCSS

evenRowCSS: string = "igx-grid__tr--even"

Gets/Sets the styling classes applied to all even IgxGridRowComponents in the grid.

@example: <igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>

filteringExpressionsTreeChange

filteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree> = new EventEmitter<IFilteringExpressionsTree>()

Emitted after filtering is performed.

@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>

filteringService

filteringService: IgxFilteringService

gridAPI

gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>

groupsExpanded

groupsExpanded: boolean = true

Gets/Sets whether created groups are rendered expanded or collapsed.

@remarks: The default rendered state is expanded.
@example: <igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid>

groupsRecords

groupsRecords: IGroupByRecord[] = []

Gets the hierarchical representation of the group by records.

@example: let groupRecords = this.grid.groupsRecords;

headerCollapseIndicatorTemplate

headerCollapseIndicatorTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering a header collapse indicator.

headerExpandIndicatorTemplate

headerExpandIndicatorTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering a header expand indicator.

loadingGridTemplate

loadingGridTemplate: TemplateRef<any>

Gets/Sets a custom template when loading.

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

navigation

navigation: IgxGridNavigationService

oddRowCSS

oddRowCSS: string = "igx-grid__tr--odd"

Gets/Sets the styling classes applied to all odd IgxGridRowComponents in the grid.

@example: <igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>

onCellClick

onCellClick: EventEmitter<IGridCellEventArgs> = new EventEmitter<IGridCellEventArgs>()

Emitted when IgxGridCellComponent is clicked.

@remarks: Returns the IgxGridCellComponent.
@example: <igx-grid #grid (onCellClick)="onCellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

onCellEdit

onCellEdit: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

Emitted when cell has been edited.

@remarks: Event is fired after editing is completed, when the cell is exiting edit mode. This event is cancelable.
@example: <igx-grid #grid3 (onCellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'"> </igx-grid>

onCellEditCancel

onCellEditCancel: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

Emitted when editing and not submitting the value.

@remarks: (e.g. Esc key was pressed) This event is cancelable.
@example: <igx-grid #grid3 (onCellEditCancel)="editCancel($event)" [data]="data" [primaryKey]="'ProductID'"> </igx-grid>

onCellEditEnter

onCellEditEnter: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

Emitted when cell enters edit mode.

@remarks: This event is cancelable.
@example: <igx-grid #grid3 (onCellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'"> </igx-grid>

onColumnInit

onColumnInit: EventEmitter<IgxColumnComponent> = new EventEmitter<IgxColumnComponent>()

Emitted when a column is initialized.

@remarks: Returns the column object.
@example: <igx-grid #grid [data]="localData" [onColumnInit]="initColumns($event)" [autoGenerate]="true"></igx-grid>

onColumnMoving

onColumnMoving: EventEmitter<IColumnMovingEventArgs> = new EventEmitter<IColumnMovingEventArgs>()

Emitted during the column moving operation.

@remarks: Returns the source and target IgxColumnComponent objects. This event is cancelable.
@example: <igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMoving)="moving($event)"></igx-grid>

onColumnMovingEnd

onColumnMovingEnd: EventEmitter<IColumnMovingEndEventArgs> = new EventEmitter<IColumnMovingEndEventArgs>()

Emitted when column moving ends.

@remarks: Returns the source and target IgxColumnComponent objects.
@example: <igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingEnd)="movingEnds($event)"></igx-grid>

onColumnMovingStart

onColumnMovingStart: EventEmitter<IColumnMovingStartEventArgs> = new EventEmitter<IColumnMovingStartEventArgs>()

Emitted when column moving starts.

@remarks: Returns the moved IgxColumnComponent object.
@example: <igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingStart)="movingStart($event)"></igx-grid>

onColumnPinning

onColumnPinning: EventEmitter<IPinColumnEventArgs> = new EventEmitter<IPinColumnEventArgs>()

Emitted when IgxColumnComponent is pinned.

@remarks: The index that the column is inserted at may be changed through the insertAtIndex property.
@example: public columnPinning(event) { if (event.column.field === "Name") { event.insertAtIndex = 0; } }

onColumnResized

onColumnResized: EventEmitter<IColumnResizeEventArgs> = new EventEmitter<IColumnResizeEventArgs>()

Emitted when column is resized.

@remarks: Returns the IgxColumnComponent object's old and new width.
@example: <igx-grid #grid [data]="localData" (onColumnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>

onColumnSelectionChange

onColumnSelectionChange: EventEmitter<IColumnSelectionEventArgs> = new EventEmitter<IColumnSelectionEventArgs>()

Emitted when IgxColumnComponent is selected.

@example: <igx-grid #grid (onColumnSelectionChange)="onColumnSelectionChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>

onColumnVisibilityChanged

onColumnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs> = new EventEmitter<IColumnVisibilityChangedEventArgs>()

Emitted when column visibility is changed.

@remarks: Args: { column: any, newValue: boolean }
@example: <igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnVisibilityChanged)="visibilityChanged($event)"></igx-grid>

onContextMenu

onContextMenu: EventEmitter<IGridCellEventArgs> = new EventEmitter<IGridCellEventArgs>()

Emitted when a cell is right clicked.

@remarks: Returns the IgxGridCellComponent object.

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

onDataPreLoad

onDataPreLoad: EventEmitter<IForOfState> = new EventEmitter<IForOfState>()

Emitted when a new chunk of data is loaded from virtualization.

@example: <igx-grid #grid [data]="localData" [autoGenerate]="true" (onDataPreLoad)='handleDataPreloadEvent()'></igx-grid>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onDoubleClick

onDoubleClick: EventEmitter<IGridCellEventArgs> = new EventEmitter<IGridCellEventArgs>()

Emitted when a cell is double clicked.

@remarks: Returns the IgxGridCellComponent object.
@example: <igx-grid #grid [data]="localData" (onDoubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>

onFilteringDone

onFilteringDone: EventEmitter<IFilteringExpressionsTree> = new EventEmitter<IFilteringExpressionsTree>()

Emitted when filtering is performed through the UI.

@remarks: Returns the filtering expressions tree of the column for which filtering was performed.
@example: <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onFilteringDone)="filteringDone($event)"></igx-grid>

onGridCopy

onGridCopy: EventEmitter<IGridClipboardEvent> = new EventEmitter<IGridClipboardEvent>()

Emitted when a copy operation is executed.

@remarks: Fired only if copy behavior is enabled through the [clipboardOptions]{@link IgxGridBaseDirective#clipboardOptions}.

onGridKeydown

onGridKeydown: EventEmitter<IGridKeydownEventArgs> = new EventEmitter<IGridKeydownEventArgs>()

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

@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 (onGridKeydown)="customKeydown($event)"></igx-grid>

onGroupingDone

onGroupingDone: EventEmitter<IGroupingDoneEventArgs> = new EventEmitter<IGroupingDoneEventArgs>()

Emitted when columns are grouped/ungrouped.

@remarks: The onGroupingDone event would be raised only once if several columns get grouped at once by calling the groupBy() or clearGrouping() API methods and passing an array as an argument. The event arguments provide the expressions, groupedColumns and ungroupedColumns properties, which contain the ISortingExpression and the IgxColumnComponent related to the grouping/ungrouping operation. Please note that groupedColumns and ungroupedColumns show only the newly changed columns (affected by the last grouping/ungrouping operation), not all columns which are currently grouped/ungrouped. columns.
@example: <igx-grid #grid [data]="localData" (onGroupingDone)="groupingDone($event)" [autoGenerate]="true"></igx-grid>

onPagingDone

onPagingDone: EventEmitter<IPageEventArgs> = new EventEmitter<IPageEventArgs>()

Emitted when paging is performed.

@remarks: Returns an object consisting of the previous and next pages.
@example: <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onPagingDone)="pagingDone($event)"></igx-grid>

onRangeSelection

onRangeSelection: EventEmitter<GridSelectionRange> = new EventEmitter<GridSelectionRange>()

Emitted when making a range selection.

@remarks: Range selection can be made either through drag selection or through keyboard selection.

onRowAdded

onRowAdded: EventEmitter<IRowDataEventArgs> = new EventEmitter<IRowDataEventArgs>()

Emitted when a row added through the API.

@remarks: Returns the data for the new IgxGridRowComponent object.
@example: <igx-grid #grid [data]="localData" (onRowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>

onRowDeleted

onRowDeleted: EventEmitter<IRowDataEventArgs> = new EventEmitter<IRowDataEventArgs>()

Emitted when a row is deleted through API.

@remarks: Returns an IRowDataEventArgs object.
@example: <igx-grid #grid [data]="localData" (onRowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>

onRowDragEnd

onRowDragEnd: EventEmitter<IRowDragEndEventArgs> = new EventEmitter<IRowDragEndEventArgs>()

Emitted when dropping a row.

@remarks: Return the dropped row.

onRowDragStart

onRowDragStart: EventEmitter<IRowDragStartEventArgs> = new EventEmitter<IRowDragStartEventArgs>()

Emitted when start dragging a row.

@remarks: Return the dragged row.

onRowEdit

onRowEdit: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

Emitted when exiting edit mode for a row.

@remarks: Emitted when [rowEditable]="true" & endEdit(true) is called. Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, performing paging operation, column resizing, pinning, moving or hitting Done button inside of the rowEditingOverlay, or hitting the Enter key while editing a cell. This event is cancelable.
@example: <igx-grid #grid3 (onRowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> </igx-grid>

onRowEditCancel

onRowEditCancel: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

Emitted when row editing is canceled.

@remarks: Emits when [rowEditable]="true" & endEdit(false) is called. Emitted when changing hitting Esc key during cell editing and when click on the Cancel button in the row editing overlay. This event is cancelable.
@example: <igx-grid #grid3 (onRowEditCancel)="editCancel($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true"> </igx-grid>

onRowEditEnter

onRowEditEnter: EventEmitter<IGridEditEventArgs> = new EventEmitter<IGridEditEventArgs>()

Emitted when a row enters edit mode.

@remarks: Emitted when [rowEditable]="true". This event is cancelable.
@example: <igx-grid #grid3 (onRowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true"> </igx-grid>

onRowPinning

onRowPinning: EventEmitter<IPinRowEventArgs> = new EventEmitter<IPinRowEventArgs>()

Emitted when the pinned state of a row is changed.

@example: <igx-grid [data]="employeeData" (onRowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid>

onRowSelectionChange

onRowSelectionChange: EventEmitter<IRowSelectionEventArgs> = new EventEmitter<IRowSelectionEventArgs>()

Emitted when IgxGridRowComponent is selected.

@example: <igx-grid #grid (onRowSelectionChange)="onCellClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>

onRowToggle

onRowToggle: EventEmitter<IRowToggleEventArgs> = new EventEmitter<IRowToggleEventArgs>()

Emitted when the expanded state of a row gets changed.

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

onSelection

onSelection: EventEmitter<IGridCellEventArgs> = new EventEmitter<IGridCellEventArgs>()

Emitted when IgxGridCellComponent is selected.

@remarks: Returns the IgxGridCellComponent.
@example: <igx-grid #grid (onSelection)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

onSortingDone

onSortingDone: EventEmitter<ISortingExpression | ISortingExpression[]> = new EventEmitter<ISortingExpression | Array<ISortingExpression>>()

Emitted when sorting is performed through the UI.

@remarks: Returns the sorting expression.
@example: <igx-grid #grid [data]="localData" [autoGenerate]="true" (onSortingDone)="sortingDone($event)"></igx-grid>

onToolbarExporting

onToolbarExporting: EventEmitter<IGridToolbarExportEventArgs> = new EventEmitter<IGridToolbarExportEventArgs>()

Emitted when an export process is initiated by the user.

@example: toolbarExporting(event: IGridToolbarExportEventArgs){ const toolbarExporting = event; }

pageChange

pageChange: EventEmitter<number> = new EventEmitter<number>()

Emitted after the current page is changed.

@example: <igx-grid (pageChange)="onPageChange($event)"></igx-grid>

public onPageChange(page: number) { this.currentPage = page; }

paginationTemplate

paginationTemplate: TemplateRef<any>

Gets/Sets a custom ng-template for the pagination UI of the grid.

@example: <igx-grid #grid [paging]="true" [myTemplate]="myTemplate" [height]="'305px'"></igx-grid>

perPageChange

perPageChange: EventEmitter<number> = new EventEmitter<number>()

Emitted when perPage property value of the grid is changed.

@example: <igx-grid #grid (perPageChange)="onPerPageChange($event)" [autoGenerate]="true"></igx-grid>

public onPerPageChange(perPage: number) { this.perPage = perPage; }

primaryKey

primaryKey: any

Gets/Sets the primary key.

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

rowCollapsedIndicatorTemplate

rowCollapsedIndicatorTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering a row collapse indicator.

rowExpandedIndicatorTemplate

rowExpandedIndicatorTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering a row expand indicator.

selectionService

selectionService: IgxGridSelectionService

shouldGenerate

shouldGenerate: boolean

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

@remarks: This will allow to bind the grid to remote data and having auto-generated columns at the same time. Note that after generating the columns, this property would be disabled to avoid re-creating columns each time a new data is assigned.
@example: this.grid.shouldGenerate = true;

sortingExpressionsChange

sortingExpressionsChange: EventEmitter<ISortingExpression[]> = new EventEmitter<ISortingExpression[]>()

Emitted before sorting is performed.

@remarks: Returns the sorting expressions.
@example: <igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>

summaryService

summaryService: IgxGridSummaryService

toolbar

toolbar: IgxGridToolbarComponent = null

Provides access to the IgxToolbarComponent.

@example: const gridToolbar = this.grid.toolbar;

uniqueColumnValuesStrategy

uniqueColumnValuesStrategy: function

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

@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>

Type declaration

- (column: IgxColumnComponent, filteringExpressionsTree: IFilteringExpressionsTree, done: function): void
- Parameters
  - column: IgxColumnComponent
  - filteringExpressionsTree: IFilteringExpressionsTree
  - done: function
    - - (values: any[]): void
      - Parameters
        
        values: any[]
        
        Returns void
  Returns void

Accessors

activeDescendant

get activeDescendant(): string

Inherited from IgxGridComponent.activeDescendant
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1973
Returns string

advancedFilteringExpressionsTree

get advancedFilteringExpressionsTree(): IFilteringExpressionsTree
set advancedFilteringExpressionsTree(value: IFilteringExpressionsTree): void

Inherited from IgxGridComponent.advancedFilteringExpressionsTree
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:376
Gets/Sets the advanced filtering state.
@example
let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; this.grid.advancedFilteringExpressionsTree = logic;
Returns IFilteringExpressionsTree
Inherited from IgxGridComponent.advancedFilteringExpressionsTree
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:380
Gets/Sets the advanced filtering state.
@example
let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree; this.grid.advancedFilteringExpressionsTree = logic;
Parameters
- value: IFilteringExpressionsTree
Returns void

allowAdvancedFiltering

get allowAdvancedFiltering(): boolean
set allowAdvancedFiltering(value: boolean): void

Inherited from IgxGridComponent.allowAdvancedFiltering
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:940
Gets/Sets a value indicating whether the advanced filtering is enabled.
@example
<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [showToolbar]="true" [autoGenerate]="true"></igx-grid>
Returns boolean
Inherited from IgxGridComponent.allowAdvancedFiltering
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:944
Gets/Sets a value indicating whether the advanced filtering is enabled.
@example
<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [showToolbar]="true" [autoGenerate]="true"></igx-grid>
Parameters
- value: boolean
Returns void

allowFiltering

get allowFiltering(): boolean
set allowFiltering(value: boolean): void

Inherited from IgxGridComponent.allowFiltering
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:912
Gets/Sets if the filtering is enabled.
@example
<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Returns boolean
Inherited from IgxGridComponent.allowFiltering
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:916
Gets/Sets if the filtering is enabled.
@example
<igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Parameters
- value: boolean
Returns void

bannerClass

get bannerClass(): string

Inherited from IgxGridComponent.bannerClass
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1993
Returns string

cellSelection

get cellSelection(): "none" | "single" | "multiple"
set cellSelection(selectionMode: GridSelectionMode): void

Inherited from IgxGridComponent.cellSelection
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2341
Gets/Sets cell selection mode.

@remarks

By default the cell selection mode is multiple

Returns "none" | "single" | "multiple"
Inherited from IgxGridComponent.cellSelection
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2345
Gets/Sets cell selection mode.

@remarks

By default the cell selection mode is multiple

Parameters
- selectionMode: GridSelectionMode
Returns void

columnHiding

get columnHiding(): boolean
set columnHiding(value: boolean): void

Inherited from IgxGridComponent.columnHiding
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:554
Gets/Sets whether the column hiding UI is enabled.
@remarks

By default it is disabled (false). In order for the UI to work, you need to enable the toolbar as shown in the example below.
@example
<igx-grid [data]="Data" [autoGenerate]="true" [showToolbar]="true" [columnHiding]="true"></igx-grid>
Returns boolean
Inherited from IgxGridComponent.columnHiding
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:558
Gets/Sets whether the column hiding UI is enabled.
@remarks

By default it is disabled (false). In order for the UI to work, you need to enable the toolbar as shown in the example below.
@example
<igx-grid [data]="Data" [autoGenerate]="true" [showToolbar]="true" [columnHiding]="true"></igx-grid>
Parameters
- value: boolean
Returns void

columnPinning

get columnPinning(): boolean
set columnPinning(value: boolean): void

Inherited from IgxGridComponent.columnPinning
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:882
Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
@example
<igx-grid #grid [data]="localData" [columnPinning]="'true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Returns boolean
Inherited from IgxGridComponent.columnPinning
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:885
Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
@example
<igx-grid #grid [data]="localData" [columnPinning]="'true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Parameters
- value: boolean
Returns void

columnSelection

get columnSelection(): "none" | "single" | "multiple"
set columnSelection(selectionMode: GridSelectionMode): void

Inherited from IgxGridComponent.columnSelection
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2381
Gets/Sets column selection mode

@remarks

By default the row selection mode is none

Returns "none" | "single" | "multiple"
Inherited from IgxGridComponent.columnSelection
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2385
Gets/Sets column selection mode

@remarks

By default the row selection mode is none

Parameters
- selectionMode: GridSelectionMode
Returns void

columnWidth

get columnWidth(): string
set columnWidth(value: string): void

Inherited from IgxGridComponent.columnWidth
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:753
Gets/Sets the default width of the columns.
@example
<igx-grid #grid [data]="localData" [showToolbar]="true" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
Returns string
Inherited from IgxGridComponent.columnWidth
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:756
Gets/Sets the default width of the columns.
@example
<igx-grid #grid [data]="localData" [showToolbar]="true" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
Parameters
- value: string
Returns void

columns

get columns(): IgxColumnComponent[]

Inherited from IgxGridComponent.columns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3507
Gets an array of IgxColumnComponents.
@example
const colums = this.grid.columns.
Returns IgxColumnComponent[]

data

get data(): any[]
set data(value: any[]): void

Overrides IgxGridBaseDirective.data
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:142
Gets/Sets the array of data that populates the IgxGridComponent.
@example
<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
Returns any[]
Overrides IgxGridBaseDirective.data
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:146
Gets/Sets the array of data that populates the IgxGridComponent.
@example
<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
Parameters
- value: any[]
Returns void

dataRowList

get dataRowList(): QueryList<IgxRowDirective<IgxGridBaseDirective>>

Inherited from IgxGridComponent.dataRowList
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1599
A list of currently rendered IgxGridRowComponent's.
@example
const dataList = this.grid.dataRowList;
Returns QueryList<IgxRowDirective<IgxGridBaseDirective>>

dataView

get dataView(): any[]

Inherited from IgxGridComponent.dataView
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5299
Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.
@example
const dataView = this.grid.dataView;
Returns any[]

defaultHeaderGroupMinWidth

get defaultHeaderGroupMinWidth(): number

Inherited from IgxGridComponent.defaultHeaderGroupMinWidth
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3416
Returns the IgxGridHeaderGroupComponent's minimum allowed width.

@remarks

Used internally for restricting header group component width. The values below depend on the header cell default right/left padding values.

Returns number

defaultRowHeight

get defaultRowHeight(): number

Inherited from IgxGridComponent.defaultRowHeight
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3385
Gets the default row height.
@example
const rowHeigh = this.grid.defaultRowHeight;
Returns number

displayDensity

get displayDensity(): DisplayDensity | string
set displayDensity(val: DisplayDensity | string): void

Inherited from DisplayDensityBase.displayDensity
- Defined in projects/igniteui-angular/src/lib/core/displayDensity.ts:55
Returns the theme of the component. The default theme is comfortable. Available options are comfortable, cosy, compact.
```
let componentTheme = this.component.displayDensity;
```
Returns DisplayDensity | string
Inherited from DisplayDensityBase.displayDensity
- Defined in projects/igniteui-angular/src/lib/core/displayDensity.ts:63
Sets the theme of the component.

Parameters
- val: DisplayDensity | string
Returns void

dragIndicatorIconTemplate

get dragIndicatorIconTemplate(): TemplateRef<any>
set dragIndicatorIconTemplate(val: TemplateRef<any>): void

Inherited from IgxGridComponent.dragIndicatorIconTemplate
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1907
The custom template, if any, that should be used when rendering the row drag indicator icon

Returns TemplateRef<any>
Inherited from IgxGridComponent.dragIndicatorIconTemplate
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1911
The custom template, if any, that should be used when rendering the row drag indicator icon

Parameters
- val: TemplateRef<any>
Returns void

dropAreaMessage

get dropAreaMessage(): string
set dropAreaMessage(value: string): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:367
Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.
@remarks

The grid needs to have at least one groupable column in order the GroupBy area to be displayed.
@example
<igx-grid dropAreaMessage="Drop here to group!"> <igx-column [groupable]="true" field="ID"></igx-column> </igx-grid>
Returns string
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:362
Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.
@remarks

The grid needs to have at least one groupable column in order the GroupBy area to be displayed.
@example
<igx-grid dropAreaMessage="Drop here to group!"> <igx-column [groupable]="true" field="ID"></igx-column> </igx-grid>
Parameters
- value: string
Returns void

dropAreaVisible

get dropAreaVisible(): boolean

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:727
Gets if the grid's group by drop area is visible.
@example
const dropVisible = this.grid.dropAreaVisible;
Returns boolean

emptyFilteredGridMessage

get emptyFilteredGridMessage(): string
set emptyFilteredGridMessage(value: string): void

Inherited from IgxGridComponent.emptyFilteredGridMessage
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:837
Gets/Sets the message displayed when there are no records and the grid is filtered.
@example
<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
Returns string
Inherited from IgxGridComponent.emptyFilteredGridMessage
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:833
Gets/Sets the message displayed when there are no records and the grid is filtered.
@example
<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
Parameters
- value: string
Returns void

emptyGridMessage

get emptyGridMessage(): string
set emptyGridMessage(value: string): void

Inherited from IgxGridComponent.emptyGridMessage
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:784
Get/Sets the message displayed when there are no records.
@example
<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
Returns string
Inherited from IgxGridComponent.emptyGridMessage
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:781
Get/Sets the message displayed when there are no records.
@example
<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
Parameters
- value: string
Returns void

expansionStates

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

Inherited from IgxGridComponent.expansionStates
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3258
Gets/Sets a list of key-value pairs [row ID, expansion state].
@remarks

Includes only states that differ from the default one. Supports two-way binding.
@example
<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates"> </igx-grid>
Returns Map<any, boolean>
Inherited from IgxGridComponent.expansionStates
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3262
Gets/Sets a list of key-value pairs [row ID, expansion state].
@remarks

Includes only states that differ from the default one. Supports two-way binding.
@example
<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates"> </igx-grid>
Parameters
- value: Map<any, boolean>
Returns void

exportCsv

get exportCsv(): boolean
set exportCsv(newValue: boolean): void

Inherited from IgxGridComponent.exportCsv
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2235
Gets/Sets whether the option for exporting to CSV is enabled or disabled.
```
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportCsv]="true"></igx-grid>
```
Returns boolean
Inherited from IgxGridComponent.exportCsv
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2238
Gets/Sets whether the option for exporting to CSV is enabled or disabled.
```
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportCsv]="true"></igx-grid>
```
Parameters
- newValue: boolean
Returns void

exportCsvText

get exportCsvText(): string
set exportCsvText(newValue: string): void

Inherited from IgxGridComponent.exportCsvText
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2298
Gets/Sets the textual content for the CSV export button.
@example
<igx-grid [exportCsvText]="'My Csv Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportExcel]="true"></igx-grid>
Returns string
Inherited from IgxGridComponent.exportCsvText
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2301
Gets/Sets the textual content for the CSV export button.
@example
<igx-grid [exportCsvText]="'My Csv Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportExcel]="true"></igx-grid>
Parameters
- newValue: string
Returns void

exportExcel

get exportExcel(): boolean
set exportExcel(newValue: boolean): void

Inherited from IgxGridComponent.exportExcel
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2214
Gets/Sets whether exporting to MS Excel is enabled or disabled.
@example
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportExcel]="true"></igx-grid>
Returns boolean
Inherited from IgxGridComponent.exportExcel
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2218
Gets/Sets whether exporting to MS Excel is enabled or disabled.
@example
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportExcel]="true"></igx-grid>
Parameters
- newValue: boolean
Returns void

exportExcelText

get exportExcelText(): string
set exportExcelText(newValue: string): void

Inherited from IgxGridComponent.exportExcelText
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2277
Gets/Sets the textual content for the MS Excel export button.
```
<igx-grid [exportExcelText]="'My Excel Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
```
Returns string
Inherited from IgxGridComponent.exportExcelText
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2280
Gets/Sets the textual content for the MS Excel export button.
```
<igx-grid [exportExcelText]="'My Excel Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
```
Parameters
- newValue: string
Returns void

exportText

get exportText(): string
set exportText(newValue: string): void

Inherited from IgxGridComponent.exportText
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2256
Gets/Sets the textual content for the main export button.
@example
<igx-grid [data]="localData" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
Returns string
Inherited from IgxGridComponent.exportText
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2260
Gets/Sets the textual content for the main export button.
@example
<igx-grid [data]="localData" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
Parameters
- newValue: string
Returns void

filterCellList

get filterCellList(): IgxGridFilteringCellComponent[]

Inherited from IgxGridComponent.filterCellList
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1538
A list of all IgxGridFilteringCellComponent.
@example
const filterCells = this.grid.filterCellList;
Returns IgxGridFilteringCellComponent[]

filterMode

get filterMode(): "quickFilter" | "excelStyleFilter"
set filterMode(value: FilterMode): void

Inherited from IgxGridComponent.filterMode
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:965
Gets/Sets the filter mode.
@example
<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
@remarks

By default it's set to FilterMode.quickFilter.
Returns "quickFilter" | "excelStyleFilter"
Inherited from IgxGridComponent.filterMode
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:969
Gets/Sets the filter mode.
@example
<igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
@remarks

By default it's set to FilterMode.quickFilter.
Parameters
- value: FilterMode
Returns void

filterStrategy

get filterStrategy(): IFilteringStrategy
set filterStrategy(classRef: IFilteringStrategy): void

Inherited from IgxGridComponent.filterStrategy
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1028
Gets/Sets the filtering strategy of the grid.
@example
<igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>
Returns IFilteringStrategy
Inherited from IgxGridComponent.filterStrategy
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1032
Gets/Sets the filtering strategy of the grid.
@example
<igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>
Parameters
- classRef: IFilteringStrategy
Returns void

filteredData

get filteredData(): any
set filteredData(value: any): void

Overrides IgxGridBaseDirective.filteredData
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:163
Gets/Sets an array of objects containing the filtered data.
@example
let filteredData = this.grid.filteredData; this.grid.filteredData = [...];
Returns any
Overrides IgxGridBaseDirective.filteredData
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:167
Gets/Sets an array of objects containing the filtered data.
@example
let filteredData = this.grid.filteredData; this.grid.filteredData = [...];
Parameters
- value: any
Returns void

filteredSortedData

get filteredSortedData(): any[]

Inherited from IgxGridComponent.filteredSortedData
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:6038
Returns an array containing the filtered sorted data.
@example
const filteredSortedData = this.grid1.filteredSortedData;
Returns any[]

filteringExpressionsTree

get filteringExpressionsTree(): IFilteringExpressionsTree
set filteringExpressionsTree(value: IFilteringExpressionsTree): void

Inherited from IgxGridComponent.filteringExpressionsTree
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:308
Gets/Sets the filtering state.
@example
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>
@remarks

Supports two-way binding.
Returns IFilteringExpressionsTree
Inherited from IgxGridComponent.filteringExpressionsTree
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:312
Gets/Sets the filtering state.
@example
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>
@remarks

Supports two-way binding.
Parameters
- value: IFilteringExpressionsTree
Returns void

filteringLogic

get filteringLogic(): FilteringLogic
set filteringLogic(value: FilteringLogic): void

Inherited from IgxGridComponent.filteringLogic
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:289
Gets/Sets the filtering logic of the IgxGridComponent.
@remarks

The default is AND.
@example
<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>
Returns FilteringLogic
Inherited from IgxGridComponent.filteringLogic
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:293
Gets/Sets the filtering logic of the IgxGridComponent.
@remarks

The default is AND.
@example
<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>
Parameters
- value: FilteringLogic
Returns void

groupAreaTemplate

get groupAreaTemplate(): TemplateRef<any>
set groupAreaTemplate(template: TemplateRef<any>): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:567
Gets/Sets the template reference of the IgxGridComponent's group area.
@example
const groupAreaTemplate = this.grid.groupAreaTemplate; this.grid.groupAreaTemplate = myAreaTemplate.
Returns TemplateRef<any>
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:571
Gets/Sets the template reference of the IgxGridComponent's group area.
@example
const groupAreaTemplate = this.grid.groupAreaTemplate; this.grid.groupAreaTemplate = myAreaTemplate.
Parameters
- template: TemplateRef<any>
Returns void

groupRowTemplate

get groupRowTemplate(): TemplateRef<any>
set groupRowTemplate(template: TemplateRef<any>): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:549
Gets/Sets the template reference for the group row.
@example
const groupRowTemplate = this.grid.groupRowTemplate; this.grid.groupRowTemplate = myRowTemplate;
Returns TemplateRef<any>
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:553
Gets/Sets the template reference for the group row.
@example
const groupRowTemplate = this.grid.groupRowTemplate; this.grid.groupRowTemplate = myRowTemplate;
Parameters
- template: TemplateRef<any>
Returns void

groupingExpansionState

get groupingExpansionState(): IGroupByExpandState[]
set groupingExpansionState(value: IGroupByExpandState[]): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:282
Gets/Sets a list of expansion states for group rows.
@remarks

Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed. Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array). Supports two-way data binding.
@example
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpansionState)]="model.groupingExpansionState"></igx-grid>
Returns IGroupByExpandState[]
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:286
Gets/Sets a list of expansion states for group rows.
@remarks

Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed. Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array). Supports two-way data binding.
@example
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpansionState)]="model.groupingExpansionState"></igx-grid>
Parameters
- value: IGroupByExpandState[]
Returns void

groupingExpressions

get groupingExpressions(): IGroupingExpression[]
set groupingExpressions(value: IGroupingExpression[]): void

Gets/Sets the group by state.

@example: let groupByState = this.grid.groupingExpressions; this.grid.groupingExpressions = [...];
@remarks: Supports two-way data binding.
@example: <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpressions)]="model.groupingExpressions"></igx-grid>

Returns IGroupingExpression[]

Gets/Sets the group by state.

@example: let groupByState = this.grid.groupingExpressions; this.grid.groupingExpressions = [...];
@remarks: Supports two-way data binding.
@example: <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpressions)]="model.groupingExpressions"></igx-grid>

Parameters

value: IGroupingExpression[]

Returns void

groupsRowList

get groupsRowList(): QueryList<any>

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:433
Gets the list of group rows.
@example
const groupList = this.grid.groupsRowList;
Returns QueryList<any>

hasColumnGroups

get hasColumnGroups(): boolean

Inherited from IgxGridComponent.hasColumnGroups
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4525
Returns if the IgxGridComponent has column groups.
@example
const groupGrid = this.grid.hasColumnGroups;
Returns boolean

hasColumnLayouts

get hasColumnLayouts(): boolean

Inherited from IgxGridComponent.hasColumnLayouts
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4535
Returns if the IgxGridComponent has column layouts for multi-row layout definition.
@example
const layoutGrid = this.grid.hasColumnLayouts;
Returns boolean

hasEditableColumns

get hasEditableColumns(): boolean

Inherited from IgxGridComponent.hasEditableColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4461
Returns if the IgxGridComponent has editable columns.
@example
const editableGrid = this.grid.hasEditableColumns;
Returns boolean

hasFilterableColumns

get hasFilterableColumns(): boolean

Inherited from IgxGridComponent.hasFilterableColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4472
Returns if the IgxGridComponent has fiterable columns.
@example
const filterableGrid = this.grid.hasFilterableColumns;
Returns boolean

hasGroupableColumns

get hasGroupableColumns(): boolean

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:699
Returns if the IgxGridComponent has groupable columns.
@example
const groupableGrid = this.grid.hasGroupableColumns;
Returns boolean

hasMovableColumns

get hasMovableColumns(): boolean

Inherited from IgxGridComponent.hasMovableColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4514
Returns if the IgxGridComponent has moveable columns.
@example
const movableGrid = this.grid.hasMovableColumns;
Returns boolean

hasSortableColumns

get hasSortableColumns(): boolean

Inherited from IgxGridComponent.hasSortableColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4450
Returns if the IgxGridComponent has sortable columns.
@example
const sortableGrid = this.grid.hasSortableColumns;
Returns boolean

hasSummarizedColumns

get hasSummarizedColumns(): boolean

Inherited from IgxGridComponent.hasSummarizedColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4483
Returns if the IgxGridComponent has summarized columns.
@example
const summarizedGrid = this.grid.hasSummarizedColumns;
Returns boolean

headerCellList

get headerCellList(): IgxGridHeaderComponent[]

Inherited from IgxGridComponent.headerCellList
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1527
A list of all IgxGridHeaderComponent.
@example
const headers = this.grid.headerCellList;
Returns IgxGridHeaderComponent[]

headerGroupsList

get headerGroupsList(): IgxGridHeaderGroupComponent[]

Inherited from IgxGridComponent.headerGroupsList
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1516
A list of all IgxGridHeaderGroupComponent.
@example
const headerGroupsList = this.grid.headerGroupsList;
Returns IgxGridHeaderGroupComponent[]

headerWidth

get headerWidth(): number

Inherited from IgxGridComponent.headerWidth
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:703
Gets the width of the header.
@example
let gridHeaderWidth = this.grid.headerWidth;
Returns number

height

get height(): string
set height(value: string): void

Inherited from IgxGridComponent.height
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:655
Gets/Sets the height.
@example
<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Returns string
Inherited from IgxGridComponent.height
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:659
Gets/Sets the height.
@example
<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Parameters
- value: string
Returns void

hiddenColumnsCount

get hiddenColumnsCount(): number

Inherited from IgxGridComponent.hiddenColumnsCount
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2077
Gets the number of hidden columns.
@example
const hiddenCol = this.grid.hiddenColumnsCount; ``
Returns number

hiddenColumnsText

get hiddenColumnsText(): string
set hiddenColumnsText(value: string): void

Inherited from IgxGridComponent.hiddenColumnsText
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2092
Gets/Sets the text to be displayed inside the toggle button.
@remarks

Used for the built-in column hiding UI of theIgxColumnComponent.
@example
<igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>
Returns string
Inherited from IgxGridComponent.hiddenColumnsText
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2096
Gets/Sets the text to be displayed inside the toggle button.
@remarks

Used for the built-in column hiding UI of theIgxColumnComponent.
@example
<igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>
Parameters
- value: string
Returns void

hideGroupedColumns

get hideGroupedColumns(): boolean
set hideGroupedColumns(value: boolean): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:333
Gets/Sets whether the grouped columns should be hidden.
@remarks

The default value is "false"
@example
<igx-grid #grid [data]="localData" [hideGroupedColumns]="true" [autoGenerate]="true"></igx-grid>
Returns boolean
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:337
Gets/Sets whether the grouped columns should be hidden.
@remarks

The default value is "false"
@example
<igx-grid #grid [data]="localData" [hideGroupedColumns]="true" [autoGenerate]="true"></igx-grid>
Parameters
- value: boolean
Returns void

hideRowSelectors

get hideRowSelectors(): boolean
set hideRowSelectors(value: boolean): void

Inherited from IgxGridComponent.hideRowSelectors
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:574
Gets/Sets if the row selectors are hidden.

@remarks

By default row selectors are shown

Returns boolean
Inherited from IgxGridComponent.hideRowSelectors
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:578
Gets/Sets if the row selectors are hidden.

@remarks

By default row selectors are shown

Parameters
- value: boolean
Returns void

id

get id(): string
set id(value: string): void

Overrides IgxGridBaseDirective.id
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:127
Gets/Sets the value of the id attribute.
@remarks

If not provided it will be automatically generated.
@example
<igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid>
Returns string
Overrides IgxGridBaseDirective.id
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:130
Gets/Sets the value of the id attribute.
@remarks

If not provided it will be automatically generated.
@example
<igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid>
Parameters
- value: string
Returns void

isFirstPage

get isFirstPage(): boolean

Inherited from IgxGridComponent.isFirstPage
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3684
Gets if the current page is the first page.
@example
const firstPage = this.grid.isFirstPage;
Returns boolean

isLastPage

get isLastPage(): boolean

Inherited from IgxGridComponent.isLastPage
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3743
Returns if the current page is the last page.
@example
const lastPage = this.grid.isLastPage;
Returns boolean

isLoading

get isLoading(): boolean
set isLoading(value: boolean): void

Inherited from IgxGridComponent.isLoading
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:808
Gets/Sets whether the grid is going to show a loading indicator.
@example
<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
Returns boolean
Inherited from IgxGridComponent.isLoading
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:797
Gets/Sets whether the grid is going to show a loading indicator.
@example
<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
Parameters
- value: boolean
Returns void

locale

get locale(): string
set locale(value: string): void

Inherited from IgxGridComponent.locale
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:409
Gets/Sets the locale.

@remarks

If not set, returns browser's language.

Returns string
Inherited from IgxGridComponent.locale
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:417
Gets/Sets the locale.

@remarks

If not set, returns browser's language.

Parameters
- value: string
Returns void

nativeElement

get nativeElement(): any

Inherited from IgxGridComponent.nativeElement
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3355
Gets the native element.
@example
const nativeEl = this.grid.nativeElement.
Returns any

outlet

get outlet(): IgxOverlayOutletDirective
set outlet(val: IgxOverlayOutletDirective): void

Inherited from IgxGridComponent.outlet
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3365
Gets/Sets the outlet used to attach the grid's overlays to.

@remark

If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive.

Returns IgxOverlayOutletDirective
Inherited from IgxGridComponent.outlet
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3369
Gets/Sets the outlet used to attach the grid's overlays to.

@remark

If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive.

Parameters
- val: IgxOverlayOutletDirective
Returns void

page

get page(): number
set page(val: number): void

Inherited from IgxGridComponent.page
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:462
Gets/Sets the current page index.
@example
<igx-grid #grid [data]="Data" [paging]="true" [(page)]="model.page" [autoGenerate]="true"></igx-grid>
@remarks

Supports two-way binding.
Returns number
Inherited from IgxGridComponent.page
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:466
Gets/Sets the current page index.
@example
<igx-grid #grid [data]="Data" [paging]="true" [(page)]="model.page" [autoGenerate]="true"></igx-grid>
@remarks

Supports two-way binding.
Parameters
- val: number
Returns void

paging

get paging(): boolean
set paging(value: boolean): void

Inherited from IgxGridComponent.paging
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:442
Gets/Sets whether the paging feature is enabled.
@remarks

The default state is disabled (false).
@example
<igx-grid #grid [data]="Data" [autoGenerate]="true" [paging]="true"></igx-grid>
Returns boolean
Inherited from IgxGridComponent.paging
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:446
Gets/Sets whether the paging feature is enabled.
@remarks

The default state is disabled (false).
@example
<igx-grid #grid [data]="Data" [autoGenerate]="true" [paging]="true"></igx-grid>
Parameters
- value: boolean
Returns void

pagingMode

get pagingMode(): GridPagingMode
set pagingMode(val: GridPagingMode): void

Inherited from IgxGridComponent.pagingMode
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:422
Returns GridPagingMode
Inherited from IgxGridComponent.pagingMode
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:426
Parameters
- val: GridPagingMode
Returns void

perPage

get perPage(): number
set perPage(val: number): void

Inherited from IgxGridComponent.perPage
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:503
Gets/Sets the number of visible items per page.
@remarks

The default is 15.
@example
<igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>
Returns number
Inherited from IgxGridComponent.perPage
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:507
Gets/Sets the number of visible items per page.
@remarks

The default is 15.
@example
<igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>
Parameters
- val: number
Returns void

pinnedColumns

get pinnedColumns(): IgxColumnComponent[]

Inherited from IgxGridComponent.pinnedColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3518
Gets an array of the pinned IgxColumnComponents.
@example
const pinnedColumns = this.grid.pinnedColumns.
Returns IgxColumnComponent[]

pinnedColumnsText

get pinnedColumnsText(): string
set pinnedColumnsText(value: string): void

Inherited from IgxGridComponent.pinnedColumnsText
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2112
Gets/Sets the text to be displayed inside the toggle button.
@remarks

Used for the built-in column pinning UI of theIgxColumnComponent.
@example
<igx-grid [pinnedColumnsText]="'PinnedCols Text" [data]="data" [width]="'100%'" [height]="'500px'"></igx-grid>
Returns string
Inherited from IgxGridComponent.pinnedColumnsText
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2115
Gets/Sets the text to be displayed inside the toggle button.
@remarks

Used for the built-in column pinning UI of theIgxColumnComponent.
@example
<igx-grid [pinnedColumnsText]="'PinnedCols Text" [data]="data" [width]="'100%'" [height]="'500px'"></igx-grid>
Parameters
- value: string
Returns void

pinnedDataView

get pinnedDataView(): any[]

Inherited from IgxGridComponent.pinnedDataView
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5277
Returns the currently transformed paged/filtered/sorted/grouped pinned row data, displayed in the grid.
@example
const pinnedDataView = this.grid.pinnedDataView;
Returns any[]

pinnedRowHeight

get pinnedRowHeight(): any

Inherited from IgxGridComponent.pinnedRowHeight
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4327
Returns any

pinnedRows

get pinnedRows(): IgxGridRowComponent[]

Inherited from IgxGridComponent.pinnedRows
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3533
Gets an array of the pinned IgxRowComponents.
@example
const pinnedRow = this.grid.pinnedRows;
Returns IgxGridRowComponent[]

pinnedWidth

get pinnedWidth(): number

Inherited from IgxGridComponent.pinnedWidth
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3448
Gets the current width of the container for the pinned IgxColumnComponents.
@example
const pinnedWidth = this.grid.getPinnedWidth;
Returns number

pinning

get pinning(): IPinningConfig
set pinning(value: IPinningConfig): void

Inherited from IgxGridComponent.pinning
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:862
Gets/Sets the initial pinning configuration.
@remarks

Allows to apply pinning the columns to the start or the end. Note that pinning to both sides at a time is not allowed.
@example
<igx-grid [pinning]="pinningConfig"></igx-grid>
Returns IPinningConfig
Inherited from IgxGridComponent.pinning
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:865
Gets/Sets the initial pinning configuration.
@remarks

Allows to apply pinning the columns to the start or the end. Note that pinning to both sides at a time is not allowed.
@example
<igx-grid [pinning]="pinningConfig"></igx-grid>
Parameters
- value: IPinningConfig
Returns void

resourceStrings

get resourceStrings(): IGridResourceStrings
set resourceStrings(value: IGridResourceStrings): void

Inherited from IgxGridComponent.resourceStrings
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:237
Gets/Sets the resource strings.

@remarks

By default it uses EN resources.

Returns IGridResourceStrings
Inherited from IgxGridComponent.resourceStrings
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:233
Gets/Sets the resource strings.

@remarks

By default it uses EN resources.

Parameters
- value: IGridResourceStrings
Returns void

rowDraggable

get rowDraggable(): boolean
set rowDraggable(val: boolean): void

Inherited from IgxGridComponent.rowDraggable
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:591
Gets/Sets whether rows can be moved.
@example
<igx-grid #grid [rowDraggable]="true"></igx-grid>
Returns boolean
Inherited from IgxGridComponent.rowDraggable
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:596
Gets/Sets whether rows can be moved.
@example
<igx-grid #grid [rowDraggable]="true"></igx-grid>
Parameters
- val: boolean
Returns void

rowEditable

get rowEditable(): boolean
set rowEditable(val: boolean): void

Inherited from IgxGridComponent.rowEditable
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:626
Gets/Sets whether the rows are editable.
@remarks

By default it is set to false.
@example
<igx-grid #grid [showToolbar]="true" [rowEditable]="true" [primaryKey]="'ProductID'" [columnHiding]="true"></igx-grid>
Returns boolean
Inherited from IgxGridComponent.rowEditable
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:630
Gets/Sets whether the rows are editable.
@remarks

By default it is set to false.
@example
<igx-grid #grid [showToolbar]="true" [rowEditable]="true" [primaryKey]="'ProductID'" [columnHiding]="true"></igx-grid>
Parameters
- val: boolean
Returns void

rowHeight

get rowHeight(): any
set rowHeight(value: any): void

Inherited from IgxGridComponent.rowHeight
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:736
Gets/Sets the row height.
@example
<igx-grid #grid [data]="localData" [showToolbar]="true" [rowHeight]="100" [autoGenerate]="true"></igx-grid>
Returns any
Inherited from IgxGridComponent.rowHeight
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:740
Gets/Sets the row height.
@example
<igx-grid #grid [data]="localData" [showToolbar]="true" [rowHeight]="100" [autoGenerate]="true"></igx-grid>
Parameters
- value: any
Returns void

rowList

get rowList(): QueryList<any>

Inherited from IgxGridComponent.rowList
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1573
A list of IgxGridRowComponent.
@example
const rowList = this.grid.rowList;
Returns QueryList<any>

rowSelection

get rowSelection(): "none" | "single" | "multiple"
set rowSelection(selectionMode: GridSelectionMode): void

Inherited from IgxGridComponent.rowSelection
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2361
Gets/Sets row selection mode

@remarks

By default the row selection mode is none

Returns "none" | "single" | "multiple"
Inherited from IgxGridComponent.rowSelection
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2365
Gets/Sets row selection mode

@remarks

By default the row selection mode is none

Parameters
- selectionMode: GridSelectionMode
Returns void

selectedCells

get selectedCells(): IgxGridCellComponent[] | any[]

Inherited from IgxGridComponent.selectedCells
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4546
Returns an array of the selected IgxGridCellComponents.
@example
const selectedCells = this.grid.selectedCells;
Returns IgxGridCellComponent[] | any[]

showGroupArea

get showGroupArea(): boolean
set showGroupArea(value: boolean): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:704
Returns boolean
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:707
Parameters
- value: boolean
Returns void

showToolbar

get showToolbar(): boolean
set showToolbar(newValue: boolean): void

Inherited from IgxGridComponent.showToolbar
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2171
Gets/Sets whether the toolbar is shown.
@example
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" ></igx-grid>
Returns boolean
Inherited from IgxGridComponent.showToolbar
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2174
Gets/Sets whether the toolbar is shown.
@example
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" ></igx-grid>
Parameters
- newValue: boolean
Returns void

sortStrategy

get sortStrategy(): IGridSortingStrategy
set sortStrategy(value: IGridSortingStrategy): void

Inherited from IgxGridComponent.sortStrategy
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1044
Gets/Sets the sorting strategy of the grid.
@example
<igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>
Returns IGridSortingStrategy
Inherited from IgxGridComponent.sortStrategy
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1048
Gets/Sets the sorting strategy of the grid.
@example
<igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>
Parameters
- value: IGridSortingStrategy
Returns void

sortingExpressions

get sortingExpressions(): ISortingExpression[]
set sortingExpressions(value: ISortingExpression[]): void

Inherited from IgxGridComponent.sortingExpressions
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2036
Gets/Sets the sorting state.
@remarks

Supports two-way data binding.
@example
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
Returns ISortingExpression[]
Inherited from IgxGridComponent.sortingExpressions
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2040
Gets/Sets the sorting state.
@remarks

Supports two-way data binding.
@example
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
Parameters
- value: ISortingExpression[]
Returns void

summaryCalculationMode

get summaryCalculationMode(): "rootLevelOnly" | "childLevelsOnly" | "rootAndChildLevels"
set summaryCalculationMode(value: GridSummaryCalculationMode): void

Inherited from IgxGridComponent.summaryCalculationMode
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1007
Gets/Sets the summary calculation mode.
@example
<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
@remarks

By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level.
Returns "rootLevelOnly" | "childLevelsOnly" | "rootAndChildLevels"
Inherited from IgxGridComponent.summaryCalculationMode
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1011
Gets/Sets the summary calculation mode.
@example
<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
@remarks

By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level.
Parameters
- value: GridSummaryCalculationMode
Returns void

summaryPosition

get summaryPosition(): "top" | "bottom"
set summaryPosition(value: GridSummaryPosition): void

Inherited from IgxGridComponent.summaryPosition
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:988
Gets/Sets the summary position.
@example
<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>
@remarks

By default it is bottom.
Returns "top" | "bottom"
Inherited from IgxGridComponent.summaryPosition
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:992
Gets/Sets the summary position.
@example
<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>
@remarks

By default it is bottom.
Parameters
- value: GridSummaryPosition
Returns void

toolbarCustomContentTemplate

get toolbarCustomContentTemplate(): IgxGridToolbarCustomContentDirective

Inherited from IgxGridComponent.toolbarCustomContentTemplate
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:1652
Returns the template which will be used by the toolbar to show custom content.
@example
let customContentTemplate = this.grid.toolbarCustomContentTemplate;
Returns IgxGridToolbarCustomContentDirective

toolbarTitle

get toolbarTitle(): string
set toolbarTitle(newValue: string): void

Inherited from IgxGridComponent.toolbarTitle
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2192
Gets/Sets the toolbar's title.
@example
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [toolbarTitle]="'My Grid'"></igx-grid>
Returns string
Inherited from IgxGridComponent.toolbarTitle
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2196
Gets/Sets the toolbar's title.
@example
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [toolbarTitle]="'My Grid'"></igx-grid>
Parameters
- newValue: string
Returns void

totalHeight

get totalHeight(): any

Inherited from IgxGridComponent.totalHeight
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4332
Returns any

totalItemCount

get totalItemCount(): number
set totalItemCount(count: number): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:186
Gets/Sets the total number of records in the data source.
@remarks

This property is required for remote grid virtualization to function when it is bound to remote data.
@example
const itemCount = this.grid1.totalItemCount; this.grid1.totalItemCount = 55;
Returns number
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:181
Gets/Sets the total number of records in the data source.
@remarks

This property is required for remote grid virtualization to function when it is bound to remote data.
@example
const itemCount = this.grid1.totalItemCount; this.grid1.totalItemCount = 55;
Parameters
- count: number
Returns void

totalPages

get totalPages(): number

Inherited from IgxGridComponent.totalPages
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3670
Gets the total number of pages.
@example
const totalPages = this.grid.totalPages;
Returns number

totalRecords

get totalRecords(): number
set totalRecords(total: number): void

Inherited from IgxGridComponent.totalRecords
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3724
Returns the total number of records.
@remarks

Only functions when paging is enabled.
@example
const totalRecords = this.grid.totalRecords;
Returns number
Inherited from IgxGridComponent.totalRecords
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3728
Returns the total number of records.
@remarks

Only functions when paging is enabled.
@example
const totalRecords = this.grid.totalRecords;
Parameters
- total: number
Returns void

totalWidth

get totalWidth(): number

Inherited from IgxGridComponent.totalWidth
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3754
Returns the total width of the IgxGridComponent.
@example
const gridWidth = this.grid.totalWidth;
Returns number

transactions

get transactions(): TransactionService<Transaction, State>

Inherited from IgxGridComponent.transactions
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2122
Get transactions service for the grid.

Returns TransactionService<Transaction, State>

unpinnedColumns

get unpinnedColumns(): IgxColumnComponent[]

Inherited from IgxGridComponent.unpinnedColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3546
Gets an array of unpinned IgxColumnComponents.
@example
const unpinnedColumns = this.grid.unpinnedColumns.
Returns IgxColumnComponent[]

unpinnedDataView

get unpinnedDataView(): any[]

Inherited from IgxGridComponent.unpinnedDataView
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5288
Returns currently transformed paged/filtered/sorted/grouped unpinned row data, displayed in the grid.
@example
const pinnedDataView = this.grid.pinnedDataView;
Returns any[]

unpinnedWidth

get unpinnedWidth(): number

Inherited from IgxGridComponent.unpinnedWidth
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3461
Gets the current width of the container for the unpinned IgxColumnComponents.
@example
const unpinnedWidth = this.grid.getUnpinnedWidth;
Returns number

visibleColumns

get visibleColumns(): IgxColumnComponent[]

Inherited from IgxGridComponent.visibleColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3619
Returns an array of visible IgxColumnComponents.
@example
const visibleColumns = this.grid.visibleColumns.
Returns IgxColumnComponent[]

width

get width(): string
set width(value: string): void

Inherited from IgxGridComponent.width
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:684
Gets/Sets the width of the grid.
@example
let gridWidth = this.grid.width;
Returns string
Inherited from IgxGridComponent.width
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:688
Gets/Sets the width of the grid.
@example
let gridWidth = this.grid.width;
Parameters
- value: string
Returns void

Methods

_setupListeners

_setupListeners(): void

Inherited from IgxGridComponent._setupListeners
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2853
Returns void

_setupServices

_setupServices(): void

Inherited from IgxGridComponent._setupServices
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2844
Returns void

addRow

addRow(data: any): void

Inherited from IgxGridComponent.addRow
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3963
Creates a new IgxGridRowComponent and adds the data record to the end of the data source.
@example
this.grid1.addRow(record);
Parameters
- data: any
Returns void

clearFilter

clearFilter(name?: string): void

Inherited from IgxGridComponent.clearFilter
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4195
If name is provided, clears the filtering state of the corresponding IgxColumnComponent.
@remarks

Otherwise clears the filtering state of all IgxColumnComponents.
@example
this.grid.clearFilter();
Parameters
- Optional name: string
Returns void

clearGrouping

clearGrouping(name?: string | Array<string>): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:617
Clears grouping for particular column, array of columns or all columns.
@remarks

Clears all grouping in the grid, if no parameter is passed. If a parameter is provided, clears grouping for a particular column or an array of columns.
@example
this.grid.clearGrouping(); //clears all grouping this.grid.clearGrouping("ID"); //ungroups a single column this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns
Parameters
- Optional name: string | Array<string>
  
  Name of column or array of column names to be ungrouped.
Returns void

clearSearch

clearSearch(): void

Inherited from IgxGridComponent.clearSearch
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4425
Removes all the highlights in the cell.
@example
this.grid.clearSearch();
Returns void

clearSort

clearSort(name?: string): void

Implementation of GridType.clearSort

Inherited from IgxGridComponent.clearSort
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4209
If name is provided, clears the sorting state of the corresponding IgxColumnComponent.
@remarks

otherwise clears the sorting state of all IgxColumnComponent.
@example
this.grid.clearSort();
Parameters
- Optional name: string
Returns void

closeAdvancedFilteringDialog

closeAdvancedFilteringDialog(applyChanges: boolean): void

Inherited from IgxGridComponent.closeAdvancedFilteringDialog
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:6542
Closes the advanced filtering dialog.

Parameters
- applyChanges: boolean
  
  indicates whether the changes should be applied
Returns void

collapseAll

collapseAll(): void

Inherited from IgxGridComponent.collapseAll
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3290
Collapses all rows.
@example
this.grid.collapseAll();
Returns void

collapseRow

collapseRow(rowID: any): void

Inherited from IgxGridComponent.collapseRow
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3319
Collapses the row by its id.
@remarks

ID is either the primaryKey value or the data record instance.
@example
this.grid.collapseRow(rowID);
Parameters
- rowID: any
  
  The row id - primaryKey value or the data record instance.
Returns void

deleteRow

deleteRow(rowSelector: any): void

Inherited from IgxGridComponent.deleteRow
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3984
Removes the IgxGridRowComponent and the corresponding data record by primary key.
@remarks

Requires that the primaryKey property is set. The method accept rowSelector as a parameter, which is the rowID.
@example
this.grid1.deleteRow(0);
Parameters
- rowSelector: any
Returns void

deselectAllColumns

deselectAllColumns(): void

Inherited from IgxGridComponent.deselectAllColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5626
Deselects all columns
@example
this.grid.deselectAllColumns();
Returns void

deselectAllRows

deselectAllRows(onlyFilterData?: boolean): void

Inherited from IgxGridComponent.deselectAllRows
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5373
Deselects all rows
@remarks

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.
@example
this.grid.deselectAllRows();
Parameters
- Default value onlyFilterData: boolean = true
Returns void

deselectColumns

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

Inherited from IgxGridComponent.deselectColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5601
Deselect specified columns by filed.
@example
this.grid.deselectColumns(['ID','Name']);
Parameters
- columns: string[] | IgxColumnComponent[]
Returns void

deselectRows

deselectRows(rowIDs: any[]): void

Inherited from IgxGridComponent.deselectRows
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5339
Deselect specified rows by ID.
@example
this.grid.deselectRows([1,2,5]);
Parameters
- rowIDs: any[]
Returns void

disableSummaries

disableSummaries(...rest: any[]): void

Inherited from IgxGridComponent.disableSummaries
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4177
Disable summaries for the specified column.
@example
grid.disableSummaries('ProductName');
@remarks

Disable summaries for the listed columns.
@example
grid.disableSummaries([{ fieldName: 'ProductName' }]);
Parameters
- Rest ...rest: any[]
Returns void

enableSummaries

enableSummaries(...rest: any[]): void

Inherited from IgxGridComponent.enableSummaries
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4156
Enables summaries for the specified column and applies your customSummary.
@remarks

If you do not provide the customSummary, then the default summary for the column data type will be applied.
@example
grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);

Enable summaries for the listed columns.
@example
grid.enableSummaries('ProductName');
Parameters
- Rest ...rest: any[]
Returns void

endEdit

endEdit(commit?: boolean, event?: Event): void

Implementation of GridType.endEdit

Inherited from IgxGridComponent.endEdit
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:6359
Finishes the row transactions on the current row.
@remarks

If commit === true, passes them from the pending state to the data (or transaction service)
@example
<button igxButton (click)="grid.endEdit(true)">Commit Row</button>
Parameters
- Default value commit: boolean = true
- Optional event: Event
Returns void

expandAll

expandAll(): void

Inherited from IgxGridComponent.expandAll
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3278
Expands all rows.
@example
this.grid.expandAll();
Returns void

expandRow

expandRow(rowID: any): void

Inherited from IgxGridComponent.expandRow
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3305
Expands the row by its id.
@remarks

ID is either the primaryKey value or the data record instance.
@example
this.grid.expandRow(rowID);
Parameters
- rowID: any
  
  The row id - primaryKey value or the data record instance.
Returns void

filter

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

Inherited from IgxGridComponent.filter
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4122
Filters a single IgxColumnComponent.
@example
public filter(term) { this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains")); }
Parameters
- name: string
- value: any
- Optional conditionOrExpressionTree: IFilteringOperation | IFilteringExpressionsTree
- Optional ignoreCase: boolean
Returns void

filterGlobal

filterGlobal(value: any, condition: any, ignoreCase?: any): void

Inherited from IgxGridComponent.filterGlobal
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4137
Filters all the IgxColumnComponent in the IgxGridComponent with the same condition.
@example
grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));
Parameters
- value: any
- condition: any
- Optional ignoreCase: any
Returns void

findNext

findNext(text: string, caseSensitive?: boolean, exactMatch?: boolean): number

Inherited from IgxGridComponent.findNext
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4361
Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
@remarks

Returns how many times the grid contains the string.
@example
this.grid.findNext("financial");
Parameters
- text: string
  
  the string to search.
- Optional caseSensitive: boolean
  
  optionally, if the search should be case sensitive (defaults to false).
- Optional exactMatch: boolean
  
  optionally, if the text should match the entire value (defaults to false).
Returns number

findPrev

findPrev(text: string, caseSensitive?: boolean, exactMatch?: boolean): number

Inherited from IgxGridComponent.findPrev
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4377
Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
@remarks

Returns how many times the grid contains the string.
@example
this.grid.findPrev("financial");
Parameters
- text: string
  
  the string to search.
- Optional caseSensitive: boolean
  
  optionally, if the search should be case sensitive (defaults to false).
- Optional exactMatch: boolean
  
  optionally, if the text should match the entire value (defaults to false).
Returns number

fullyExpandGroup

fullyExpandGroup(groupRow: IGroupByRecord): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:666
Expands the specified group and all of its parent groups.
@example
public groupRow: IGroupByRecord; this.grid.fullyExpandGroup(this.groupRow);
Parameters
- groupRow: IGroupByRecord
  
  The group record to fully expand.
Returns void

getCellByColumn

getCellByColumn(rowIndex: number, columnField: string): IgxGridCellComponent

Inherited from IgxGridComponent.getCellByColumn
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3636
Returns the IgxGridCellComponent that matches the conditions.
@example
const myCell = this.grid1.getCellByColumn(2,"UnitPrice");
Parameters
- rowIndex: number
- columnField: string
Returns IgxGridCellComponent

getCellByColumnVisibleIndex

getCellByColumnVisibleIndex(rowIndex: number, index: number): IgxGridCellComponent

Inherited from IgxGridComponent.getCellByColumnVisibleIndex
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3643
Parameters
- rowIndex: number
- index: number
Returns IgxGridCellComponent

getCellByKey

getCellByKey(rowSelector: any, columnField: string): IgxGridCellComponent

Inherited from IgxGridComponent.getCellByKey
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3659
Returns an IgxGridCellComponent object by the specified primary key and column field.
@remarks

Requires that the primaryKey property is set.
@example
grid.getCellByKey(1, 'index');
Parameters
- rowSelector: any
  
  match any rowID
- columnField: string
Returns IgxGridCellComponent

getColumnByName

getColumnByName(name: string): IgxColumnComponent

Implementation of GridType.getColumnByName

Inherited from IgxGridComponent.getColumnByName
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3578
Returns the IgxColumnComponent by field name.
@example
const myCol = this.grid1.getColumnByName("ID");
Parameters
- name: string
Returns IgxColumnComponent

getColumnByVisibleIndex

getColumnByVisibleIndex(index: number): IgxColumnComponent

Inherited from IgxGridComponent.getColumnByVisibleIndex
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3582
Parameters
- index: number
Returns IgxColumnComponent

getHeaderGroupWidth

getHeaderGroupWidth(column: IgxColumnComponent): string

Inherited from IgxGridComponent.getHeaderGroupWidth
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3557
Gets the width to be set on IgxGridHeaderGroupComponent.

Parameters
- column: IgxColumnComponent
Returns string

getNextCell

getNextCell(currRowIndex: number, curVisibleColIndex: number, callback?: function): ICellPosition

Inherited from IgxGridComponent.getNextCell
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5794
Returns ICellPosition which defines the next cell, according to the current position, that match specific criteria.
@remarks

You can pass callback function as a third parameter of getPreviousCell method. The callback function accepts IgxColumnComponent as a param
@example
const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);
Parameters
- currRowIndex: number
- curVisibleColIndex: number
- Default value callback: function = null
  - - (IgxColumnComponent: any): boolean
    - Parameters
      - IgxColumnComponent: any
      Returns boolean
Returns ICellPosition

getPinnedWidth

getPinnedWidth(takeHidden?: boolean): number

Inherited from IgxGridComponent.getPinnedWidth
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5064
Gets calculated width of the pinned area.
@example
const pinnedWidth = this.grid.getPinnedWidth();
Parameters
- Default value takeHidden: boolean = false
  
  If we should take into account the hidden columns in the pinned area.
Returns number

getPreviousCell

getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback?: function): ICellPosition

Inherited from IgxGridComponent.getPreviousCell
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5827
Returns ICellPosition which defines the previous cell, according to the current position, that match specific criteria.
@remarks

You can pass callback function as a third parameter of getPreviousCell method. The callback function accepts IgxColumnComponent as a param
@example
const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);
Parameters
- currRowIndex: number
- curVisibleColIndex: number
- Default value callback: function = null
  - - (IgxColumnComponent: any): boolean
    - Parameters
      - IgxColumnComponent: any
      Returns boolean
Returns ICellPosition

getRowByIndex

getRowByIndex(index: number): IgxRowDirective<IgxGridBaseDirective & GridType>

Inherited from IgxGridComponent.getRowByIndex
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3594
Returns the IgxRowDirective by index.
@example
const myRow = this.grid1.getRowByIndex(1);
Parameters
- index: number
Returns IgxRowDirective<IgxGridBaseDirective & GridType>

getRowByKey

getRowByKey(keyValue: any): IgxRowDirective<IgxGridBaseDirective & GridType>

Inherited from IgxGridComponent.getRowByKey
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3608
Returns IgxGridRowComponent object by the specified primary key .
@remarks

Requires that the primaryKey property is set.
@example
const myRow = this.grid1.getRowByKey("cell5");
Parameters
- keyValue: any
Returns IgxRowDirective<IgxGridBaseDirective & GridType>

getSelectedColumnsData

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

Inherited from IgxGridComponent.getSelectedColumnsData
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5672
Returns an array of the current columns selection in the form of [{ column.field: cell.value }, ...].

@remarks

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.

Parameters
- Default value formatters: boolean = false
- Default value headers: boolean = false
Returns any[]

getSelectedData

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

Overrides IgxGridBaseDirective.getSelectedData
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:1044
@inheritdoc

Parameters
- Default value formatters: boolean = false
- Default value headers: boolean = false
Returns any[]

groupBy

groupBy(expression: IGroupingExpression | Array<IGroupingExpression>): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:591
Groups by a new IgxColumnComponent based on the provided expression, or modifies an existing one.
@remarks

Also allows for multiple columns to be grouped at once if an array of ISortingExpression is passed. The onGroupingDone event would get raised only once if this method gets called multiple times with the same arguments.
@example
this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false }); this.grid.groupBy([ { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false }, { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true }, { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false } ]);
Parameters
- expression: IGroupingExpression | Array<IGroupingExpression>
Returns void

isExpandedGroup

isExpandedGroup(group: IGroupByRecord): boolean

Overrides IgxGridBaseDirective.isExpandedGroup
- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:638
Returns if a group is expanded or not.
@example
public groupRow: IGroupByRecord; const expandedGroup = this.grid.isExpandedGroup(this.groupRow);
Parameters
- group: IGroupByRecord
  
  The group record.
Returns boolean

isRecordPinnedByIndex

isRecordPinnedByIndex(rowIndex: number): boolean

Inherited from IgxGridComponent.isRecordPinnedByIndex
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:2783
Returns whether the record is pinned or not.

Parameters
- rowIndex: number
  
  Index of the record in the filteredSortedData collection.
Returns boolean

markForCheck

markForCheck(): void

Inherited from IgxGridComponent.markForCheck
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3951
Manually marks the IgxGridComponent for change detection.
@example
this.grid1.markForCheck();
Returns void

moveColumn

moveColumn(column: IgxColumnComponent, dropTarget: IgxColumnComponent, pos?: DropPosition): void

Inherited from IgxGridComponent.moveColumn
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3846
Moves a column to the specified drop target.
@example
grid.moveColumn(compName, persDetails);
Parameters
- column: IgxColumnComponent
- dropTarget: IgxColumnComponent
- Default value pos: DropPosition = DropPosition.None
Returns void

navigateTo

navigateTo(rowIndex: number, visibleColIndex?: number, cb?: Function): void

Inherited from IgxGridComponent.navigateTo
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5748
Navigates to a position in the grid based on provided rowindex and visibleColumnIndex.
@remarks

Also can execute a custom logic over the target element, through a callback function that accepts { targetType: GridKeydownTargetType, target: Object }
@example
this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });
Parameters
- rowIndex: number
- Default value visibleColIndex: number = -1
- Default value cb: Function = null
Returns void

nextPage(): void

Inherited from IgxGridComponent.nextPage
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3695
Goes to the next page, if the grid is not already at the last page.
@example
this.grid1.nextPage();
Returns void

openAdvancedFilteringDialog

openAdvancedFilteringDialog(): void

Inherited from IgxGridComponent.openAdvancedFilteringDialog
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:6521
Opens the advanced filtering dialog.

Returns void

paginate

paginate(val: number): void

Inherited from IgxGridComponent.paginate
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3936
Goes to the desired page index.
@example
this.grid1.paginate(1);
Parameters
- val: number
Returns void

pinColumn

pinColumn(columnName: string | IgxColumnComponent, index?: any): boolean

Inherited from IgxGridComponent.pinColumn
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4242
Pins a column by field name.
@remarks

Returns whether the operation is successful.
@example
this.grid.pinColumn("ID");
Parameters
- columnName: string | IgxColumnComponent
- Optional index: any
Returns boolean

pinRow

pinRow(rowID: any, index?: number): boolean

Inherited from IgxGridComponent.pinRow
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4272
Pin the row by its id.
@remarks

ID is either the primaryKey value or the data record instance.
@example
this.grid.pinRow(rowID);
Parameters
- rowID: any
  
  The row id - primaryKey value or the data record instance.
- Optional index: number
  
  The index at which to insert the row in the pinned collection.
Returns boolean

preventHeaderScroll

preventHeaderScroll(args: any): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:622
Parameters
- args: any
Returns void

previousPage(): void

Inherited from IgxGridComponent.previousPage
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3708
Goes to the previous page, if the grid is not already at the first page.
@example
this.grid1.previousPage();
Returns void

reflow

reflow(): void

Inherited from IgxGridComponent.reflow
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4345
Recalculates grid width/height dimensions.
@remarks

Should be run when changing DOM elements dimentions manually that affect the grid's size.
@example
this.grid.reflow();
Returns void

refreshSearch

refreshSearch(updateActiveInfo?: boolean, endEdit?: boolean): number

Inherited from IgxGridComponent.refreshSearch
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4391
Reapplies the existing search.
@remarks

Returns how many times the grid contains the last search.
@example
this.grid.refreshSearch();
Parameters
- Optional updateActiveInfo: boolean
- Default value endEdit: boolean = true
Returns number

selectAllColumns

selectAllColumns(): void

Inherited from IgxGridComponent.selectAllColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5638
Selects all columns
@example
this.grid.deselectAllColumns();
Returns void

selectAllRows

selectAllRows(onlyFilterData?: boolean): void

Inherited from IgxGridComponent.selectAllRows
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5356
Selects all rows
@remarks

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.
@example
this.grid.selectAllRows(); this.grid.selectAllRows(false);
Parameters
- Default value onlyFilterData: boolean = true
Returns void

selectColumns

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

Inherited from IgxGridComponent.selectColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5574
Select specified columns.
@example
this.grid.selectColumns(['ID','Name'], true);
Parameters
- columns: string[] | IgxColumnComponent[]
- Optional clearCurrentSelection: boolean
  
  if true clears the current selection
Returns void

selectRows

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

Inherited from IgxGridComponent.selectRows
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5326
Select specified rows by ID.
@example
this.grid.selectRows([1,2,5], true);
Parameters
- rowIDs: any[]
- Optional clearCurrentSelection: boolean
  
  if true clears the current selection
Returns void

selectedColumns

selectedColumns(): IgxColumnComponent[]

Inherited from IgxGridComponent.selectedColumns
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5560
Get current selected columns.
@example
Returns an array with selected columns

const selectedColumns = this.grid.selectedColumns();
Returns IgxColumnComponent[]

selectedRows

selectedRows(): any[]

Inherited from IgxGridComponent.selectedRows
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5313
Get current selection state.
@example
Returns an array with selected rows' IDs (primaryKey or rowData)

const selectedRows = this.grid.selectedRows();
Returns any[]

sort

sort(expression: ISortingExpression | Array<ISortingExpression>): void

Implementation of GridType.sort

Inherited from IgxGridComponent.sort
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4099
Sort a single IgxColumnComponent.
@remarks

Sort the IgxGridComponent's IgxColumnComponent based on the provided array of sorting expressions.
@example
this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
Parameters
- expression: ISortingExpression | Array<ISortingExpression>
Returns void

toggleAllGroupRows

toggleAllGroupRows(): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:686
Toggles the expansion state of all group rows recursively.
@example
this.grid.toggleAllGroupRows;
Returns void

toggleColumnVisibility

toggleColumnVisibility(args: IColumnVisibilityChangedEventArgs): void

Inherited from IgxGridComponent.toggleColumnVisibility
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3235
Toggles the specified column's visibility.
@example
this.grid1.toggleColumnVisibility({ column: this.grid1.columns[0], newValue: true });
Parameters
- args: IColumnVisibilityChangedEventArgs
Returns void

toggleGroup

toggleGroup(groupRow: IGroupByRecord): void

- Defined in projects/igniteui-angular/src/lib/grids/grid/grid.component.ts:652
Toggles the expansion state of a group.
@example
public groupRow: IGroupByRecord; const toggleExpGroup = this.grid.toggleGroup(this.groupRow);
Parameters
- groupRow: IGroupByRecord
  
  The group record to toggle.
Returns void

toggleRow

toggleRow(rowID: any): void

Inherited from IgxGridComponent.toggleRow
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3334
Toggles the row by its id.
@remarks

ID is either the primaryKey value or the data record instance.
@example
this.grid.toggleRow(rowID);
Parameters
- rowID: any
  
  The row id - primaryKey value or the data record instance.
Returns void

unpinColumn

unpinColumn(columnName: string | IgxColumnComponent, index?: any): boolean

Inherited from IgxGridComponent.unpinColumn
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4256
Unpins a column by field name. Returns whether the operation is successful.
@example
this.grid.pinColumn("ID");
Parameters
- columnName: string | IgxColumnComponent
- Optional index: any
Returns boolean

unpinRow

unpinRow(rowID: any): boolean

Inherited from IgxGridComponent.unpinRow
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4306
Unpin the row by its id.
@remarks

ID is either the primaryKey value or the data record instance.
@example
this.grid.unpinRow(rowID);
Parameters
- rowID: any
  
  The row id - primaryKey value or the data record instance.
Returns boolean

updateCell

updateCell(value: any, rowSelector: any, column: string): void

Inherited from IgxGridComponent.updateCell
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4026
Updates the IgxGridRowComponent and the corresponding data record by primary key.
@remarks

Requires that the primaryKey property is set.
@example
this.gridWithPK.updateCell('Updated', 1, 'ProductName');
Parameters
- value: any
  
  the new value which is to be set.
- rowSelector: any
  
  corresponds to rowID.
- column: string
  
  corresponds to column field.
Returns void

updateRow

updateRow(value: any, rowSelector: any): void

Inherited from IgxGridComponent.updateRow
- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:4072
Updates the IgxGridRowComponent
@remarks

The row is specified by rowSelector parameter and the data source record with the passed value. This method will apply requested update only if primary key is specified in the grid.
@example
grid.updateRow({ ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21') }, 1);
Parameters
- value: any
- rowSelector: any
  
  correspond to rowID
Returns void

Object literals

clipboardOptions

clipboardOptions: object

Controls the copy behavior of the grid.

copyFormatters

copyFormatters: boolean = true

Apply the columns formatters (if any) on the data in the clipboard output.

copyHeaders

copyHeaders: boolean = true

Include the columns headers in the clipboard output.

enabled

enabled: boolean = true

Enables/disables the copy behavior

separator

separator: string = " "

The separator used for formatting the copy output. Defaults to \t.

Class IgxGridComponent

Hierarchy

Implements

Constructors

Properties

Accessors

Methods

Object literals

Constructors

constructor

Parameters

selectionService: IgxGridSelectionService

crudService: IgxGridCRUDService

colResizingService: IgxColumnResizingService

gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>

_transactions: TransactionService<Transaction, State>

elementRef: ElementRef

zone: NgZone

document: any

cdr: ChangeDetectorRef

resolver: ComponentFactoryResolver

differs: IterableDiffers

viewRef: ViewContainerRef

navigation: IgxGridNavigationService

filteringService: IgxFilteringService

overlayService: IgxOverlayService

summaryService: IgxGridSummaryService

_displayDensityOptions: IDisplayDensityOptions

Returns IgxGridComponent

Properties

_destroyed

advancedFilteringExpressionsTreeChange

autoGenerate

cdr

colResizingService

columnHidingTitle

columnPinningTitle

crudService

document

dragRowID

dropAreaTemplate

emptyFilteredGridTemplate

emptyGridDefaultTemplate

emptyGridTemplate

evenRowCSS

filteringExpressionsTreeChange

filteringService

gridAPI

groupsExpanded

groupsRecords

headerCollapseIndicatorTemplate

headerExpandIndicatorTemplate

loadingGridTemplate

navigation

oddRowCSS

onCellClick

onCellEdit

onCellEditCancel

onCellEditEnter

onColumnInit

onColumnMoving

onColumnMovingEnd

onColumnMovingStart

onColumnPinning

onColumnResized

onColumnSelectionChange

onColumnVisibilityChanged

onContextMenu

onDataPreLoad

onDensityChanged

onDoubleClick

onFilteringDone

onGridCopy

onGridKeydown

onGroupingDone

onPagingDone

onRangeSelection

onRowAdded

onRowDeleted

onRowDragEnd