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
  • OnInit
  • OnChanges
  • OnDestroy
  • AfterContentInit
  • AfterViewInit
  • IGridDataBindable
  • OnInit
  • DoCheck
  • AfterContentInit

Constructors

Properties

Accessors

Methods

Object literals

Constructors

constructor

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

colResizingService

colResizingService: IgxColumnResizingService

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

crudService

crudService: IgxGridCRUDService

document

document: any

dragIndicatorIconTemplate

dragIndicatorIconTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering the row drag indicator icon

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.dragIndicatorIconTemplate = myCustomTemplate;
<!-- Set in markup -->
 <igx-grid #grid>
     ...
     <ng-template igxDragIndicatorIcon>
         <igx-icon fontSet="material">info</igx-icon>
     </ng-template>
 </igx-grid>

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.

<igx-grid [dropAreaTemplate]="dropAreaRef">
     <igx-column [groupable]="true" field="ID"></igx-column>
</igx-grid>
<ng-template #myDropArea>
     <span> Custom drop area! </span>
</ng-template>
@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

loadingGridDefaultTemplate

loadingGridDefaultTemplate: TemplateRef<any>

loadingGridTemplate

loadingGridTemplate: TemplateRef<any>

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

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

IgxGridBaseComponent

navigation

navigation: IgxGridNavigationService

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. Event is fired after editing is completed, when the cell is exiting edit mode. This event is cancelable.

args: IGridEditEventArgs = { cancel: bool, cellID: { columnID: int, rowID: int, rowIndex: int } newValue: object, oldValue: object, rowID: int }

editDone(event: IGridEditEventArgs){
   const value: IgxColumnComponent = event.newValue;
}
<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 (e.g. Esc key was pressed). This event is cancelable.

args: IGridEditEventArgs = { cancel: bool, cellID: { columnID: int, rowID: int, rowIndex: int } newValue: object, oldValue: object, rowID: int }

editCancel(event: IGridEditEventArgs){
   const rowID: IgxColumnComponent = event.rowID;
}
<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. This event is cancelable.

args: IGridEditEventArgs = { cancel: bool, cellID: { columnID: int, rowID: int, rowIndex: int } oldValue: object, rowID: int }

editStart(event: IGridEditEventArgs){
   const value: IgxColumnComponent = event.newValue;
}
<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.

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

onGridCopy

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

Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [clipboardOptions]{@link IgxGridBaseComponent#clipboardOptions}.

onGridKeydown

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

Emitted when keydown is triggered over element inside grid's body. 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.

customKeydown(args: IGridKeydownEventArgs) {
 const keydownEvent = args.event;
}
 <igx-grid (onGridKeydown)="customKeydown($event)"></igx-grid>

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

onRangeSelection

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

Emitted when making a range selection either through drag selection or through keyboard selection.

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

onRowDragEnd

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

Emitted when dropping a row. Return the dropped row.

onRowDragStart

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

Emitted when start dragging a row. Return the dragged row.

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

args: IGridEditEventArgs = { cancel: bool, newValue: , oldValue: , rowID: int }

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(event: IGridEditEventArgs) {
         const originalRowObj = event.oldValue;
         const updatedRowObj = event.newValue;
         const cancelValue = event.cancel;
         const rowID = event.rowID;
     }
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. This event is cancelable.

args: IGridEditEventArgs = { cancel: bool, newValue: , oldValue: , rowID: int }

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 originalRowObj = event.oldValue;
         const updatedRowObj = event.newValue;
         const cancelValue = event.cancel;
         const rowID = event.rowID;
     }
memberof

IgxGridBaseComponent

onRowEditEnter

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

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

args: IGridEditEventArgs = { cancel: bool, oldValue: , rowID: int }

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(event: IGridEditEventArgs) {
         const editedRowObj = event.oldValue;
         const cancelValue = event.cancel;
         const rowID = event.rowID;
     }
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]="'ProductID'" [autoGenerate]="true"></igx-grid>
memberof

IgxGridBaseComponent

selection

selection: IgxSelectionAPIService

selectionService

selectionService: IgxGridSelectionService

shouldGenerate

shouldGenerate: boolean

A property that allows the columns to be auto-generated once again after the initialization of the grid. 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.

 this.grid.shouldGenerate = true;
 this.remoteData = this.remoteService.remoteData;

summaryService

summaryService: IgxGridSummaryService

toolbar

toolbar: IgxGridToolbarComponent = null

Provides access to the IgxToolbarComponent.

const gridToolbar = this.grid.toolbar;
memberof

IgxGridBaseComponent

toolbarCustomContentTemplates

toolbarCustomContentTemplates: QueryList<IgxGridToolbarCustomContentDirective>

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

dataLength

  • get dataLength(): any

dataRowList

defaultHeaderGroupMinWidth

  • get defaultHeaderGroupMinWidth(): number

defaultRowHeight

  • get defaultRowHeight(): number

defaultSummaryHeight

  • get defaultSummaryHeight(): 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[]

filterMode

filteredData

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

filteredSortedData

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

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

hasColumnLayouts

  • get hasColumnLayouts(): 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

isHorizontalScrollHidden

  • get isHorizontalScrollHidden(): 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

onFocusChange

outerWidth

  • get outerWidth(): number

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

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>

rowSelectable

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

scrollWidth

  • get scrollWidth(): number

selectedCells

showDragIcons

  • get showDragIcons(): boolean

showRowCheckboxes

  • get showRowCheckboxes(): boolean

showToolbar

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

sortingExpressions

summariesRowList

  • get summariesRowList(): QueryList<any>

summaryCalculationMode

summaryPosition

toolbarCustomContentTemplate

toolbarTitle

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

totalItemCount

  • get totalItemCount(): number
  • set totalItemCount(count: number): void
  • Returns the total number of records in the data source. Works only with remote grid virtualization.

    const itemCount = this.grid1.totalItemCount;
    memberof

    IgxGridComponent

    Returns number

  • Sets the total number of records in the data source. This property is required for remote grid virtualization to function when it is bound to remote data.

    this.grid1.totalItemCount = 55;
    memberof

    IgxGridComponent

    Parameters

    • count: number

    Returns 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

_setupListeners

  • _setupListeners(): void

_setupServices

  • _setupServices(): void

addRow

  • addRow(data: 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

    Returns void

clearCellSelection

  • clearCellSelection(): 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

columnToVisibleIndex

  • columnToVisibleIndex(field: string | number): number

copyHandlerIE

  • copyHandlerIE(): 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

dragScroll

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

endRowTransaction

  • endRowTransaction(commit: boolean, row: IgxRow): 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
    • 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

fullyExpandGroup

  • Expands the specified group and all of its parent groups.

    public groupRow: IGroupByRecord;
    this.grid.fullyExpandGroup(this.groupRow);
    memberof

    IgxGridComponent

    Parameters

    Returns void

getCellByColumn

getCellByKey

getColumnByName

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. You can pass callback function as a third parameter of getPreviousCell method. The callback function accepts IgxColumnComponent as a param

     const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);
    memberof

    IgxGridBaseComponent

    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
  • Gets calculated width of the pinned area.

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

    IgxGridBaseComponent

    Parameters

    • Default value takeHidden: boolean = false

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

    Returns number

getPreviousCell

  • getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback?: function): ICellPosition
  • Returns ICellPosition which defines the previous cell, according to the current position, that match specific criteria. You can pass callback function as a third parameter of getPreviousCell method. The callback function accepts IgxColumnComponent as a param

     const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);
    memberof

    IgxGridBaseComponent

    Parameters

    • currRowIndex: number
    • curVisibleColIndex: number
    • Default value callback: function = null
        • (IgxColumnComponent: any): boolean
        • Parameters

          • IgxColumnComponent: any

          Returns boolean

    Returns ICellPosition

getRowByIndex

getRowByKey

getSelectedData

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

getSelectedRanges

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

hasHorizontalScroll

  • hasHorizontalScroll(): boolean

hasVerticalSroll

  • hasVerticalSroll(): boolean

isDefined

  • isDefined(arg: any): boolean

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

navigateTo

  • navigateTo(rowIndex: number, visibleColIndex?: number, cb?: Function): void
  • This method allows you to navigate to a position in the grid based on provided rowindex and visibleColumnIndex, also to execute a custom logic over the target element, through a callback function that accepts { targetType: GridKeydownTargetType, target: Object }

     this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });
    memberof

    IgxGridBaseComponent

    Parameters

    • rowIndex: number
    • Default value visibleColIndex: number = -1
    • Default value cb: Function = null

    Returns void

nextPage

  • nextPage(): void

ngDoCheck

  • ngDoCheck(): void

ngOnChanges

  • ngOnChanges(changes: SimpleChanges): void

ngOnInit

  • ngOnInit(): void

openRowOverlay

  • openRowOverlay(id: any): void

paginate

  • paginate(val: number): void

paginatorClassName

  • paginatorClassName(): string

paginatorSelectDisplayDensity

  • paginatorSelectDisplayDensity(): string

pinColumn

previousPage

  • previousPage(): void

reflow

  • reflow(): void

refreshSearch

  • refreshSearch(updateActiveInfo?: boolean): number

selectAllRows

  • selectAllRows(): void

selectRange

selectRows

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

selectedRows

  • selectedRows(): any[]

setSelection

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

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.