Interface representing a grid type. It is essentially the blueprint to a grid object. Contains definitions of properties and methods, relevant to a grid Extends IGridDataBindable

Constructors

Section titled "Constructors"

IgxGridBaseDirective

new IgxGridBaseDirective(): IgxGridBaseDirective

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3479

Returns IgxGridBaseDirective

Properties

Section titled "Properties"

activeNodeChange

Section titled "activeNodeChange"

Emitted when the active node is changed.

 
activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1061

Example

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

addRowEmptyTemplate

Section titled "addRowEmptyTemplate"

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

 
addRowEmptyTemplate: TemplateRef<void>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:257

Example

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

advancedFilteringExpressionsTreeChange

Section titled "advancedFilteringExpressionsTreeChange"

Emitted after advanced filtering is performed.

 
advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:374

Remarks

Returns the advanced filtering expressions tree.

Example

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

autoGenerate

Section titled "autoGenerate"

Gets/Sets whether to auto-generate the columns.

 
autoGenerate: boolean = false

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:200

Remarks

The default value is false. When set to true, it will override all columns declared through code or in markup.

Example

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

autoGenerateExclude

Section titled "autoGenerateExclude"

Gets/Sets a list of property keys to be excluded from the generated column collection

 
autoGenerateExclude: string[] = []

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:217

Remarks

The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their hidden property.

Example

<igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid>
const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]

cdr

Section titled "cdr"

Provides change detection functionality. A change-detection tree collects all views that are to be checked for changes. The property cannot be changed (readonly)

 
cdr: ChangeDetectorRef

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:156

cellClick

Section titled "cellClick"

Emitted when a cell is clicked.

 
cellClick: EventEmitter<IGridCellEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:488

Remarks

Returns the IgxGridCell.

Example

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

cellEdit

Section titled "cellEdit"

Emitted when cell has been edited.

 
cellEdit: EventEmitter<IGridEditEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:634

Remarks

Event is fired after editing is completed, when the cell is exiting edit mode. This event is cancelable.

Example

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

cellEditDone

Section titled "cellEditDone"

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

 
cellEditDone: EventEmitter<IGridEditDoneEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:647

Example

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

cellEditEnter

Section titled "cellEditEnter"

Emitted when cell enters edit mode.

 
cellEditEnter: EventEmitter<IGridEditEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:607

Remarks

This event is cancelable.

Example

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

cellEditExit

Section titled "cellEditExit"

Emitted when cell exits edit mode.

 
cellEditExit: EventEmitter<IGridEditDoneEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:619

Example

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

childrenResolved

Section titled "childrenResolved"

Emitted when content children are resolved and collections in grid are updated.

 
childrenResolved: EventEmitter<void>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1017

clipboardOptions

Section titled "clipboardOptions"

Controls the copy behavior of the grid.

 
clipboardOptions: IClipboardOptions

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:329

columnInit

Section titled "columnInit"

Emitted when a column is initialized.

 
columnInit: EventEmitter<IgxColumnComponent>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:726

Remarks

Returns the column object.

Example

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

columnMoving

Section titled "columnMoving"

Emitted during the column moving operation.

 
columnMoving: EventEmitter<IColumnMovingEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:931

Remarks

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

Example

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

columnMovingEnd

Section titled "columnMovingEnd"

Emitted when column moving ends.

 
columnMovingEnd: EventEmitter<IColumnMovingEndEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:944

Remarks

Returns the source and target IgxColumnComponent objects.

Example

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

columnMovingStart

Section titled "columnMovingStart"

Emitted when column moving starts.

 
columnMovingStart: EventEmitter<IColumnMovingStartEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:918

Remarks

Returns the moved IgxColumnComponent object.

Example

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

columnPin

Section titled "columnPin"

Emitted before IgxColumnComponent is pinned.

 
columnPin: EventEmitter<IPinColumnCancellableEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:576

Remarks

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

Example

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

columnPinned

Section titled "columnPinned"

Emitted after IgxColumnComponent is pinned.

 
columnPinned: EventEmitter<IPinColumnEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:593

Remarks

The index that the column is inserted at may be changed through the insertAtIndex property.

Example

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

columnResized

Section titled "columnResized"

Emitted after column is resized.

 
columnResized: EventEmitter<IColumnResizeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:854

Remarks

Returns the IgxColumnComponent object's old and new width.

Example

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

columnSelectionChanging

Section titled "columnSelectionChanging"

Emitted when IgxColumnComponent is selected.

 
columnSelectionChanging: EventEmitter<IColumnSelectionEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:559

Example

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

columnVisibilityChanged

Section titled "columnVisibilityChanged"

Emitted after column visibility is changed.

 
columnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:905

Remarks

Args: { column: IgxColumnComponent, newValue: boolean }

Example

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

columnVisibilityChanging

Section titled "columnVisibilityChanging"

Emitted before column visibility is changed.

 
columnVisibilityChanging: EventEmitter<IColumnVisibilityChangingEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:892

Remarks

Args: { column: any, newValue: boolean }

Example

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

contextMenu

Section titled "contextMenu"

Emitted when a cell or row is right clicked.

 
contextMenu: EventEmitter<IGridContextMenuEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:866

Remarks

Returns the IgxGridCell object if the immediate context menu target is a cell or an IgxGridRow otherwise.

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

data

Section titled "data" 
data: any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3328

dataChanged

Section titled "dataChanged"

Emitted after the grid's data view is changed because of a data operation, rebinding, etc.

 
dataChanged: EventEmitter<IForOfDataChangeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1131

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>

dataChanging

Section titled "dataChanging"

Emitted before the grid's data view is changed because of a data operation, rebinding, etc.

 
dataChanging: EventEmitter<IForOfDataChangeEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1120

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>

doubleClick

Section titled "doubleClick"

Emitted when a cell is double clicked.

 
doubleClick: EventEmitter<IGridCellEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:879

Remarks

Returns the IgxGridCell object.

Example

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

expansionStatesChange

Section titled "expansionStatesChange"

Emitted when the rows are expanded or collapsed.

 
expansionStatesChange: EventEmitter<Map<any, boolean>>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:997

Example

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

filtering

Section titled "filtering"

Emitted before filtering expressions are applied.

 
filtering: EventEmitter<IFilteringEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:772

Remarks

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

Example

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

filteringDone

Section titled "filteringDone"

Emitted after filtering is performed through the UI.

 
filteringDone: EventEmitter<IFilteringExpressionsTree>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:785

Remarks

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

Example

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

filteringExpressionsTreeChange

Section titled "filteringExpressionsTreeChange"

Emitted after filtering is performed.

 
filteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:360

Remarks

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

Example

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

formGroupCreated

Section titled "formGroupCreated"

Emitted when formGroup is created on edit of row/cell.

 
formGroupCreated: EventEmitter<IGridFormGroupCreatedEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:513

Example

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

gridAPI

Section titled "gridAPI"

Represents the grid service type providing API methods for the grid

 
gridAPI: GridServiceType

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:149

gridCopy

Section titled "gridCopy"

Emitted when a copy operation is executed.

 
gridCopy: EventEmitter<IGridClipboardEvent>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:985

Remarks

Fired only if copy behavior is enabled through the [clipboardOptions]IgxGridBaseDirective#clipboardOptions.

gridKeydown

Section titled "gridKeydown"

Emitted when keydown is triggered over element inside grid's body.

 
gridKeydown: EventEmitter<IGridKeydownEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:958

Remarks

This event is fired only if the key combination is supported in the grid. Return the target type, target object and the original event. This event is cancelable.

Example

<igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>

gridScroll

Section titled "gridScroll"

Emitted when grid is scrolled horizontally/vertically.

 
gridScroll: EventEmitter<IGridScrollEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:386

Example

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

moving

Section titled "moving"

Controls whether columns moving is enabled in the grid.

 
moving: boolean = false

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:224

Section titled "navigation" 
navigation: IgxGridNavigationService

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:162

rangeSelected

Section titled "rangeSelected"

Emitted when making a range selection.

 
rangeSelected: EventEmitter<GridSelectionRange>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1099

Remarks

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

rendered

Section titled "rendered"

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

 
rendered: EventEmitter<boolean>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1103

rowAdd

Section titled "rowAdd"

Emmited just before the newly added row is commited.

 
rowAdd: EventEmitter<IRowDataCancelableEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:841

Remarks

This event is cancelable. Returns an IRowDataCancellableEventArgs` object.

Example

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

rowAdded

Section titled "rowAdded"

Emitted when a row is added.

 
rowAdded: EventEmitter<IRowDataEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:799

Remarks

Returns the data for the new IgxGridRowComponent object.

Example

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

rowClasses

Section titled "rowClasses"

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

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

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:405

rowClick

Section titled "rowClick"

Emitted when a row is clicked.

 
rowClick: EventEmitter<IGridRowEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:501

Remarks

Returns the IgxGridRow.

Example

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

rowDelete

Section titled "rowDelete"

Emmited when deleting a row.

 
rowDelete: EventEmitter<IRowDataCancelableEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:827

Remarks

This event is cancelable. Returns an IRowDataCancellableEventArgs` object.

Example

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

rowDeleted

Section titled "rowDeleted"

Emitted when a row is deleted.

 
rowDeleted: EventEmitter<IRowDataEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:813

Remarks

Returns an IRowDataEventArgs object.

Example

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

rowDragEnd

Section titled "rowDragEnd"

Emitted when dropping a row.

 
rowDragEnd: EventEmitter<IRowDragEndEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:976

Remarks

Return the dropped row.

rowDragStart

Section titled "rowDragStart"

Emitted when start dragging a row.

 
rowDragStart: EventEmitter<IRowDragStartEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:967

Remarks

Return the dragged row.

rowEdit

Section titled "rowEdit"

Emitted when exiting edit mode for a row.

 
rowEdit: EventEmitter<IGridEditEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:680

Remarks

Emitted when [rowEditable]="true" & endEdit(true) is called. Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, performing paging operation, column resizing, pinning, moving or hitting Done button inside of the rowEditingOverlay, or hitting the Enter key while editing a cell. This event is cancelable.

Example

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

rowEditDone

Section titled "rowEditDone"

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

 
rowEditDone: EventEmitter<IGridEditDoneEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:697

Remarks

Emitted when [rowEditable]="true" & endEdit(true) is called. Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, performing paging operation, column resizing, pinning, moving or hitting Done button inside of the rowEditingOverlay, or hitting the Enter key while editing a cell.

Example

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

rowEditEnter

Section titled "rowEditEnter"

Emitted when a row enters edit mode.

 
rowEditEnter: EventEmitter<IGridEditEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:662

Remarks

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

Example

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

rowEditExit

Section titled "rowEditExit"

Emitted when row editing is canceled.

 
rowEditExit: EventEmitter<IGridEditDoneEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:713

Remarks

Emits when [rowEditable]="true" & endEdit(false) is called. Emitted when changing hitting Esc key during cell editing and when click on the Cancel button in the row editing overlay.

Example

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

rowPinned

Section titled "rowPinned"

Emitted when the pinned state of a row is changed.

 
rowPinned: EventEmitter<IPinRowEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1050

Example

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

rowPinning

Section titled "rowPinning"

Emitted when the pinned state of a row is changed.

 
rowPinning: EventEmitter<IPinRowEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1039

Example

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

rowSelectionChanging

Section titled "rowSelectionChanging"

Emitted when IgxGridRowComponent is selected.

 
rowSelectionChanging: EventEmitter<IRowSelectionEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:548

Example

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

rowStyles

Section titled "rowStyles"

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

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

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:425

rowToggle

Section titled "rowToggle"

Emitted when the expanded state of a row gets changed.

 
rowToggle: EventEmitter<IRowToggleEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1028

Example

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

selected

Section titled "selected"

Emitted when a cell is selected.

 
selected: EventEmitter<IGridCellEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:537

Remarks

Returns the IgxGridCell.

Example

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

selectedRowsChange

Section titled "selectedRowsChange"

Emitted when the rows are selected or deselected.

 
selectedRowsChange: EventEmitter<any[]>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1009

Example

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

snackbarDisplayTime

Section titled "snackbarDisplayTime"

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

 
snackbarDisplayTime: number = 6000

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:187

Remarks

By default it is 6000ms.

sorting

Section titled "sorting"

Emitted before sorting expressions are applied.

 
sorting: EventEmitter<ISortingEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:746

Remarks

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

Example

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

sortingDone

Section titled "sortingDone"

Emitted after sorting is completed.

 
sortingDone: EventEmitter<ISortingExpression<any> | ISortingExpression<any>[]>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:759

Remarks

Returns the sorting expression.

Example

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

sortingExpressionsChange

Section titled "sortingExpressionsChange"

Emitted before sorting is performed.

 
sortingExpressionsChange: EventEmitter<ISortingExpression<any>[]>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1074

Remarks

Returns the sorting expressions.

Example

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

toolbarExporting

Section titled "toolbarExporting"

Emitted when an export process is initiated by the user.

 
toolbarExporting: EventEmitter<IGridToolbarExportEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1088

Example

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

uniqueColumnValuesStrategy

Section titled "uniqueColumnValuesStrategy"

Gets/Sets a unique values strategy used by the Excel Style Filtering

 
uniqueColumnValuesStrategy: object

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:459

Remarks

Provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering.

Example

<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>

validation

Section titled "validation"

Represents the validation service for the grid. The type contains properties and methods (logic) for validating records

 
validation: IgxGridValidationService

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:144

validationStatusChange

Section titled "validationStatusChange"

Emitted when grid's validation status changes.

 
validationStatusChange: EventEmitter<IGridValidationStatusEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:524

Example

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

validationTrigger

Section titled "validationTrigger"

Gets/Sets the trigger for validators used when editing the grid.

 
validationTrigger: GridValidationTrigger = 'change'

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2057

Example

<igx-grid #grid validationTrigger='blur'></igx-grid>

advancedFilteringExpressionsTree

Section titled "advancedFilteringExpressionsTree" 
advancedFilteringExpressionsTree: IFilteringExpressionsTree

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1914, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1918

allowAdvancedFiltering

Section titled "allowAdvancedFiltering" 
allowAdvancedFiltering: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2330, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2334

allowFiltering

Section titled "allowFiltering"

Indicates whether filtering in the grid is enabled. If te value is true, the grid can be filtered

 
allowFiltering: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2304, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2308

batchEditing

Section titled "batchEditing" 
batchEditing: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2811, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2815

cellMergeMode

Section titled "cellMergeMode" 
cellMergeMode: GridCellMergeMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2881, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2885

cellSelection

Section titled "cellSelection"

Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade'

 
cellSelection: GridSelectionMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2862, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2866

columnSelection

Section titled "columnSelection"

Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade'

 
columnSelection: GridSelectionMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2923, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2927

columnWidth

Section titled "columnWidth" 
columnWidth: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2181, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2184

dataCloneStrategy

Section titled "dataCloneStrategy"

Strategy, used for cloning the provided data. The type has one method, that takes any type of data

 
dataCloneStrategy: IDataCloneStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:314, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:318

dragGhostCustomTemplate

Section titled "dragGhostCustomTemplate" 
dragGhostCustomTemplate: TemplateRef<IgxGridRowDragGhostContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1230, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1247

dragIndicatorIconTemplate

Section titled "dragIndicatorIconTemplate"

The template for drag indicator icons. Could be of any type

 
dragIndicatorIconTemplate: TemplateRef<IgxGridEmptyTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2691, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2708

emptyFilteredGridMessage

Section titled "emptyFilteredGridMessage" 
emptyFilteredGridMessage: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2263, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2267

emptyGridMessage

Section titled "emptyGridMessage" 
emptyGridMessage: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2199, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2202

emptyGridTemplate

Section titled "emptyGridTemplate" 
emptyGridTemplate: TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:241, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:244

excelStyleHeaderIconTemplate

Section titled "excelStyleHeaderIconTemplate"

The template for header icon It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
excelStyleHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1580, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1597

expansionStates

Section titled "expansionStates" 
expansionStates: Map<any, boolean>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4355, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4360

filteringExpressionsTree

Section titled "filteringExpressionsTree" 
filteringExpressionsTree: IFilteringExpressionsTree

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1868, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1872

filteringLogic

Section titled "filteringLogic" 
filteringLogic: FilteringLogic

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1847, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1851

filterMode

Section titled "filterMode"

The filter mode for the grid. It can be quick filter of excel-style filter

 
filterMode: FilterMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2356, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2360

filterStrategy

Section titled "filterStrategy" 
filterStrategy: IFilteringStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2450, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2454

headerCollapsedIndicatorTemplate

Section titled "headerCollapsedIndicatorTemplate"

The template for header collapsed indicators. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
headerCollapsedIndicatorTemplate: TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1551, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1568

headerExpandedIndicatorTemplate

Section titled "headerExpandedIndicatorTemplate"

The template for header expanded indicators. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
headerExpandedIndicatorTemplate: TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1520, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1537

headSelectorTemplate

Section titled "headSelectorTemplate"

The template for the header selector. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
headSelectorTemplate: TemplateRef<IgxHeadSelectorTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2614, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2631

height

Section titled "height" 
height: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2103, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2107

hideRowSelectors

Section titled "hideRowSelectors" 
hideRowSelectors: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2021, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2025

isLoading

Section titled "isLoading" 
isLoading: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2216, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2229

loadingGridTemplate

Section titled "loadingGridTemplate" 
loadingGridTemplate: TemplateRef<IgxGridTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:274, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:277

locale

Section titled "locale"

Represents the locale of the grid: USD, EUR, GBP, CNY, JPY, etc.

 
locale: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1964, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1968

mergeStrategy

Section titled "mergeStrategy" 
mergeStrategy: IGridMergeStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2485, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2488

outlet

Section titled "outlet" 
outlet: IgxOverlayOutletDirective

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4473, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4477

pagingMode

Section titled "pagingMode"

Represents the paging of the grid. It can be either 'Local' or 'Remote'

  • Local: Default value; The grid will paginate the data source based on the page
 
pagingMode: GridPagingMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1981, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1985

pinning

Section titled "pinning"

The configuration for columns and rows pinning in the grid It's of type IPinningConfig, which can have value for columns (start, end) and for rows (top, bottom)

 
pinning: IPinningConfig

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2284, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2287

primaryKey

Section titled "primaryKey"

Represents the unique primary key used for identifying rows in the grid

 
primaryKey: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:437, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:441

resourceStrings

Section titled "resourceStrings" 
resourceStrings: IGridResourceStrings

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1826, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1831

rowAddTextTemplate

Section titled "rowAddTextTemplate" 
rowAddTextTemplate: TemplateRef<IgxGridEmptyTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1397, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1413

rowCollapsedIndicatorTemplate

Section titled "rowCollapsedIndicatorTemplate"

The template for collapsed row indicators. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
rowCollapsedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1489, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1506

rowDraggable

Section titled "rowDraggable"

Indicates whether rows in the grid can be dragged. If te value is true, the rows can be dragged

 
rowDraggable: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2039, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2043

rowEditable

Section titled "rowEditable"

Indicates whether rows in the grid are editable. If te value is true, the rows can be edited

 
rowEditable: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2080, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2084

rowEditActionsTemplate

Section titled "rowEditActionsTemplate" 
rowEditActionsTemplate: TemplateRef<IgxGridRowEditActionsTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1427, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1444

rowEditTextTemplate

Section titled "rowEditTextTemplate" 
rowEditTextTemplate: TemplateRef<IgxGridRowEditTextTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1367, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1383

rowExpandedIndicatorTemplate

Section titled "rowExpandedIndicatorTemplate"

The template for expanded row indicators. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
rowExpandedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1458, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1475

rowHeight

Section titled "rowHeight"

The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling

 
rowHeight: number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2160, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2164

rowSelection

Section titled "rowSelection"

Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade'

 
rowSelection: GridSelectionMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2902, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2906

rowSelectorTemplate

Section titled "rowSelectorTemplate"

The template for row selectors. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
rowSelectorTemplate: TemplateRef<IgxRowSelectorTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2647, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2664

selectedRows

Section titled "selectedRows" 
selectedRows: any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2533, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2537

selectRowOnClick

Section titled "selectRowOnClick" 
selectRowOnClick: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5799, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5803

shouldGenerate

Section titled "shouldGenerate" 
shouldGenerate: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2246, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2250

showSummaryOnCollapse

Section titled "showSummaryOnCollapse" 
showSummaryOnCollapse: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2432, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2436

sortAscendingHeaderIconTemplate

Section titled "sortAscendingHeaderIconTemplate"

The template for ascending sort header icons. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
sortAscendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1613, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1630

sortDescendingHeaderIconTemplate

Section titled "sortDescendingHeaderIconTemplate"

The template for descending sort header icons. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1642, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1659

sortHeaderIconTemplate

Section titled "sortHeaderIconTemplate"

The template for sort header icons. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

 
sortHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1674, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:1691

sortingExpressions

Section titled "sortingExpressions" 
sortingExpressions: ISortingExpression<any>[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2767, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2771

sortingOptions

Section titled "sortingOptions" 
sortingOptions: ISortingOptions

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2506, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2514

sortStrategy

Section titled "sortStrategy" 
sortStrategy: IGridSortingStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2467, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2471

summaryCalculationMode

Section titled "summaryCalculationMode"

Represents the calculation mode for summaries: 'rootLevelOnly', 'childLevelsOnly', 'rootAndChildLevels'

 
summaryCalculationMode: GridSummaryCalculationMode

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2407, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2411

summaryPosition

Section titled "summaryPosition"

Represents the position of summaries: 'top', 'bottom'

 
summaryPosition: GridSummaryPosition

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2387, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2391

summaryRowHeight

Section titled "summaryRowHeight" 
summaryRowHeight: number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:285, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:293

totalRecords

Section titled "totalRecords" 
totalRecords: number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4737, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4741

width

Section titled "width" 
width: string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2133, projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2137

Accessors

Section titled "Accessors"

columns

Section titled "columns"

Gets an array of IgxColumnComponents.

get columns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4590

Example

const colums = this.grid.columns.

Returns IgxColumnComponent[]

dataRowList

Section titled "dataRowList"

A list of currently rendered IgxGridRowComponent's.

get dataRowList(): QueryList<IgxRowDirective>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2600

Example

const dataList = this.grid.dataRowList;

Returns QueryList<IgxRowDirective>

dataView

Section titled "dataView"

Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.

get dataView(): any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5786

Example

const dataView = this.grid.dataView;

Returns any[]

defaultRowHeight

Section titled "defaultRowHeight"

Gets the default row height.

get defaultRowHeight(): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4490

Example

const rowHeigh = this.grid.defaultRowHeight;

Returns number

filteredData

Section titled "filteredData"

Returns an array of objects containing the filtered data.

get filteredData(): any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3338

Example

let filteredData = this.grid.filteredData;

Returns any

filteredSortedData

Section titled "filteredSortedData"

Returns an array containing the filtered sorted data.

get filteredSortedData(): any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3350

Example

const filteredSortedData = this.grid1.filteredSortedData;

Returns any[]

hiddenColumnsCount

Section titled "hiddenColumnsCount"

Gets the number of hidden columns.

get hiddenColumnsCount(): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2788

Example

const hiddenCol = this.grid.hiddenColumnsCount;
``

Returns number

lastSearchInfo

Section titled "lastSearchInfo"

Represents the last search information.

get lastSearchInfo(): ISearchInfo

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2975

Returns ISearchInfo

nativeElement

Section titled "nativeElement"

Gets the native element.

get nativeElement(): HTMLElement

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4459

Example

const nativeEl = this.grid.nativeElement.

Returns HTMLElement

pinnedColumns

Section titled "pinnedColumns"

Gets an array of the pinned IgxColumnComponents.

get pinnedColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4602

Example

const pinnedColumns = this.grid.pinnedColumns.

Returns IgxColumnComponent[]

pinnedColumnsCount

Section titled "pinnedColumnsCount"

Gets the number of pinned columns.

get pinnedColumnsCount(): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2795

Returns number

pinnedEndColumns

Section titled "pinnedEndColumns"

Gets an array of the pinned to the right IgxColumnComponents.

get pinnedEndColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4630

Example

const pinnedColumns = this.grid.pinnedEndColumns.

Returns IgxColumnComponent[]

pinnedRows

Section titled "pinnedRows"

Gets an array of the pinned IgxRowComponents.

get pinnedRows(): IgxGridRowComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4643

Example

const pinnedRow = this.grid.pinnedRows;

Returns IgxGridRowComponent[]

pinnedStartColumns

Section titled "pinnedStartColumns"

Gets an array of the pinned to the left IgxColumnComponents.

get pinnedStartColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4618

Example

const pinnedColumns = this.grid.pinnedStartColumns.

Returns IgxColumnComponent[]

rowList

Section titled "rowList"

A list of IgxGridRowComponent.

get rowList(): QueryList<IgxRowDirective>

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:2579

Example

const rowList = this.grid.rowList;

Returns QueryList<IgxRowDirective>

transactions

Section titled "transactions"

unpinnedColumns

Section titled "unpinnedColumns"

Gets an array of unpinned IgxColumnComponents.

get unpinnedColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4655

Example

const unpinnedColumns = this.grid.unpinnedColumns.

Returns IgxColumnComponent[]

virtualizationState

Section titled "virtualizationState"

Returns the state of the grid virtualization.

get virtualizationState(): IForOfState

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3575

Example

const gridVirtState = this.grid1.virtualizationState;

Returns IForOfState

visibleColumns

Section titled "visibleColumns"

Returns an array of visible IgxColumnComponents.

get visibleColumns(): IgxColumnComponent[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4718

Example

const visibleColumns = this.grid.visibleColumns.

Returns IgxColumnComponent[]

Methods

Section titled "Methods"

addRow

Section titled "addRow"

Creates a new IgxGridRowComponent and adds the data record to the end of the data source.

addRow(data: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4918

Parameters

  • data: any

Returns void

Example

this.grid1.addRow(record);

beginAddRowById

Section titled "beginAddRowById"

Enters add mode by spawning the UI under the specified row by rowID.

beginAddRowById(rowID: any, asChild: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6548

Parameters

  • rowID: any

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

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

Returns void

Example

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

beginAddRowByIndex

Section titled "beginAddRowByIndex"

Enters add mode by spawning the UI at the specified index.

beginAddRowByIndex(index: number): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6606

Parameters

  • index: number

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

Returns void

Example

this.grid.beginAddRowByIndex(0);

clearCellSelection

Section titled "clearCellSelection"

Deselect selected cells.

clearCellSelection(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5883

Returns void

Example

this.grid.clearCellSelection();

clearFilter

Section titled "clearFilter"

If name is provided, clears the filtering state of the corresponding IgxColumnComponent.

clearFilter(name: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5212

Parameters

  • name: string

Returns void

Example

this.grid.clearFilter();

clearSearch

Section titled "clearSearch"

Removes all the highlights in the cell.

clearSearch(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5462

Returns void

Example

this.grid.clearSearch();

clearSort

Section titled "clearSort"

If name is provided, clears the sorting state of the corresponding IgxColumnComponent.

clearSort(name: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5227

Parameters

  • name: string

Returns void

Example

this.grid.clearSort();

closeAdvancedFilteringDialog

Section titled "closeAdvancedFilteringDialog"

Closes the advanced filtering dialog.

closeAdvancedFilteringDialog(applyChanges: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6435

Parameters

  • applyChanges: boolean

    indicates whether the changes should be applied

Returns void

collapseAll

Section titled "collapseAll"

Collapses all rows.

collapseAll(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4390

Returns void

Example

this.grid.collapseAll();

collapseRow

Section titled "collapseRow"

Collapses the row by its id.

collapseRow(rowID: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4421

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.

Returns void

Example

this.grid.collapseRow(rowID);

deleteRow

Section titled "deleteRow"

Removes the IgxGridRowComponent and the corresponding data record by primary key.

deleteRow(rowSelector: any): any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4941

Parameters

  • rowSelector: any

Returns any

Example

this.grid1.deleteRow(0);

deselectAllColumns

Section titled "deselectAllColumns"

Deselects all columns

deselectAllColumns(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6046

Returns void

Example

this.grid.deselectAllColumns();

deselectAllRows

Section titled "deselectAllRows"

Deselects all rows

deselectAllRows(onlyFilterData: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5867

Parameters

  • onlyFilterData: boolean

Returns void

Example

this.grid.deselectAllRows();

deselectColumns

Section titled "deselectColumns"

Deselect specified columns by field.

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

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6020

Parameters

Returns void

Example

this.grid.deselectColumns(['ID','Name']);

deselectRows

Section titled "deselectRows"

Deselect specified rows by ID.

deselectRows(rowIDs: any[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5831

Parameters

  • rowIDs: any[]

Returns void

Example

this.grid.deselectRows([1,2,5]);

disableSummaries

Section titled "disableSummaries"

Disable summaries for the specified column.

disableSummaries(rest: any[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5193

Parameters

  • rest: any[]

Returns void

Example

grid.disableSummaries('ProductName');

enableSummaries

Section titled "enableSummaries"

Enables summaries for the specified column and applies your customSummary.

enableSummaries(rest: any[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5171

Parameters

  • rest: any[]

Returns void

Example

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

Enable summaries for the listed columns.

endEdit

Section titled "endEdit"

Finishes the row transactions on the current row and returns whether the grid editing was canceled.

endEdit(commit: boolean, event: Event): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6512

Parameters

  • commit: boolean
  • event: Event

Returns boolean

Example

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

expandAll

Section titled "expandAll"

Expands all rows.

expandAll(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4377

Returns void

Example

this.grid.expandAll();

expandRow

Section titled "expandRow"

Expands the row by its id.

expandRow(rowID: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4406

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.

Returns void

Example

this.grid.expandRow(rowID);

filter

Section titled "filter"

Filters a single IgxColumnComponent.

filter(name: string, value: any, conditionOrExpressionTree: IFilteringOperation | IFilteringExpressionsTree, ignoreCase: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5134

Parameters

Returns void

Example

public filter(term) {
     this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
}

filterGlobal

Section titled "filterGlobal"

Filters all the IgxColumnComponent in the IgxGridComponent with the same condition.

filterGlobal(value: any, condition: any, ignoreCase: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5151

Parameters

  • value: any
  • condition: any
  • ignoreCase: any

Returns void

Example

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

findNext

Section titled "findNext"

Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.

findNext(text: string, caseSensitive: boolean, exactMatch: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5395

Parameters

  • text: string

    the string to search.
  • caseSensitive: boolean

    optionally, if the search should be case sensitive (defaults to false).
  • exactMatch: boolean

    optionally, if the text should match the entire value (defaults to false).

Returns number

Example

this.grid.findNext("financial");

findPrev

Section titled "findPrev"

Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.

findPrev(text: string, caseSensitive: boolean, exactMatch: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5412

Parameters

  • text: string

    the string to search.
  • caseSensitive: boolean

    optionally, if the search should be case sensitive (defaults to false).
  • exactMatch: boolean

    optionally, if the text should match the entire value (defaults to false).

Returns number

Example

this.grid.findPrev("financial");

getColumnByName

Section titled "getColumnByName"

Returns the IgxColumnComponent by field name.

getColumnByName(name: string): IgxColumnComponent

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4681

Parameters

  • name: string

Returns IgxColumnComponent

Example

const myCol = this.grid1.getColumnByName("ID");

getColumnByVisibleIndex

Section titled "getColumnByVisibleIndex" 
getColumnByVisibleIndex(index: number): IgxColumnComponent

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4685

Parameters

  • index: number

Returns IgxColumnComponent

getHeaderGroupWidth

Section titled "getHeaderGroupWidth"

Gets the width to be set on IgxGridHeaderGroupComponent.

getHeaderGroupWidth(column: IgxColumnComponent): string

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4666

Parameters

Returns string

getNextCell

Section titled "getNextCell"

Returns ICellPosition which defines the next cell, according to the current position, that match specific criteria.

getNextCell(currRowIndex: number, curVisibleColIndex: number, callback: object): ICellPosition

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6250

Parameters

  • currRowIndex: number
  • curVisibleColIndex: number
  • callback: object

Returns ICellPosition

Example

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

getPinnedEndWidth

Section titled "getPinnedEndWidth"

Gets calculated width of the pinned areas.

getPinnedEndWidth(takeHidden: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5712

Parameters

  • takeHidden: boolean

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

Returns number

Example

const pinnedWidth = this.grid.getPinnedEndWidth();

getPinnedStartWidth

Section titled "getPinnedStartWidth"

Gets calculated width of the pinned areas.

getPinnedStartWidth(takeHidden: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5689

Parameters

  • takeHidden: boolean

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

Returns number

Example

const pinnedWidth = this.grid.getPinnedStartWidth();

getPreviousCell

Section titled "getPreviousCell"

Returns ICellPosition which defines the previous cell, according to the current position, that match specific criteria.

getPreviousCell(currRowIndex: number, curVisibleColIndex: number, callback: object): ICellPosition

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6286

Parameters

  • currRowIndex: number
  • curVisibleColIndex: number
  • callback: object

Returns ICellPosition

Example

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

getRowData

Section titled "getRowData"

Returns the data that is contained in the row component.

getRowData(rowSelector: any): any

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5067

Parameters

  • rowSelector: any

    correspond to rowID

Returns any

Example

const data = grid.getRowData(94741);

getSelectedColumnsData

Section titled "getSelectedColumnsData"

Returns an array of the current columns selection in the form of [{ column.field: cell.value }, ...].

getSelectedColumnsData(formatters: boolean, headers: boolean): any[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6071

Parameters

  • formatters: boolean
  • headers: boolean

Returns any[]

getSelectedData

Section titled "getSelectedData"

Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...].

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

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5963

Parameters

  • formatters: boolean
  • headers: boolean

Returns any[]

getSelectedRanges

Section titled "getSelectedRanges"

Get the currently selected ranges in the grid.

getSelectedRanges(): GridSelectionRange[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5951

Returns GridSelectionRange[]

isRecordPinnedByIndex

Section titled "isRecordPinnedByIndex"

Returns whether the record is pinned or not.

isRecordPinnedByIndex(rowIndex: number): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:3613

Parameters

  • rowIndex: number

    Index of the record in the filteredSortedData collection.

Returns boolean

markForCheck

Section titled "markForCheck"

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

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

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

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4903

Returns void

Example

grid.markForCheck();

moveColumn

Section titled "moveColumn"

Places a column before or after the specified target column.

moveColumn(column: IgxColumnComponent, target: IgxColumnComponent, pos: DropPosition): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4826

Parameters

Returns void

Example

grid.moveColumn(column, target);
Section titled "navigateTo"

Navigates to a position in the grid based on provided rowindex and visibleColumnIndex.

navigateTo(rowIndex: number, visibleColIndex: number, cb: object): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6202

Parameters

  • rowIndex: number
  • visibleColIndex: number
  • cb: object

Returns void

Example

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

openAdvancedFilteringDialog

Section titled "openAdvancedFilteringDialog"

Opens the advanced filtering dialog.

openAdvancedFilteringDialog(overlaySettings: OverlaySettings): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6415

Parameters

Returns void

pinColumn

Section titled "pinColumn"

Pins a column by field name.

pinColumn(columnName: string | IgxColumnComponent, index: number, pinningPosition: ColumnPinningPosition): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5264

Parameters

Returns boolean

Example

this.grid.pinColumn("ID");

pinRow

Section titled "pinRow"

Pin the row by its id.

pinRow(rowID: any, index: number, row: RowType): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5297

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.
  • index: number

    The index at which to insert the row in the pinned collection.
  • row: RowType

Returns boolean

Example

this.grid.pinRow(rowID);

recalculateAutoSizes

Section titled "recalculateAutoSizes"

Recalculates all widths of columns that have size set to auto.

recalculateAutoSizes(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4700

Returns void

Example

this.grid1.recalculateAutoSizes();

reflow

Section titled "reflow"

Recalculates grid width/height dimensions.

reflow(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5378

Returns void

Example

this.grid.reflow();

refreshSearch

Section titled "refreshSearch"

Reapplies the existing search.

refreshSearch(updateActiveInfo: boolean, endEdit: boolean): number

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5427

Parameters

  • updateActiveInfo: boolean
  • endEdit: boolean

Returns number

Example

this.grid.refreshSearch();

selectAllColumns

Section titled "selectAllColumns"

Selects all columns

selectAllColumns(): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:6059

Returns void

Example

this.grid.deselectAllColumns();

selectAllRows

Section titled "selectAllRows"

Selects all rows

selectAllRows(onlyFilterData: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5849

Parameters

  • onlyFilterData: boolean

Returns void

Example

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

selectColumns

Section titled "selectColumns"

Select specified columns.

selectColumns(columns: string[] | ColumnType[], clearCurrentSelection: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5992

Parameters

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

    if true clears the current selection

Returns void

Example

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

selectedColumns

Section titled "selectedColumns"

Get current selected columns.

selectedColumns(): ColumnType[]

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5977

Returns ColumnType[]

Example

Returns an array with selected columns

const selectedColumns = this.grid.selectedColumns();

selectRange

Section titled "selectRange"

Select range(s) of cells between certain rows and columns of the grid.

selectRange(arg: GridSelectionRange | GridSelectionRange[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5911

Parameters

Returns void

selectRows

Section titled "selectRows"

Select specified rows by ID.

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

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5817

Parameters

  • rowIDs: any[]
  • clearCurrentSelection: boolean

    if true clears the current selection

Returns void

Example

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

sort

Section titled "sort"

Sort a single IgxColumnComponent.

sort(expression: ISortingExpression<any> | ISortingExpression<any>[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5086

Parameters

Returns void

Example

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

toggleColumnVisibility

Section titled "toggleColumnVisibility"

Toggles the specified column's visibility.

toggleColumnVisibility(args: IColumnVisibilityChangedEventArgs): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4332

Parameters

Returns void

Example

this.grid1.toggleColumnVisibility({
      column: this.grid1.columns[0],
      newValue: true
});

toggleRow

Section titled "toggleRow"

Toggles the row by its id.

toggleRow(rowID: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4437

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.

Returns void

Example

this.grid.toggleRow(rowID);

unpinColumn

Section titled "unpinColumn"

Unpins a column by field name. Returns whether the operation is successful.

unpinColumn(columnName: string | IgxColumnComponent, index: number): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5279

Parameters

Returns boolean

Example

this.grid.pinColumn("ID");

unpinRow

Section titled "unpinRow"

Unpin the row by its id.

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

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5332

Parameters

  • rowID: any

    The row id - primaryKey value or the data record instance.
  • row: RowType

Returns boolean

Example

this.grid.unpinRow(rowID);

updateCell

Section titled "updateCell"

Updates the IgxGridRowComponent and the corresponding data record by primary key.

updateCell(value: any, rowSelector: any, column: string): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:4993

Parameters

  • value: any

    the new value which is to be set.
  • rowSelector: any

    corresponds to rowID.
  • column: string

    corresponds to column field.

Returns void

Example

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

updateRow

Section titled "updateRow"

Updates the IgxGridRowComponent

updateRow(value: any, rowSelector: any): void

Defined in projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5038

Parameters

  • value: any
  • rowSelector: any

    correspond to rowID

Returns void

Example

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