Class IgxGridComponent

Ignite UI for Angular Grid - Documentation

The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data has been bound, it can be manipulated through filtering, sorting & editing operations.

Example:

<igx-grid [data]="employeeData" autoGenerate="false">
  <igx-column field="first" header="First Name"></igx-column>
  <igx-column field="last" header="Last Name"></igx-column>
  <igx-column field="role" header="Role"></igx-column>
</igx-grid>

Hierarchy

Implements

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

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • new IgxGridComponent(gridAPI: GridBaseAPIService<IgxGridBaseComponent>, selection: IgxSelectionAPIService, _transactions: TransactionService<Transaction, State>, elementRef: ElementRef, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, navigation: IgxGridNavigationService, filteringService: IgxFilteringService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions): IgxGridComponent

Properties

autoGenerate

autoGenerate: boolean = false

An @Input property that autogenerates the IgxGridComponent columns. The default value is false.

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

IgxGridBaseComponent

cdr

cdr: ChangeDetectorRef

columnHidingTitle

columnHidingTitle: string = ""

An @Input property that sets the title to be displayed in the built-in column hiding UI.

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

IgxGridBaseComponent

columnPinningTitle

columnPinningTitle: string = ""

An @Input property that sets the title to be displayed in the UI of the column pinning.

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

IgxGridBaseComponent

document

document: any

dropAreaTemplate

dropAreaTemplate: TemplateRef<any>

An @Input property that sets the template that will be rendered as a GroupBy drop area. Note: The grid needs to have at least one groupable column in order the GroupBy area to be displayed. `html <igx-grid [dropAreaTemplate]="dropAreaRef"> <igx-column [groupable]="true" field="ID">

<ng-template #myDropArea> Custom drop area!

```ts
@ViewChild('myDropArea', { read: TemplateRef })
public dropAreaRef: TemplateRef<any>;
memberof

IgxGridComponent

emptyFilteredGridTemplate

emptyFilteredGridTemplate: TemplateRef<any>

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

const emptyTempalte = this.grid.emptyGridTemplate;
memberof

IgxGridBaseComponent

emptyGridDefaultTemplate

emptyGridDefaultTemplate: TemplateRef<any>

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

const emptyTempalte = this.grid.emptyGridTemplate;
memberof

IgxGridBaseComponent

emptyGridTemplate

emptyGridTemplate: TemplateRef<any>

An @Input property that sets a custom template when the IgxGridComponent is empty.

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

IgxGridBaseComponent

evenRowCSS

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

An @Input property that adds styling classes applied to all even IgxGridRowComponents in the grid.

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

IgxGridBaseComponent

filteringService

filteringService: IgxFilteringService

groupsExpanded

groupsExpanded: boolean = true

An @Input property that determines whether created groups are rendered expanded or collapsed. The default rendered state is expanded.

<igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid>
memberof

IgxGridComponent

groupsRecords

groupsRecords: IGroupByRecord[] = []

A hierarchical representation of the group by records.

let groupRecords = this.grid.groupsRecords;
memberof

IgxGridComponent

oddRowCSS

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

An @Input property that adds styling classes applied to all odd IgxGridRowComponents in the grid.

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

IgxGridBaseComponent

onCellClick

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

Emitted when IgxGridCellComponent is clicked. Returns the IgxGridCellComponent.

<igx-grid #grid (onCellClick)="onCellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
public onCellClick(e){
    alert("The cell has been clicked!");
}
memberof

IgxGridBaseComponent

onCellEdit

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

An @Output property emitting an event when IgxGridCellComponent editing has been performed in the grid. On IgxGridCellComponent editing, both IgxGridCellComponent and IgxGridRowComponent objects in the event arguments are defined for the corresponding IgxGridCellComponent that is being edited and the IgxGridRowComponent the IgxGridCellComponent belongs to.

editDone(event: IgxColumnComponent){
   const column: IgxColumnComponent = event;
}
<igx-grid #grid3 (onCellEdit)="editDone($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true">
         <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
         <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
         <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>
memberof

IgxGridBaseComponent

onCellEditCancel

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

An @Output property emitting an event when IgxGridCellComponent editing has been performed in the grid and the values have not been submitted. On IgxGridCellComponent editing, both IgxGridCellComponent and IgxGridRowComponent objects in the event arguments are defined for the corresponding IgxGridCellComponent that is being edited and the IgxGridRowComponent the IgxGridCellComponent belongs to.

editCancel(event: IgxColumnComponent){
   const column: IgxColumnComponent = event;
}
<igx-grid #grid3 (onCellEditCancel)="editCancel($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true">
         <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
         <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
         <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>
memberof

IgxGridComponent

onCellEditEnter

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

An @Output property emitting an event when IgxGridCellComponent enters edit mode. On IgxGridCellComponent editing, both IgxGridCellComponent and IgxGridRowComponent objects in the event arguments are defined for the corresponding IgxGridCellComponent that is being edited and the IgxGridRowComponent the IgxGridCellComponent belongs to.

editStart(event: IgxColumnComponent){
   const column: IgxColumnComponent = event;
}
<igx-grid #grid3 (onCellEditEnter)="editStart($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true">
         <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
         <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
         <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>
memberof

IgxGridComponent

onColumnInit

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

Emitted when a grid column is initialized. Returns the column object.

<igx-grid #grid [data]="localData" [onColumnInit]="initColumns($event)" [autoGenerate]="true"</igx-grid>
initColumns(event: IgxColumnComponent) {
const column: IgxColumnComponent = event;
      column.filterable = true;
      column.sortable = true;
      column.editable = true;
}
memberof

IgxGridBaseComponent

onColumnMoving

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

Emitted throughout the IgxColumnComponent moving operation. Returns the source and target IgxColumnComponent objects. This event is cancelable.

moving(event: IColumnMovingEventArgs){
    const moving = event;
}
<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMoving)="moving($event)"></igx-grid>
memberof

IgxGridBaseComponent

onColumnMovingEnd

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

Emitted when IgxColumnComponent moving ends. Returns the source and target IgxColumnComponent objects. This event is cancelable.

movingEnds(event: IColumnMovingEndEventArgs){
    const movingEnds = event;
}
<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingEnd)="movingEnds($event)"></igx-grid>
memberof

IgxGridBaseComponent

onColumnMovingStart

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

Emitted when IgxColumnComponent moving starts. Returns the moved IgxColumnComponent object.

movingStart(event: IColumnMovingStartEventArgs){
    const movingStarts = event;
}
<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingStart)="movingStart($event)"></igx-grid>
memberof

IgxGridBaseComponent

onColumnPinning

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

Emitted when IgxColumnComponent is pinned. The index that the column is inserted at may be changed through the insertAtIndex property.

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

IgxGridBaseComponent

onColumnResized

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

Emitted when IgxColumnComponent is resized. Returns the IgxColumnComponent object's old and new width.

resizing(event: IColumnResizeEventArgs){
    const grouping = event;
}
<igx-grid #grid [data]="localData" (onColumnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>
memberof

IgxGridBaseComponent

onColumnVisibilityChanged

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

Emitted when IgxColumnComponent visibility is changed. Args: { column: any, newValue: boolean }

visibilityChanged(event: IColumnVisibilityChangedEventArgs){
   const visiblity = event;
}
<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
memberof

IgxGridBaseComponent

onContextMenu

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

Emitted when a IgxGridCellComponent is right clicked. Returns the IgxGridCellComponent object.

contextMenu(event: IGridCellEventArgs){
    const resizing = event;
    console.log(resizing);
}
<igx-grid #grid [data]="localData" (onContextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>
memberof

IgxGridBaseComponent

onDataPreLoad

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

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

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

IgxGridBaseComponent

onDensityChanged

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

onDoubleClick

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

Emitted when a IgxGridCellComponent is double clicked. Returns the IgxGridCellComponent object.

dblClick(event: IGridCellEventArgs){
    const dblClick = event;
    console.log(dblClick);
}
<igx-grid #grid [data]="localData" (onDoubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>
memberof

IgxGridBaseComponent

onFilteringDone

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

Emitted when filtering is performed through the UI. Returns the filtering expressions tree of the column for which filtering was performed.

filteringDone(event: IFilteringExpressionsTree){
    const filteringTree = event;
}
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onFilteringDone)="filteringDone($event)"></igx-grid>
memberof

IgxGridBaseComponent

onFocusChange

onFocusChange: EventEmitter<IGridFocusChangeEventArgs> = new EventEmitter<IGridFocusChangeEventArgs>()

onGroupingDone

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

Emitted when a new IgxColumnComponent gets grouped/ungrouped, or multiple columns get grouped/ungrouped at once by using the Group By API. The onGroupingDone event would be raised only once if several columns get grouped at once by calling the groupBy() or clearGrouping() API methods and passing an array as an argument. The event arguments provide the expressions, groupedColumns and ungroupedColumns properties, which contain the ISortingExpression and the IgxColumnComponent related to the grouping/ungrouping operation. Please note that groupedColumns and ungroupedColumns show only the newly changed columns (affected by the last grouping/ungrouping operation), not all columns which are currently grouped/ungrouped. columns.

groupingDone(event: IGroupingDoneEventArgs){
    const expressions = event.expressions;
    //the newly grouped columns
    const groupedColumns = event.groupedColumns;
    //the newly ungrouped columns
    const ungroupedColumns = event.ungroupedColumns;
}
<igx-grid #grid [data]="localData" (onGroupingDone)="groupingDone($event)" [autoGenerate]="true"></igx-grid>
memberof

IgxGridComponent

onPagingDone

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

Emitted when paging is performed. Returns an object consisting of the previous and next pages.

pagingDone(event: IPageEventArgs){
    const paging = event;
}
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onPagingDone)="pagingDone($event)"></igx-grid>
memberof

IgxGridBaseComponent

onRowAdded

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

Emitted when a IgxGridRowComponent is being added to the IgxGridComponent through the API. Returns the data for the new IgxGridRowComponent object.

rowAdded(event: IRowDataEventArgs){
   const rowInfo = event;
}
<igx-grid #grid [data]="localData" (onRowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
memberof

IgxGridBaseComponent

onRowDeleted

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

Emitted when a IgxGridRowComponent is deleted through the IgxGridComponent API. Returns an IRowDataEventArgs object.

rowDeleted(event: IRowDataEventArgs){
   const rowInfo = event;
}
<igx-grid #grid [data]="localData" (onRowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
memberof

IgxGridBaseComponent

onRowEdit

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

An @Output property emitting an event when [rowEditable]="true" & endEdit(true) is called. Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, performing data operations (filtering, sorting, etc.) while editing a row, hitting the Commit button inside of the rowEditingOverlay or hitting the Enter key while editing a cell.

Emits the current row and it's state.

Bind to the event in markup as follows:

<igx-grid #grid3 (onRowEdit)="editDone($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true" [rowEditable]="true">
         <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
         <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
         <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>
     editDone(emitted: { row: IgxGridRowComponent, newValue: any, oldValue: any }): void {
         const editedRow = emitted.row;
         const newValue = emitted.newValue;
         const oldValue = emitted.oldValue;
     }
memberof

IgxGridBaseComponent

onRowEditCancel

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

An @Output property emitting an event 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.

Emits the current row and it's state.

Bind to the event in markup as follows:

<igx-grid #grid3 (onRowEditCancel)="editCancel($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true" [rowEditable]="true">
         <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
         <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
         <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>
     editCancel(emitted: { row: IgxGridRowComponent, newValue: any, oldValue: any }): void {
         const editedRow = emitted.row;
         const cancelValue = emitted.newValue;
         const oldValue = emitted.oldValue;
     }
memberof

IgxGridBaseComponent

onRowEditEnter

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

An @Output property emitting an event when [rowEditable]="true" a row enters edit mode.

Emits the current row and it's state.

Bind to the event in markup as follows:

<igx-grid #grid3 (onRowEditEnter)="editStart($event)" [data]="remote | async" (onSortingDone)="process($event)"
         [primaryKey]="'ProductID'" [rowSelectable]="true" [rowEditable]="true">
         <igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
         <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
         <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>
     editStart(emitted: { row: IgxGridRowComponent, newValue: any, oldValue: any }): void {
         const editedRow = emitted.row;
         const cancelValue = emitted.newValue;
         const oldValue = emitted.oldValue;
     }
memberof

IgxGridComponent

onRowSelectionChange

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

Emitted when IgxGridRowComponent is selected.

<igx-grid #grid (onRowSelectionChange)="onRowClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
public onCellClickChange(e){
    alert("The selected row has been changed!");
}
memberof

IgxGridBaseComponent

onSelection

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

Emitted when IgxGridCellComponent is selected. Returns the IgxGridCellComponent.

<igx-grid #grid (onSelection)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
public onCellSelect(e){
    alert("The cell has been selected!");
}
memberof

IgxGridBaseComponent

onSortingDone

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

Emitted when sorting is performed through the UI. Returns the sorting expression.

<igx-grid #grid [data]="localData" [autoGenerate]="true" (onSortingDone)="sortingDone($event)"></igx-grid>
sortingDone(event: SortingDirection){
    const sortingDirection = event;
}
memberof

IgxGridBaseComponent

onToolbarExporting

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

Emitted when an export process is initiated by the user.

toolbarExporting(event: IGridToolbarExportEventArgs){
    const toolbarExporting = event;
}
memberof

IgxGridBaseComponent

paginationTemplate

paginationTemplate: TemplateRef<any>

You can provide a custom ng-template for the pagination UI of the grid.

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

IgxGridBaseComponent

primaryKey

primaryKey: any

An @Input property that sets the primary key of the IgxGridComponent.

<igx-grid #grid [data]="localData" [showToolbar]="true" [primaryKey]="6" [autoGenerate]="true"></igx-grid>
memberof

IgxGridBaseComponent

selection

selection: IgxSelectionAPIService

summaryService

summaryService: IgxGridSummaryService

toolbar

toolbar: IgxGridToolbarComponent = null

Provides access to the IgxToolbarComponent.

const gridToolbar = this.grid.toolbar;
memberof

IgxGridBaseComponent

toolbarCustomContentTemplate

toolbarCustomContentTemplate: IgxGridToolbarCustomContentDirective

Returns the template which will be used by the toolbar to show custom content.

let customContentTemplate = this.grid.toolbarCustomContentTemplate;
memberof

IgxGridBaseComponent

Accessors

allowFiltering

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

bannerClass

  • get bannerClass(): string

calcPinnedContainerMaxWidth

  • get calcPinnedContainerMaxWidth(): number

columnHiding

  • get columnHiding(): boolean
  • set columnHiding(value: boolean): void
  • Returns whether the column hiding UI for the IgxGridComponent is enabled. By default it is disabled (false).

    let gridColHiding = this.grid.columnHiding;
    memberof

    IgxGridBaseComponent

    Returns boolean

  • Sets whether the column hiding UI for the IgxGridComponent is enabled. In order for the UI to work, you need to enable the toolbar as shown in the example below.

    <igx-grid [data]="Data" [autoGenerate]="true" [showToolbar]="true" [columnHiding]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • value: boolean

    Returns void

columnPinning

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

columnWidth

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

columns

data

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

dataRowList

  • get dataRowList(): QueryList<any>

defaultHeaderGroupMinWidth

  • get defaultHeaderGroupMinWidth(): number

defaultRowHeight

  • get defaultRowHeight(): number

displayDensity

dropAreaMessage

  • get dropAreaMessage(): string
  • set dropAreaMessage(value: string): void
  • An accessor that returns the message displayed inside the GroupBy drop area where columns can be dragged on.

    Returns string

  • An @Input property that sets the message displayed inside the GroupBy drop area where columns can be dragged on. Note: The grid needs to have at least one groupable column in order the GroupBy area to be displayed.

    <igx-grid dropAreaMessage="Drop here to group!">
         <igx-column [groupable]="true" field="ID"></igx-column>
    </igx-grid>
    memberof

    IgxGridComponent

    Parameters

    • value: string

    Returns void

dropAreaVisible

  • get dropAreaVisible(): boolean
  • Returns if the grid's group by drop area is visible.

    const dropVisible = this.grid.dropAreaVisible;
    memberof

    IgxGridComponent

    Returns boolean

emptyFilteredGridMessage

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

emptyGridMessage

  • get emptyGridMessage(): string
  • set emptyGridMessage(value: string): 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[]

filteredData

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

filteredSortedData

  • get filteredSortedData(): any[]

filteringExpressionsTree

filteringLogic

groupAreaTemplate

  • get groupAreaTemplate(): TemplateRef<any>
  • set groupAreaTemplate(template: TemplateRef<any>): void
  • Returns the template reference of the IgxGridComponent's group area.

    const groupAreaTemplate = this.grid.groupAreaTemplate;
    memberof

    IgxGridComponent

    Returns TemplateRef<any>

  • Sets the template reference of the IgxGridComponent's group area.

    this.grid.groupAreaTemplate = myAreaTemplate.
    memberof

    IgxGridComponent

    Parameters

    • template: TemplateRef<any>

    Returns void

groupRowTemplate

  • get groupRowTemplate(): TemplateRef<any>
  • set groupRowTemplate(template: TemplateRef<any>): void
  • Returns the template reference of the IgxGridComponent's group row.

    const groupRowTemplate = this.grid.groupRowTemplate;
    memberof

    IgxGridComponent

    Returns TemplateRef<any>

  • Sets the template reference of the IgxGridComponent's group IgxGridRowComponent.

    this.grid.groupRowTemplate = myRowTemplate.
    memberof

    IgxGridComponent

    Parameters

    • template: TemplateRef<any>

    Returns void

groupingExpansionState

  • Returns a list of expansion states for group rows. Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed. Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array).

    const groupExpState = this.grid.groupingExpansionState;
    memberof

    IgxGridComponent

    Returns IGroupByExpandState[]

  • Sets a list of expansion states for group rows.

         this.grid.groupingExpansionState = [{
         expanded: false,
         hierarchy: [{ fieldName: 'ID', value: 1 }]
      }];
    // You can use DataUtil.getHierarchy(groupRow) to get the group `IgxGridRowComponent` hierarchy.
    memberof

    IgxGridComponent

    Parameters

    Returns void

groupingExpressions

  • Returns the group by state of the IgxGridComponent.

    let groupByState = this.grid.groupingExpressions;
    memberof

    IgxGridComponent

    Returns IGroupingExpression[]

  • Sets the group by state of the IgxGridComponent and emits the onGroupingDone event with the appropriate arguments.

    this.grid.groupingExpressions = [{
        fieldName: "ID",
        dir: SortingDirection.Asc,
        ignoreCase: false
    }];
    memberof

    IgxGridComponent

    Parameters

    Returns void

groupsRowList

  • get groupsRowList(): QueryList<any>

hasColumnGroups

  • get hasColumnGroups(): boolean

hasEditableColumns

  • get hasEditableColumns(): boolean

hasFilterableColumns

  • get hasFilterableColumns(): boolean

hasGroupableColumns

  • get hasGroupableColumns(): boolean
  • Returns if the IgxGridComponent has groupable columns.

    const groupableGrid = this.grid.hasGroupableColumns;
    memberof

    IgxGridComponent

    Returns 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

hideGroupedColumns

  • get hideGroupedColumns(): boolean
  • set hideGroupedColumns(value: boolean): void
  • An @Input property that sets whether the grouped columns should be hidden as well. The default value is "false"

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

    IgxGridComponent

    Returns boolean

  • An @Input property that sets whether the grouped columns should be hidden as well. The default value is "false"

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

    Parameters

    • value: boolean

    Returns void

id

  • get id(): string
  • set id(value: string): void
  • An @Input property that sets the value of the id attribute. If not provided it will be automatically generated.

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

    IgxGridComponent

    Returns string

  • An @Input property that sets the value of the id attribute. If not provided it will be automatically generated.

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

    Parameters

    • value: string

    Returns void

isFirstPage

  • get isFirstPage(): boolean

isLastPage

  • get isLastPage(): boolean

locale

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

nativeElement

  • get nativeElement(): any

page

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

paging

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

perPage

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

pinnedColumns

pinnedColumnsText

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

pinnedWidth

  • get pinnedWidth(): number

resourceStrings

rowEditable

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

rowHeight

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

rowList

  • get rowList(): QueryList<any>

rowSelectable

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

selectedCells

showRowCheckboxes

  • get showRowCheckboxes(): boolean

showToolbar

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

sortingExpressions

summariesRowList

  • get summariesRowList(): QueryList<any>

summaryCalculationMode

summaryPosition

template

  • get template(): TemplateRef<any>

toolbarTitle

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

totalItemCount

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

totalPages

  • get totalPages(): number

totalRecords

  • get totalRecords(): number

totalWidth

  • get totalWidth(): number

transactions

unpinnedAreaMinWidth

  • get unpinnedAreaMinWidth(): number

unpinnedColumns

unpinnedWidth

  • get unpinnedWidth(): number

visibleColumns

width

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

Methods

addRow

  • addRow(data: any, parentID?: any): void
  • Creates a new IgxGridRowComponent and adds the data record to the end of the data source.

    const record = {
        ID: this.grid1.data[this.grid1.data.length - 1].ID + 1,
        Name: this.newRecord
    };
    this.grid1.addRow(record);
    memberof

    IgxGridBaseComponent

    Parameters

    • data: any
    • Optional parentID: any

    Returns void

clearFilter

  • clearFilter(name?: string): void
  • If name is provided, clears the filtering state of the corresponding IgxColumnComponent, otherwise clears the filtering state of all IgxColumnComponents.

    this.grid.clearFilter();
    memberof

    IgxGridBaseComponent

    Parameters

    • Optional name: string

    Returns void

clearGrouping

  • clearGrouping(name?: string | Array<string>): void
  • Clears all grouping in the grid, if no parameter is passed. If a parameter is provided, clears grouping for a particular column or an array of columns.

    this.grid.clearGrouping(); //clears all grouping
    this.grid.clearGrouping("ID"); //ungroups a single column
    this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns

    Parameters

    • Optional name: string | Array<string>

    Returns void

clearSearch

  • clearSearch(): void

clearSort

  • clearSort(name?: string): void
  • If name is provided, clears the sorting state of the corresponding IgxColumnComponent, otherwise clears the sorting state of all IgxColumnComponent.

    this.grid.clearSort();
    memberof

    IgxGridBaseComponent

    Parameters

    • Optional name: string

    Returns void

deleteRow

  • deleteRow(rowSelector: any): void
  • Removes the IgxGridRowComponent and the corresponding data record by primary key. Requires that the primaryKey property is set. The method accept rowSelector as a parameter, which is the rowID.

    this.grid1.deleteRow(0);
    memberof

    IgxGridBaseComponent

    Parameters

    • rowSelector: any

    Returns void

deselectAllRows

  • deselectAllRows(): 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. If you do not provide the customSummary, then the default summary for the column data type will be applied.

    grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);

    Enable summaries for the listed columns.

    grid.enableSummaries('ProductName');
    memberof

    IgxGridBaseComponent

    Parameters

    • Rest ...rest: any[]

    Returns void

endEdit

  • endEdit(commit?: boolean, event?: Event): void
  • Finishes the row transactions on the current row. If commit === true, passes them from the pending state to the data (or transaction service)

    Binding to the event

    <button igxButton (click)="grid.endEdit(true)">Commit Row</button>

    Parameters

    • Default value commit: boolean = true
    • Optional event: Event

    Returns void

filter

filterGlobal

  • filterGlobal(value: any, condition?: any, ignoreCase?: any): void
  • Filters all the IgxColumnComponent in the IgxGridComponent with the same condition.

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

    IgxGridBaseComponent

    Parameters

    • value: any
    • Optional 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. Returns how many times the grid contains the string.

    this.grid.findNext("financial");
    memberof

    IgxGridBaseComponent

    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. Returns how many times the grid contains the string.

    this.grid.findPrev("financial");
    `
    memberof

    IgxGridBaseComponent

    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

getCellByKey

getColumnByName

getHeaderGroupWidth

getPinnedWidth

  • getPinnedWidth(takeHidden?: boolean): number
  • Gets calculated width of the pinned area.

    const pinnedWidth = this.grid.getPinnedWidth();
    memberof

    IgxGridComponent

    Parameters

    • Default value takeHidden: boolean = false

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

    Returns number

getRowByIndex

getRowByKey

groupBy

  • Groups by a new IgxColumnComponent based on the provided expression, or modifies an existing one. Also allows for multiple columns to be grouped at once if an array of ISortingExpression is passed. The onGroupingDone event would get raised only once if this method gets called multiple times with the same arguments.

    this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
    this.grid.groupBy([
    { fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false },
    { fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true },
    { fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false }
    ]);
    memberof

    IgxGridComponent

    Parameters

    Returns void

isExpandedGroup

  • Returns if a group is expanded or not.

    public groupRow: IGroupByRecord;
    const expandedGroup = this.grid.isExpandedGroup(this.groupRow);
    memberof

    IgxGridComponent

    Parameters

    Returns boolean

markForCheck

  • markForCheck(): void

moveColumn

nextPage

  • nextPage(): void

ngDoCheck

  • ngDoCheck(): void

ngOnInit

  • ngOnInit(): void

paginate

  • paginate(val: number): void

pinColumn

previousPage

  • previousPage(): void

reflow

  • reflow(): void

refreshSearch

  • refreshSearch(updateActiveInfo?: boolean): number

selectAllRows

  • selectAllRows(): void

selectRows

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

selectedRows

  • selectedRows(): any[]

sort

toggleAllGroupRows

  • toggleAllGroupRows(): void

toggleColumnVisibility

toggleGroup

  • Toggles the expansion state of a group.

    public groupRow: IGroupByRecord;
    const toggleExpGroup = this.grid.toggleGroup(this.groupRow);
    memberof

    IgxGridComponent

    Parameters

    Returns void

unpinColumn

updateCell

  • updateCell(value: any, rowSelector: any, column: string): void
  • Updates the IgxGridRowComponent and the corresponding data record by primary key. Requires that the primaryKey property is set.

    this.gridWithPK.updateCell('Updated', 1, 'ProductName');
    memberof

    IgxGridBaseComponent

    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, which 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.

    grid.updateRow({
          ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')
      }, 1);
    memberof

    IgxGridBaseComponent

    Parameters

    • value: any
    • rowSelector: any

      correspond to rowID

    Returns void