Class IgxHierarchicalGridComponent

Hierarchy

Implements

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

Constructors

Properties

Accessors

Methods

Object literals

Constructors

constructor

Properties

_destroyed

_destroyed: boolean = false

activeNodeChange

activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs> = new EventEmitter<IActiveNodeChangeEventArgs>()

Emmited when the active node is changed.

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

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

cellEditDone

cellEditDone: EventEmitter<IGridEditDoneEventArgs> = new 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>

colResizingService

colResizingService: IgxColumnResizingService

columnHidingTitle

columnHidingTitle: string = ""

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

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

columnPinningTitle

columnPinningTitle: string = ""

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

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

crudService

crudService: IgxGridCRUDService

document

document: any

dragRowID

dragRowID: any = null

Gets the row ID that is being dragged.

@remarks

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

emptyFilteredGridTemplate

emptyFilteredGridTemplate: TemplateRef<any>

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

@example
const emptyTempalte = this.grid.emptyGridTemplate;

emptyGridDefaultTemplate

emptyGridDefaultTemplate: TemplateRef<any>

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

@example
const emptyTempalte = this.grid.emptyGridTemplate;

emptyGridTemplate

emptyGridTemplate: TemplateRef<any>

Gets/Sets a custom template when empty.

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

evenRowCSS

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

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

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

filteringExpressionsTreeChange

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

Emitted after filtering is performed.

@remarks

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

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

filteringService

filteringService: IgxFilteringService

gridAPI

gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>

hasChildrenKey

hasChildrenKey: string

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-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" (onDataPreLoad)="handleEvent()">
 </igx-hierarchical-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>

onScroll

onScroll: EventEmitter<IGridScrollEventArgs> = new EventEmitter<IGridScrollEventArgs>()

Emitted when grid is scrolled horizontally/vertically.

@example
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
             (onScroll)="onScroll($event)"></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.

rowEditDone

rowEditDone: EventEmitter<IGridEditDoneEventArgs> = new 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>

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;

showExpandAll

showExpandAll: boolean = false

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

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

cellSelection

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

columnHiding

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

columnPinning

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

columnSelection

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

columnWidth

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

columns

data

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

dataRowList

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

expandChildren

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

expansionStates

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

exportCsv

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

exportCsvText

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

exportExcel

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

exportExcelText

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

exportText

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

filterCellList

  • get filterCellList(): IgxGridFilteringCellComponent[]

filterMode

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

filterStrategy

filteredData

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

filteredSortedData

  • get filteredSortedData(): any[]

filteringExpressionsTree

filteringLogic

foreignKey

  • get foreignKey(): any

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

headerGroupsList

  • get headerGroupsList(): IgxGridHeaderGroupComponent[]

headerWidth

  • get headerWidth(): number

height

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

hiddenColumnsCount

  • get hiddenColumnsCount(): number

hiddenColumnsText

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

hideRowSelectors

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

id

  • get id(): string
  • set id(value: string): 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(): any

outlet

  • get outlet(): any
  • set outlet(val: any): void

outletDirective

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

pinnedColumnsText

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

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

rowSelection

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

selectedCells

selectedRows

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

showSummaryOnCollapse

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

showToolbar

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

sortStrategy

sortingExpressions

summaryCalculationMode

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

summaryPosition

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

toolbarCustomContentTemplate

toolbarTitle

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

totalHeight

  • get totalHeight(): any

totalItemCount

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

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

visibleColumns

width

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

Methods

_setupListeners

  • _setupListeners(): void

_setupServices

  • _setupServices(): void

addRow

  • addRow(data: any): void

beginAddRow

  • beginAddRow(rowID?: any): void

clearFilter

  • clearFilter(name?: string): void

clearSearch

  • clearSearch(): void

clearSort

  • clearSort(name?: string): void

closeAdvancedFilteringDialog

  • closeAdvancedFilteringDialog(applyChanges: boolean): void

collapseAll

  • collapseAll(): void

collapseRow

  • collapseRow(rowID: any): void

deleteRow

  • deleteRow(rowSelector: any): void

deselectAllColumns

  • deselectAllColumns(): void

deselectAllRows

  • deselectAllRows(onlyFilterData?: boolean): void

deselectColumns

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

endAdd

  • endAdd(commit?: boolean, event?: Event): void

endEdit

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

expandAll

  • expandAll(): void

expandRow

  • expandRow(rowID: any): void

filter

filterGlobal

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

getCellByColumn

getCellByColumnVisibleIndex

getCellByKey

getColumnByName

getColumnByVisibleIndex

getDefaultExpandState

  • getDefaultExpandState(record: any): boolean

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
    • Default value 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
    • Default value callback: function = null
        • (IgxColumnComponent: any): boolean
        • Parameters

          • IgxColumnComponent: any

          Returns boolean

    Returns ICellPosition

getRowByIndex

getRowByKey

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

    • Default value formatters: boolean = false
    • Default value headers: boolean = false

    Returns any[]

getSelectedData

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

isRecordPinnedByIndex

  • isRecordPinnedByIndex(rowIndex: number): boolean

markForCheck

  • markForCheck(): 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
    • Default value visibleColIndex: number = -1
    • Default value cb: Function = null

    Returns void

nextPage

  • nextPage(): void

ngDoCheck

  • ngDoCheck(): void

ngOnDestroy

  • ngOnDestroy(): void

onContainerScroll

  • onContainerScroll(): void

openAdvancedFilteringDialog

  • openAdvancedFilteringDialog(): void

paginate

  • paginate(val: number): void

pinColumn

pinRow

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

previousPage

  • previousPage(): void

reflow

  • reflow(): void

refreshSearch

  • refreshSearch(updateActiveInfo?: boolean, endEdit?: boolean): 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

    • Default value onlyFilterData: boolean = true

    Returns void

selectColumns

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

selectRows

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

selectedColumns

sort

toggleColumnVisibility

toggleRow

  • toggleRow(rowID: any): void

unpinColumn

unpinRow

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

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.