Class IgxGridBaseDirective

Hierarchy

Implements

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

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • new IgxGridBaseDirective(selectionService: IgxGridSelectionService, colResizingService: IgxColumnResizingService, gridAPI: GridServiceType, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, appRef: ApplicationRef, moduleRef: NgModuleRef<any>, factoryResolver: ComponentFactoryResolver, injector: Injector, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxGridBaseDirective

Properties

EMPTY_DATA

EMPTY_DATA: any[] = []

_destroyed

_destroyed: boolean = false

actionStrip

activeNodeChange

activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs> = ...

Emmited when the active node is changed.

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

addRowEmptyTemplate

addRowEmptyTemplate: TemplateRef<any>

Gets/Sets a custom template for adding row UI when grid is empty.

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

advancedFilteringExpressionsTreeChange

advancedFilteringExpressionsTreeChange: 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 auto-generate 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

cellClick

cellClick: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is clicked.

@remarks

Returns the IgxGridCell.

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

cellEdit

cellEdit: 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 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

cellEditDone

cellEditDone: EventEmitter<IGridEditDoneEventArgs> = ...

Emitted after cell has been edited and editing has been committed.

@example
<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

cellEditEnter

cellEditEnter: EventEmitter<IGridEditEventArgs> = ...

Emitted when cell enters edit mode.

@remarks

This event is cancelable.

@example
<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

cellEditExit

cellEditExit: EventEmitter<IGridEditDoneEventArgs> = ...

Emitted when cell exits edit mode.

@example
<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

clipboardOptions

clipboardOptions: object = ...

Controls the copy behavior of the grid.

Type declaration

  • copyFormatters: boolean
  • copyHeaders: boolean
  • enabled: boolean
  • separator: string

colResizingService

colResizingService: IgxColumnResizingService

columnInit

columnInit: EventEmitter<IgxColumnComponent> = ...

Emitted when a column is initialized.

@remarks

Returns the column object.

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

columnMoving

columnMoving: EventEmitter<IColumnMovingEventArgs> = ...

Emitted during the column moving operation.

@remarks

Returns the source and target IgxColumnComponent objects. This event is cancelable.

@example
<igx-grid (columnMoving)="moving($event)"></igx-grid>

columnMovingEnd

columnMovingEnd: EventEmitter<IColumnMovingEndEventArgs> = ...

Emitted when column moving ends.

@remarks

Returns the source and target IgxColumnComponent objects.

@example
<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid>

columnMovingStart

columnMovingStart: EventEmitter<IColumnMovingStartEventArgs> = ...

Emitted when column moving starts.

@remarks

Returns the moved IgxColumnComponent object.

@example
<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid>

columnPin

columnPin: EventEmitter<IPinColumnCancellableEventArgs> = ...

Emitted before IgxColumnComponent is pinned.

@remarks

The index at which to insert the column may be changed through the insertAtIndex property.

@example
public columnPinning(event) {
    if (event.column.field === "Name") {
      event.insertAtIndex = 0;
    }
}

columnPinned

columnPinned: EventEmitter<IPinColumnEventArgs> = ...

Emitted after 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;
    }
}

columnResized

columnResized: EventEmitter<IColumnResizeEventArgs> = ...

Emitted after column is resized.

@remarks

Returns the IgxColumnComponent object's old and new width.

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

columnSelectionChanging

columnSelectionChanging: EventEmitter<IColumnSelectionEventArgs> = ...

Emitted when IgxColumnComponent is selected.

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

columnVisibilityChanged

columnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs> = ...

Emitted after column visibility is changed.

@remarks

Args: { column: IgxColumnComponent, newValue: boolean }

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

columnVisibilityChanging

columnVisibilityChanging: EventEmitter<IColumnVisibilityChangingEventArgs> = ...

Emitted before column visibility is changed.

@remarks

Args: { column: any, newValue: boolean }

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

contextMenu

contextMenu: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is right clicked.

@remarks

Returns the IgxGridCell object.

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

Abstract data

data: any[]

document

document: any

doubleClick

doubleClick: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is double clicked.

@remarks

Returns the IgxGridCell object.

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

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

in version 12.2.0. We suggest using rowClasses property instead

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>

excelStyleHeaderIconTemplate

excelStyleHeaderIconTemplate: TemplateRef<any> = null

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

Abstract filteredData

filteredData: any[]

filtering

filtering: EventEmitter<IFilteringEventArgs> = ...

Emitted before filtering expressions are applied.

@remarks

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

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

filteringDone

filteringDone: EventEmitter<IFilteringExpressionsTree> = ...

Emitted after 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" (filteringDone)="filteringDone($event)"></igx-grid>

filteringExpressionsTreeChange

filteringExpressionsTreeChange: 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: GridServiceType

gridCopy

gridCopy: EventEmitter<IGridClipboardEvent> = ...

Emitted when a copy operation is executed.

@remarks

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

gridKeydown

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

gridScroll

gridScroll: EventEmitter<IGridScrollEventArgs> = ...

Emitted when grid is scrolled horizontally/vertically.

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

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

in version 12.2.0. We suggest using rowClasses property instead

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>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...

pageChange

pageChange: EventEmitter<number> = ...
@deprecated

in version 12.1.0. Use the corresponding output exposed by the igx-paginator component instead

Emitted after the current page is changed.

@example
<igx-grid (pageChange)="onPageChange($event)"></igx-grid>
public onPageChange(page: number) {
  this.currentPage = page;
}

pagingDone

pagingDone: EventEmitter<IPageEventArgs> = ...
@deprecated

in version 12.1.0. Use the corresponding output exposed by the igx-paginator component instead

Emitted after paging is performed.

@remarks

Returns an object consisting of the previous and next pages.

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

perPageChange

perPageChange: EventEmitter<number> = ...
@deprecated

in version 12.1.0. Use the corresponding output exposed by the igx-paginator component instead

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" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>

rangeSelected

rangeSelected: EventEmitter<GridSelectionRange> = ...

Emitted when making a range selection.

@remarks

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

rendered

rendered: EventEmitter<boolean> = ...

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

rendered$

rendered$: Observable<boolean> = ...

rowAdd

rowAdd: EventEmitter<IGridEditEventArgs> = ...

Emmited just before the newly added row is commited.

@remarks

This event is cancelable. Returns an IGridEditEventArgs object.

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

rowAdded

rowAdded: EventEmitter<IRowDataEventArgs> = ...

Emitted when a row is added.

@remarks

Returns the data for the new IgxGridRowComponent object.

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

rowClasses

rowClasses: any

Sets a conditional class selector to the grid's row element. Accepts an object literal, containing key-value pairs, where the key is the name of the CSS class and the value is either a callback function that returns a boolean, or boolean, like so:

callback = (row: RowType) => { return row.selected > 6; }
rowClasses = { 'className' : this.callback };
<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>
@memberof

IgxColumnComponent

rowCollapsedIndicatorTemplate

rowCollapsedIndicatorTemplate: TemplateRef<any> = null

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

rowDelete

rowDelete: EventEmitter<IGridEditEventArgs> = ...

Emmited when deleting a row.

@remarks

This event is cancelable. Returns an IGridEditEventArgs object.

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

rowDeleted

rowDeleted: EventEmitter<IRowDataEventArgs> = ...

Emitted when a row is deleted.

@remarks

Returns an IRowDataEventArgs object.

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

rowDragEnd

rowDragEnd: EventEmitter<IRowDragEndEventArgs> = ...

Emitted when dropping a row.

@remarks

Return the dropped row.

rowDragStart

rowDragStart: EventEmitter<IRowDragStartEventArgs> = ...

Emitted when start dragging a row.

@remarks

Return the dragged row.

rowEdit

rowEdit: 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 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

rowEditDone

rowEditDone: EventEmitter<IGridEditDoneEventArgs> = ...

Emitted after exiting edit mode for a row and editing has been committed.

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

@example
<igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

rowEditEnter

rowEditEnter: EventEmitter<IGridEditEventArgs> = ...

Emitted when a row enters edit mode.

@remarks

Emitted when [rowEditable]="true". This event is cancelable.

@example
<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

rowEditExit

rowEditExit: EventEmitter<IGridEditDoneEventArgs> = ...

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.

@example
<igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

rowExpandedIndicatorTemplate

rowExpandedIndicatorTemplate: TemplateRef<any> = null

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

rowPinned

rowPinned: EventEmitter<IPinRowEventArgs> = ...

Emitted when the pinned state of a row is changed.

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

rowPinning

rowPinning: EventEmitter<IPinRowEventArgs> = ...

Emitted when the pinned state of a row is changed.

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

rowSelectionChanging

rowSelectionChanging: EventEmitter<IRowSelectionEventArgs> = ...

Emitted when IgxGridRowComponent is selected.

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

rowStyles

rowStyles: any = null

Sets conditional style properties on the grid row element. It accepts an object literal where the keys are the style properties and the value is an expression to be evaluated.

styles = {
 background: 'yellow',
 color: (row: RowType) => row.selected : 'red': 'white'
}
<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
@memberof

IgxColumnComponent

rowToggle

rowToggle: EventEmitter<IRowToggleEventArgs> = ...

Emitted when the expanded state of a row gets changed.

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

selected

selected: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is selected.

@remarks

Returns the IgxGridCell.

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

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;

snackbarDisplayTime

snackbarDisplayTime: number = 6000

Gets/Sets the display time for the row adding snackbar notification.

@remarks

By default it is 6000ms.

sortAscendingHeaderIconTemplate

sortAscendingHeaderIconTemplate: TemplateRef<any> = null

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

sortDescendingHeaderIconTemplate

sortDescendingHeaderIconTemplate: TemplateRef<any> = null

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

sortHeaderIconTemplate

sortHeaderIconTemplate: TemplateRef<any> = null

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

sorting

sorting: EventEmitter<ISortingEventArgs> = ...

Emitted before sorting expressions are applied.

@remarks

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

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

sortingDone

sortingDone: EventEmitter<ISortingExpression | ISortingExpression[]> = ...

Emitted after sorting is completed.

@remarks

Returns the sorting expression.

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

sortingExpressionsChange

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

toolbarExporting

toolbarExporting: EventEmitter<IGridToolbarExportEventArgs> = ...

Emitted when an export process is initiated by the user.

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

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

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

      Parameters

      • column: ColumnType
      • filteringExpressionsTree: IFilteringExpressionsTree
      • done: function
          • (values: any[]): void
          • Parameters

            • values: any[]

            Returns void

      Returns void

Accessors

activeDescendant

  • get activeDescendant(): string

advancedFilteringExpressionsTree

allowAdvancedFiltering

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

allowFiltering

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

bannerClass

  • get bannerClass(): string

batchEditing

  • get batchEditing(): boolean
  • set batchEditing(val: boolean): void
  • Gets/Sets whether the grid has batch editing enabled. When batch editing is enabled, changes are not made directly to the underlying data. Instead, they are stored as transactions, which can later be committed w/ the commit method.

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

    Returns boolean

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

    Parameters

    • val: boolean

    Returns void

cellSelection

columnSelection

columnWidth

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

columns

dataRowList

  • get dataRowList(): QueryList<IgxRowDirective>

dataView

  • get dataView(): any[]

defaultHeaderGroupMinWidth

  • get defaultHeaderGroupMinWidth(): number

defaultRowHeight

  • get defaultRowHeight(): number

displayDensity

dragIndicatorIconTemplate

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

emptyFilteredGridMessage

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

emptyGridMessage

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

expansionStates

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

filterCellList

  • get filterCellList(): IgxGridFilteringCellComponent[]

filterMode

filterStrategy

filteredSortedData

  • get filteredSortedData(): any[]

filteringExpressionsTree

filteringLogic

filteringRow

  • get filteringRow(): IgxGridFilteringRowComponent

hasColumnGroups

  • get hasColumnGroups(): boolean

hasColumnLayouts

  • get hasColumnLayouts(): boolean

hasEditableColumns

  • get hasEditableColumns(): boolean

hasFilterableColumns

  • get hasFilterableColumns(): boolean

hasMovableColumns

  • get hasMovableColumns(): boolean

hasSortableColumns

  • get hasSortableColumns(): boolean

hasSummarizedColumns

  • get hasSummarizedColumns(): boolean

headerCellList

  • get headerCellList(): IgxGridHeaderComponent[]

headerContainer

headerDragContainer

  • get headerDragContainer(): ElementRef<HTMLElement>

headerGroupContainer

  • get headerGroupContainer(): ElementRef<HTMLElement>

headerGroups

  • get headerGroups(): IgxGridHeaderGroupComponent[]

headerGroupsList

  • get headerGroupsList(): IgxGridHeaderGroupComponent[]

headerSelectorContainer

  • get headerSelectorContainer(): ElementRef<HTMLElement>

headerWidth

  • get headerWidth(): number

height

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

hiddenColumnsCount

  • get hiddenColumnsCount(): number

hideRowSelectors

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

isFirstPage

  • get isFirstPage(): boolean

isLastPage

  • get isLastPage(): boolean

isLoading

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

locale

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

nativeElement

  • get nativeElement(): HTMLElement

outlet

page

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

paging

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

pagingMode

perPage

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

pinnedColumns

pinnedColumnsCount

  • get pinnedColumnsCount(): number

pinnedDataView

  • get pinnedDataView(): any[]

pinnedRowHeight

  • get pinnedRowHeight(): any

pinnedRows

pinnedWidth

  • get pinnedWidth(): number

pinning

resourceStrings

rowDraggable

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

rowEditable

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

rowHeight

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

rowList

  • get rowList(): QueryList<IgxRowDirective>

rowSelection

selectRowOnClick

  • get selectRowOnClick(): boolean
  • set selectRowOnClick(enabled: boolean): void

selectedRows

  • get selectedRows(): any[]
  • set selectedRows(rowIDs: any[]): void

showSummaryOnCollapse

  • get showSummaryOnCollapse(): boolean
  • set showSummaryOnCollapse(value: boolean): void

sortStrategy

sortingExpressions

summaryCalculationMode

summaryPosition

summaryRowHeight

  • get summaryRowHeight(): number
  • set summaryRowHeight(value: number): void

totalHeight

  • get totalHeight(): any

totalPages

  • get totalPages(): number

totalRecords

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

totalWidth

  • get totalWidth(): number

transactions

unpinnedColumns

unpinnedDataView

  • get unpinnedDataView(): any[]

unpinnedWidth

  • get unpinnedWidth(): number

virtualizationState

visibleColumns

width

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

Methods

_setupListeners

  • _setupListeners(): void

_setupServices

  • _setupServices(): void

addRow

  • addRow(data: any): void

beginAddRowById

  • beginAddRowById(rowID: any, asChild?: boolean): void
  • Enters add mode by spawning the UI under the specified row by rowID.

    @remarks

    If null is passed as rowID, the row adding UI is spawned as the first record in the data view

    @remarks

    Spawning the UI to add a child for a record only works if you provide a rowID

    @example
    this.grid.beginAddRowById('ALFKI');
    this.grid.beginAddRowById('ALFKI', true);
    this.grid.beginAddRowById(null);
    

    Parameters

    • rowID: any

      The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view

    • Optional asChild: boolean

      Whether the record should be added as a child. Only applicable to igxTreeGrid.

    Returns void

beginAddRowByIndex

  • beginAddRowByIndex(index: number): void
  • Enters add mode by spawning the UI at the specified index.

    @remarks

    Accepted values for index are integers from 0 to this.grid.dataView.length

    @example
    this.grid.beginAddRowByIndex(0);
    

    Parameters

    • index: number

      The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length

    Returns void

clearFilter

  • clearFilter(name?: string): void

clearSearch

  • clearSearch(): void

clearSort

  • clearSort(name?: string): void
  • 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

collapseAll

  • collapseAll(): void

collapseRow

  • collapseRow(rowID: any): void
  • 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

combineSelectedCellAndColumnData

  • combineSelectedCellAndColumnData(columnData: any[], formatters?: boolean, headers?: boolean): any[]

deleteRow

  • deleteRow(rowSelector: any): any
  • 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 any

deselectAllColumns

  • deselectAllColumns(): void

deselectAllRows

  • deselectAllRows(onlyFilterData?: boolean): void
  • 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

    • onlyFilterData: boolean = true

    Returns void

deselectColumns

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

deselectRows

  • deselectRows(rowIDs: any[]): void

disableSummaries

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

enableSummaries

  • enableSummaries(...rest: any[]): void
  • 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
  • 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

    • commit: boolean = true
    • Optional event: Event

    Returns void

expandAll

  • expandAll(): void

expandRow

  • expandRow(rowID: any): void

filter

filterGlobal

  • filterGlobal(value: any, condition: any, ignoreCase?: any): void
  • 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
  • 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
  • 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

getColumnByName

getColumnByVisibleIndex

getHeaderGroupWidth

getNextCell

  • getNextCell(currRowIndex: number, curVisibleColIndex: number, callback?: function): ICellPosition
  • 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
    • callback: function = null
        • (IgxColumnComponent: any): boolean
        • Parameters

          • IgxColumnComponent: any

          Returns boolean

    Returns ICellPosition

getPinnedWidth

  • getPinnedWidth(takeHidden?: boolean): number

getPreviousCell

  • getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback?: function): ICellPosition
  • 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
    • callback: function = null
        • (IgxColumnComponent: any): boolean
        • Parameters

          • IgxColumnComponent: any

          Returns boolean

    Returns ICellPosition

getRowData

  • getRowData(rowSelector: any): any

getSelectedColumnsData

  • getSelectedColumnsData(formatters?: boolean, headers?: boolean): any[]
  • 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

    • formatters: boolean = false
    • headers: boolean = false

    Returns any[]

getSelectedData

  • getSelectedData(formatters?: boolean, headers?: boolean): any[]
  • 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

    • formatters: boolean = false
    • headers: boolean = false

    Returns any[]

isRecordPinnedByIndex

  • isRecordPinnedByIndex(rowIndex: number): boolean

markForCheck

  • markForCheck(): void
  • Triggers change detection for the IgxGridComponent. Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. May degrade performance if used when not needed, or if misused:

    ```typescript // DON'Ts: // don't call markForCheck from inside a loop // don't call markForCheck when a primitive has changed grid.data.forEach(rec => { rec = newValue; grid.markForCheck(); });

    // DOs // call markForCheck after updating a nested property grid.data.forEach(rec => { rec.nestedProp1.nestedProp2 = newValue; }); grid.markForCheck();

    
    
    @example
    grid.markForCheck();
    

    Returns void

moveColumn

navigateTo

  • navigateTo(rowIndex: number, visibleColIndex?: number, cb?: function): void
  • 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
    • visibleColIndex: number = -1
    • cb: function = null
        • (args: any): void
        • Parameters

          • args: any

          Returns void

    Returns void

nextPage

  • nextPage(): void

openAdvancedFilteringDialog

paginate

  • paginate(val: number): void

pinColumn

pinRow

  • pinRow(rowID: any, index?: number, row?: RowType): boolean
  • 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.

    • Optional row: RowType

    Returns boolean

previousPage

  • previousPage(): void

reflow

  • reflow(): void

refreshSearch

  • refreshSearch(updateActiveInfo?: boolean, endEdit?: boolean): number
  • Reapplies the existing search.

    @remarks

    Returns how many times the grid contains the last search.

    @example
    this.grid.refreshSearch();
    

    Parameters

    • Optional updateActiveInfo: boolean
    • endEdit: boolean = true

    Returns number

selectAllColumns

  • selectAllColumns(): void

selectAllRows

  • selectAllRows(onlyFilterData?: boolean): void
  • 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

    • onlyFilterData: boolean = true

    Returns void

selectColumns

  • selectColumns(columns: string[] | ColumnType[], clearCurrentSelection?: boolean): void
  • Select specified columns.

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

    Parameters

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

      if true clears the current selection

    Returns void

selectRows

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

selectedColumns

  • selectedColumns(): ColumnType[]

sort

toggleColumnVisibility

toggleRow

  • toggleRow(rowID: any): void

unpinColumn

unpinRow

  • unpinRow(rowID: any, row?: RowType): boolean

updateCell

  • updateCell(value: any, rowSelector: any, column: string): void
  • 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
  • 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