Class IgxGridBaseDirective

Hierarchy

DisplayDensityBase
- IgxGridBaseDirective

Implements

DoCheck
OnInit
OnInit
DoCheck
OnDestroy
AfterContentInit
AfterViewInit

Constructors

constructor

Properties

Accessors

Methods

Object literals

clipboardOptions

Constructors

constructor

new IgxGridBaseDirective(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): IgxGridBaseDirective

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 IgxGridBaseDirective

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

data

data: any[]

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.

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>

filteredData

filteredData: any[]

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>

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>

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

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

advancedFilteringExpressionsTree

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

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

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

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

- 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

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

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

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

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

- 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
- 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[]

- 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[]

dataRowList

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

- 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[]

- 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

- 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

- 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

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

emptyFilteredGridMessage

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

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

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

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

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

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

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

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

- 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
- 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[]

- 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

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

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

filteredSortedData

get filteredSortedData(): any[]

- 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

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

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

hasColumnGroups

get hasColumnGroups(): boolean

- 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

- 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

- 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

- 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

hasMovableColumns

get hasMovableColumns(): boolean

- 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

- 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

- 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[]

- 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[]

- 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

- 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

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

- 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

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

hideRowSelectors

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

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

isFirstPage

get isFirstPage(): boolean

- 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

- 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

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

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

- 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

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

paging

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

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

- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:422
Returns GridPagingMode
- 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

- 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
- 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[]

- 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

- 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
- 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[]

- 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

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

pinnedRows

get pinnedRows(): IgxGridRowComponent[]

- 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

- 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

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

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

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

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

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

- 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

- 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"
- 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[]

- 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[]

showToolbar

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

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

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

- 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[]
- 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

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

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

- 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

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

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

totalPages

get totalPages(): number

- 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

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

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

- 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[]

- 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[]

- 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

- 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[]

- 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

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

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

_setupServices

_setupServices(): void

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

addRow

addRow(data: any): void

- 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

- 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

clearSearch

clearSearch(): void

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

getCellByColumn

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

- 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

- 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

- 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

- 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

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

getHeaderGroupWidth

getHeaderGroupWidth(column: IgxColumnComponent): string

- 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

- 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

- 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

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

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

- 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[]

- 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[]

- Defined in projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:5547
Returns an array of the current cell 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[]

isRecordPinnedByIndex

isRecordPinnedByIndex(rowIndex: number): boolean

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

- 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

previousPage(): void

- 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

- 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

- 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

- 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

- 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

- 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

- 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[]

- 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[]

- 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

- 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

toggleColumnVisibility

toggleColumnVisibility(args: IColumnVisibilityChangedEventArgs): void

- 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

toggleRow

toggleRow(rowID: any): void

- 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

- 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

- 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

- 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

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

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 IgxGridBaseDirective

Properties

_destroyed

advancedFilteringExpressionsTreeChange

autoGenerate

cdr

colResizingService

columnHidingTitle

columnPinningTitle

crudService

data

document

dragRowID

emptyFilteredGridTemplate

emptyGridDefaultTemplate

emptyGridTemplate

evenRowCSS

filteredData

filteringExpressionsTreeChange

filteringService

gridAPI

headerCollapseIndicatorTemplate

headerExpandIndicatorTemplate

loadingGridTemplate

navigation

oddRowCSS

onCellClick

onCellEdit

onCellEditCancel

onCellEditEnter

onColumnInit

onColumnMoving

onColumnMovingEnd

onColumnMovingStart

onColumnPinning

onColumnResized

onColumnSelectionChange

onColumnVisibilityChanged

onContextMenu

onDataPreLoad

onDensityChanged

onDoubleClick

onFilteringDone

onGridCopy

onGridKeydown

onPagingDone

onRangeSelection

onRowAdded

onRowDeleted

onRowDragEnd

onRowDragStart

onRowEdit