Class IgxGridBaseComponent

Hierarchy

Implements

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

Constructors

Properties

Accessors

Methods

Object literals

Constructors

constructor

Properties

_destroyed

_destroyed: boolean = false

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

Abstract data

data: any[]

document

document: any

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

Abstract filteredData

filteredData: any[]

filteringService

filteringService: IgxFilteringService

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.

Abstract id

id: string

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'">
         <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" [primaryKey]="'ProductID'">
         <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'">
         <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>

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'" [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'" [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'" [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)="onCellClickChange($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

rowCollapsedIndicatorTemplate

rowCollapsedIndicatorTemplate: TemplateRef<any> = null

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

rowExpandedIndicatorTemplate

rowExpandedIndicatorTemplate: TemplateRef<any> = null

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

selectionService

selectionService: IgxGridSelectionService

shouldGenerate

shouldGenerate: boolean

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

uniqueColumnValuesStrategy

uniqueColumnValuesStrategy: function

An @Input property that 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.

<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>
public columnValuesStrategy = (column: IgxColumnComponent,
                              filteringExpressionsTree: IFilteringExpressionsTree,
                              done: (uniqueValues: any[]) => void) => {
    this.dataService.getColumnData(column, filteringExpressionsTree, uniqueValues => done(uniqueValues));
}
memberof

IgxGridBaseComponent

Type declaration

Accessors

advancedFilteringExpressionsTree

  • Returns the advanced filtering state of IgxGridComponent.

    let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
    memberof

    IgxGridBaseComponent

    Returns IFilteringExpressionsTree

  • Sets the advanced filtering state of the IgxGridComponent.

    const logic = new FilteringExpressionsTree(FilteringLogic.And);
    logic.filteringOperands = [
        {
             condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
             fieldName: 'ID',
             searchVal: 1
        },
        {
             condition: IgxStringFilteringOperand.instance().condition('contains'),
             fieldName: 'CompanyName',
             searchVal: 'a'
        }
    ];
    this.grid.advancedFilteringExpressionsTree = logic;
    memberof

    IgxGridBaseComponent

    Parameters

    Returns void

allowAdvancedFiltering

  • get allowAdvancedFiltering(): boolean
  • set allowAdvancedFiltering(value: boolean): void
  • Returns a value indicating whether the advanced filtering is enabled.

     let filtering = this.grid.allowAdvancedFiltering;
    memberof

    IgxGridBaseComponent

    Returns boolean

  • Sets a value indicating whether the advanced filtering is enabled. By default it's disabled.

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

    IgxGridBaseComponent

    Parameters

    • value: boolean

    Returns void

allowFiltering

  • get allowFiltering(): boolean
  • set allowFiltering(value: boolean): void
  • Returns if the filtering is enabled.

     let filtering = this.grid.allowFiltering;
    memberof

    IgxGridBaseComponent

    Returns boolean

  • Sets if the filtering is enabled. By default it's disabled.

    <igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • value: boolean

    Returns void

bannerClass

  • get bannerClass(): string

calcPinnedContainerMaxWidth

  • get calcPinnedContainerMaxWidth(): number
  • Returns the maximum width of the container for the pinned IgxColumnComponents. The width is 80% of the total grid width.

    const maxPinnedColWidth = this.grid.calcPinnedContainerMaxWidth;
    memberof

    IgxGridBaseComponent

    Returns number

cellSelection

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
  • Returns if the built-in column pinning UI should be shown in the toolbar.

     let colPinning = this.grid.columnPinning;
    memberof

    IgxGridBaseComponent

    Returns boolean

  • Sets if the built-in column pinning UI should be shown in the toolbar. By default it's disabled.

    <igx-grid #grid [data]="localData" [columnPinning]="'true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • value: boolean

    Returns void

columnWidth

  • get columnWidth(): string
  • set columnWidth(value: string): void
  • An @Input property that sets the default width of the IgxGridComponent's columns.

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

    IgxGridBaseComponent

    Returns string

  • An @Input property that sets the default width of the IgxGridComponent's columns.

    <igx-grid #grid [data]="localData" [showToolbar]="true" [columnWidth]="100" [autoGenerate]="true"></igx-grid>

    Parameters

    • value: string

    Returns void

columns

dataLength

  • get dataLength(): any

dataRowList

dataView

  • get dataView(): any[]
  • Returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid.

         const dataView = this.grid.dataView;
    memberof

    IgxGridComponent

    Returns any[]

defaultHeaderGroupMinWidth

  • get defaultHeaderGroupMinWidth(): number
  • Returns the IgxGridHeaderGroupComponent's minimum allowed width. Used internally for restricting header group component width. The values below depend on the header cell default right/left padding values.

    memberof

    IgxGridBaseComponent

    Returns number

defaultRowHeight

  • get defaultRowHeight(): number

defaultSummaryHeight

  • get defaultSummaryHeight(): number

displayDensity

emptyFilteredGridMessage

  • get emptyFilteredGridMessage(): string
  • set emptyFilteredGridMessage(value: string): void
  • An accessor that returns the message displayed when there are no records and the grid is filtered.

    Returns string

  • An @Input property that sets the message displayed when there are no records and the grid is filtered.

    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • value: string

    Returns void

emptyGridMessage

  • get emptyGridMessage(): string
  • set emptyGridMessage(value: string): void
  • An accessor that returns the message displayed when there are no records.

    Returns string

  • An @Input property that sets the message displayed when there are no records.

    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • value: string

    Returns void

exportCsv

  • get exportCsv(): boolean
  • set exportCsv(newValue: boolean): void
  • Returns whether the option for exporting to CSV is enabled or disabled.

    const exportCsv = this.grid.exportCsv;
    memberof

    IgxGridBaseComponent

    Returns boolean

  • Enable or disable the option for exporting to CSV.

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

    IgxGridBaseComponent

    Parameters

    • newValue: boolean

    Returns void

exportCsvText

  • get exportCsvText(): string
  • set exportCsvText(newValue: string): void
  • Returns the textual content for the CSV export button.

    const csvText = this.grid.exportCsvText;
    memberof

    IgxGridBaseComponent

    Returns string

  • Sets the textual content for the CSV export button.

    <igx-grid [exportCsvText]="'My Csv Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportExcel]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • newValue: string

    Returns void

exportExcel

  • get exportExcel(): boolean
  • set exportExcel(newValue: boolean): void
  • Returns whether the option for exporting to MS Excel is enabled or disabled.

    cosnt excelExporter = this.grid.exportExcel;
    memberof

    IgxGridBaseComponent

    Returns boolean

  • Enable or disable the option for exporting to MS Excel.

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

    IgxGridBaseComponent

    Parameters

    • newValue: boolean

    Returns void

exportExcelText

  • get exportExcelText(): string
  • set exportExcelText(newValue: string): void
  • Returns the textual content for the MS Excel export button.

    const excelText = this.grid.exportExcelText;
    memberof

    IgxGridBaseComponent

    Returns string

  • Sets the textual content for the MS Excel export button.

    <igx-grid [exportExcelText]="'My Excel Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • newValue: string

    Returns void

exportText

  • get exportText(): string
  • set exportText(newValue: string): void
  • Returns the textual content for the main export button.

    const exportText = this.grid.exportText;
    memberof

    IgxGridBaseComponent

    Returns string

  • Sets the textual content for the main export button.

    <igx-grid [data]="localData" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • newValue: string

    Returns void

filterCellList

  • get filterCellList(): IgxGridFilteringCellComponent[]
  • A list of all IgxGridFilteringCellComponent.

    const filterCells = this.grid.filterCellList;
    memberof

    IgxGridBaseComponent

    Returns IgxGridFilteringCellComponent[]

filterMode

filterStrategy

filteredSortedData

  • get filteredSortedData(): any[]
  • set filteredSortedData(value: any[]): void
  • Returns an array containing the filtered sorted data.

    const filteredSortedData = this.grid1.filteredSortedData;
    memberof

    IgxGridBaseComponent

    Returns any[]

  • Returns an array containing the filtered sorted data.

    const filteredSortedData = this.grid1.filteredSortedData;

    Parameters

    • value: any[]

    Returns void

filteringExpressionsTree

  • Returns the filtering state of IgxGridComponent.

    let filteringExpressionsTree = this.grid.filteringExpressionsTree;
    memberof

    IgxGridBaseComponent

    Returns IFilteringExpressionsTree

  • Sets the filtering state of the IgxGridComponent.

    const logic = new FilteringExpressionsTree(FilteringLogic.And, "ID");
    logic.filteringOperands = [
        {
             condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
             fieldName: 'ID',
             searchVal: 1
        }
    ];
    this.grid.filteringExpressionsTree = (logic);

    Two-way data binding.

    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    Returns void

filteringLogic

  • Sets the filtering logic of the IgxGridComponent. The default is AND.

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

    Returns FilteringLogic

  • Sets the filtering logic of the IgxGridComponent. The default is AND.

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

    IgxGridBaseComponent

    Parameters

    Returns void

hasColumnGroups

  • get hasColumnGroups(): boolean
  • Returns if the IgxGridComponent has column groups.

    const groupGrid = this.grid.hasColumnGroups;
    memberof

    IgxGridBaseComponent

    Returns boolean

hasColumnLayouts

  • get hasColumnLayouts(): boolean
  • Returns if the IgxGridComponent has column layouts for multi-row layout definition.

    const layoutGrid = this.grid.hasColumnLayouts;
    memberof

    IgxGridBaseComponent

    Returns boolean

hasEditableColumns

  • get hasEditableColumns(): boolean
  • Returns if the IgxGridComponent has editable columns.

    const editableGrid = this.grid.hasEditableColumns;
    memberof

    IgxGridBaseComponent

    Returns boolean

hasFilterableColumns

  • get hasFilterableColumns(): boolean
  • Returns if the IgxGridComponent has fiterable columns.

    const filterableGrid = this.grid.hasFilterableColumns;
    memberof

    IgxGridBaseComponent

    Returns boolean

hasMovableColumns

  • get hasMovableColumns(): boolean
  • Returns if the IgxGridComponent has moveable columns.

    const movableGrid = this.grid.hasMovableColumns;
    memberof

    IgxGridBaseComponent

    Returns boolean

hasSortableColumns

  • get hasSortableColumns(): boolean
  • Returns if the IgxGridComponent has sortable columns.

    const sortableGrid = this.grid.hasSortableColumns;
    memberof

    IgxGridBaseComponent

    Returns boolean

hasSummarizedColumns

  • get hasSummarizedColumns(): boolean
  • Returns if the IgxGridComponent has summarized columns.

    const summarizedGrid = this.grid.hasSummarizedColumns;
    memberof

    IgxGridBaseComponent

    Returns boolean

headerCellList

  • get headerCellList(): IgxGridHeaderComponent[]
  • A list of all IgxGridHeaderComponent.

    const headers = this.grid.headerCellList;
    memberof

    IgxGridBaseComponent

    Returns IgxGridHeaderComponent[]

headerGroupsList

  • get headerGroupsList(): IgxGridHeaderGroupComponent[]
  • A list of all IgxGridHeaderGroupComponent.

    const headerGroupsList = this.grid.headerGroupsList;
    memberof

    IgxGridBaseComponent

    Returns IgxGridHeaderGroupComponent[]

headerWidth

  • get headerWidth(): number
  • Returns the width of the header of the IgxGridComponent.

    let gridHeaderWidth = this.grid.headerWidth;
    memberof

    IgxGridBaseComponent

    Returns number

height

  • get height(): string
  • set height(value: string): void
  • Returns the height of the IgxGridComponent.

    let gridHeight = this.grid.height;
    memberof

    IgxGridBaseComponent

    Returns string

  • Sets the height of the IgxGridComponent.

    <igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • value: string

    Returns void

hiddenColumnsCount

  • get hiddenColumnsCount(): number

hiddenColumnsText

  • get hiddenColumnsText(): string
  • set hiddenColumnsText(value: string): void
  • Returns the text to be displayed inside the toggle button for the built-in column hiding UI of theIgxColumnComponent.

    const hiddenColText = this.grid.hiddenColumnsText;
    memberof

    IgxGridBaseComponent

    Returns string

  • Sets the text to be displayed inside the toggle button for the built-in column hiding UI of theIgxColumnComponent.

    <igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • value: string

    Returns void

hideRowSelectors

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

isFirstPage

  • get isFirstPage(): boolean

isHorizontalScrollHidden

  • get isHorizontalScrollHidden(): boolean

isLastPage

  • get isLastPage(): boolean

isLoading

  • get isLoading(): boolean
  • set isLoading(value: boolean): void
  • An accessor that returns whether the grid is showing loading indicator.

    Returns boolean

  • An @Input property that sets whether the grid is going to show loading indicator.

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

    IgxGridBaseComponent

    Parameters

    • value: boolean

    Returns void

locale

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

nativeElement

  • get nativeElement(): any
  • Returns the native element of the IgxGridComponent.

    const nativeEl = this.grid.nativeElement.
    memberof

    IgxGridBaseComponent

    Returns any

outerWidth

  • get outerWidth(): number

page

  • get page(): number
  • set page(val: number): void
  • Returns the current page index.

    let gridPage = this.grid.page;
    memberof

    IgxGridBaseComponent

    Returns number

  • Sets the current page index.

    <igx-grid #grid [data]="Data" [paging]="true" [page]="5" [autoGenerate]="true"></igx-grid>

    Two-way data binding.

    <igx-grid #grid [data]="Data" [paging]="true" [(page)]="model.page" [autoGenerate]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • val: number

    Returns void

paging

  • get paging(): boolean
  • set paging(value: boolean): void
  • Returns whether the paging feature is enabled/disabled. The default state is disabled (false).

    const paging = this.grid.paging;
    memberof

    IgxGridBaseComponent

    Returns boolean

  • Enables/Disables the paging feature.

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

    IgxGridBaseComponent

    Parameters

    • value: boolean

    Returns void

perPage

  • get perPage(): number
  • set perPage(val: number): void
  • Returns the number of visible items per page of the IgxGridComponent. The default is 15.

    let itemsPerPage = this.grid.perPage;

    Two-way data binding.

    <igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Returns number

  • Sets the number of visible items per page of the IgxGridComponent.

    <igx-grid #grid [data]="Data" [paging]="true" [perPage]="5" [autoGenerate]="true"></igx-grid>

    Two-way data binding.

    <igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • val: number

    Returns void

pinnedColumns

pinnedColumnsText

  • get pinnedColumnsText(): string
  • set pinnedColumnsText(value: string): void
  • Returns the text to be displayed inside the toggle button for the built-in column pinning UI of theIgxColumnComponent.

    const pinnedText = this.grid.pinnedColumnsText;
    memberof

    IgxGridBaseComponent

    Returns string

  • Sets the text to be displayed inside the toggle button for the built-in column pinning UI of theIgxColumnComponent.

    <igx-grid [pinnedColumnsText]="'PinnedCols Text" [data]="data" [width]="'100%'" [height]="'500px'"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • value: string

    Returns void

pinnedWidth

  • get pinnedWidth(): number
  • Returns the current width of the container for the pinned IgxColumnComponents.

    const pinnedWidth = this.grid.getPinnedWidth;
    memberof

    IgxGridBaseComponent

    Returns number

resourceStrings

rowDraggable

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

rowEditable

  • get rowEditable(): boolean
  • set rowEditable(val: boolean): void
  • Sets whether the IgxGridRowComponent is editable. By default it is set to false.

    let rowEditable = this.grid.rowEditable;
    memberof

    IgxGridBaseComponent

    Returns boolean

  • Sets whether rows can be edited.

    <igx-grid #grid [showToolbar]="true" [rowEditable]="true" [primaryKey]="'ProductID'" [columnHiding]="true"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • val: boolean

    Returns void

rowHeight

  • get rowHeight(): any
  • set rowHeight(value: any): void
  • Returns the row height.

    const rowHeight = this.grid.rowHeight;
    memberof

    IgxGridBaseComponent

    Returns any

  • Sets the row height.

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

    IgxGridBaseComponent

    Parameters

    • value: any

    Returns void

rowList

  • get rowList(): QueryList<any>

rowSelectable

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

rowSelection

scrollWidth

  • get scrollWidth(): number

selectedCells

showToolbar

  • get showToolbar(): boolean
  • set showToolbar(newValue: boolean): void
  • Returns whether the IgxGridComponent's toolbar is shown or hidden.

    const toolbarGrid = this.grid.showToolbar;
    memberof

    IgxGridBaseComponent

    Returns boolean

  • Shows or hides the IgxGridComponent's toolbar.

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

    IgxGridBaseComponent

    Parameters

    • newValue: boolean

    Returns void

sortingExpressions

  • Returns the sorting state of the IgxGridComponent.

    const sortingState = this.grid.sortingExpressions;

    Two-way data binding.

    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
    memberof

    IgxGridBaseComponent

    Returns ISortingExpression[]

  • Sets the sorting state of the IgxGridComponent.

    this.grid.sortingExpressions = [{
        fieldName: "ID",
        dir: SortingDirection.Desc,
        ignoreCase: true
    }];

    Two-way data binding.

    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    Returns void

summariesRowList

  • get summariesRowList(): QueryList<any>

summaryCalculationMode

summaryPosition

toolbarCustomContentTemplate

toolbarTitle

  • get toolbarTitle(): string
  • set toolbarTitle(newValue: string): void
  • Returns the toolbar's title.

    const toolbarTitle  = this.grid.toolbarTitle;
    memberof

    IgxGridBaseComponent

    Returns string

  • Sets the toolbar's title.

    <igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [toolbarTitle]="'My Grid'"></igx-grid>
    memberof

    IgxGridBaseComponent

    Parameters

    • newValue: string

    Returns void

totalPages

  • get totalPages(): number

totalRecords

  • get totalRecords(): number
  • Returns the total number of records. Only functions when paging is enabled.

    const totalRecords = this.grid.totalRecords;
    memberof

    IgxGridBaseComponent

    Returns number

totalWidth

  • get totalWidth(): number

transactions

unpinnedAreaMinWidth

  • get unpinnedAreaMinWidth(): number
  • Returns the minimum width of the container for the unpinned IgxColumnComponents. The width is 20% of the total grid width.

    const minUnpinnedColWidth = this.grid.unpinnedAreaMinWidth;
    memberof

    IgxGridBaseComponent

    Returns number

unpinnedColumns

unpinnedWidth

  • get unpinnedWidth(): number
  • Returns the current width of the container for the unpinned IgxColumnComponents.

    const unpinnedWidth = this.grid.getUnpinnedWidth;
    memberof

    IgxGridBaseComponent

    Returns number

visibleColumns

width

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

Methods

_setupListeners

  • _setupListeners(): void

_setupRowObservers

  • _setupRowObservers(): void

_setupServices

  • _setupServices(): void

_zoneBegoneListeners

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

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

closeAdvancedFilteringDialog

  • closeAdvancedFilteringDialog(applyChanges: boolean): 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(onlyFilterData?: boolean): void
  • Deselects all rows Note: 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.

    this.grid.deselectAllRows();
    memberof

    IgxGridBaseComponent

    Parameters

    • Default value onlyFilterData: boolean = true

    Returns void

deselectRows

  • deselectRows(rowIDs: any[]): void

disableSummaries

  • disableSummaries(...rest: any[]): void
  • Disable summaries for the specified column.

    grid.disableSummaries('ProductName');

    Disable summaries for the listed columns.

    grid.disableSummaries([{ fieldName: 'ProductName' }]);
    memberof

    IgxGridBaseComponent

    Parameters

    • Rest ...rest: any[]

    Returns 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

getCellByColumn

getCellByKey

  • Returns an IgxGridCellComponent object by the specified primary key and column field. Requires that the primaryKey property is set.

    grid.getCellByKey(1, 'index');
    memberof

    IgxGridBaseComponent

    Parameters

    • rowSelector: any

      match any rowID

    • columnField: string

    Returns IgxGridCellComponent

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[]
  • Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...]. 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[]

getSelectedRanges

hasHorizontalScroll

  • hasHorizontalScroll(): boolean

hasVerticalSroll

  • hasVerticalSroll(): boolean

isDefined

  • isDefined(arg: any): 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
  • Goes to the next page of the IgxGridComponent, if the grid is not already at the last page.

    this.grid1.nextPage();
    memberof

    IgxGridBaseComponent

    Returns void

ngDoCheck

  • ngDoCheck(): void

notifyChanges

  • notifyChanges(repaint?: boolean): void

openAdvancedFilteringDialog

  • openAdvancedFilteringDialog(): void

openRowOverlay

  • openRowOverlay(id: any): void

paginate

  • paginate(val: number): void

paginatorClassName

  • paginatorClassName(): string

pinColumn

previousPage

  • previousPage(): void
  • Goes to the previous page of the IgxGridComponent, if the grid is not already at the first page.

    this.grid1.previousPage();
    memberof

    IgxGridBaseComponent

    Returns void

reflow

  • reflow(): void
  • Recalculates grid width/height dimensions. Should be run when changing DOM elements dimentions manually that affect the grid's size.

    this.grid.reflow();
    memberof

    IgxGridBaseComponent

    Returns void

refreshSearch

  • refreshSearch(updateActiveInfo?: boolean): number
  • Reapplies the existing search. Returns how many times the grid contains the last search.

    this.grid.refreshSearch();
    memberof

    IgxGridBaseComponent

    Parameters

    • Optional updateActiveInfo: boolean

    Returns number

selectAllRows

  • selectAllRows(onlyFilterData?: boolean): void
  • Selects all rows Note: 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.

    this.grid.selectAllRows();
    this.grid.selectAllRows(false);
    memberof

    IgxGridBaseComponent

    Parameters

    • Default value onlyFilterData: boolean = true

    Returns void

selectRange

selectRows

  • selectRows(rowIDs: any[], clearCurrentSelection?: boolean): void
  • Select specified rows by ID.

    this.grid.selectRows([1,2,5], true);
    memberof

    IgxGridBaseComponent

    Parameters

    • rowIDs: any[]
    • Optional clearCurrentSelection: boolean

      if true clears the current selection

    Returns void

selectedRows

  • selectedRows(): any[]
  • Get current selection state. Returns an array with selected rows' IDs (primaryKey or rowData)

    const selectedRows = this.grid.selectedRows();
    memberof

    IgxGridBaseComponent

    Returns any[]

setSelection

sort

  • Sort a single IgxColumnComponent. Sort the IgxGridComponent's IgxColumnComponent based on the provided array of sorting expressions.

    this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
    memberof

    IgxGridBaseComponent

    Parameters

    Returns void

toggleColumnVisibility

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.