IgxGridComponent

Grid provides a way to present and manipulate tabular data.

Igx Module: IgxGridModule
Igx Theme: igx-grid-theme
Igx Keywords: grid, table
Igx Group: Grids & Lists

Remarks

[object Object]

Example

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

Constructors

new IgxGridComponent(): IgxGridComponent

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

Returns IgxGridComponent

Properties

activeNodeChange

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

Controls the copy behavior of the grid.

clipboardOptions: IClipboardOptions

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

columnInit

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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>

dataChanged

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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>

dataPreLoad

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

dataPreLoad: EventEmitter<IForOfState>

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:179

Example

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

doubleClick

Inherited from: IgxGridBaseDirective

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>

dropAreaTemplate

Gets/Sets the template that will be rendered as a GroupBy drop area.

dropAreaTemplate: TemplateRef<void>

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:250

Remarks

The grid needs to have at least one groupable column in order the GroupBy area to be displayed.

Example

<igx-grid [dropAreaTemplate]="dropAreaRef">
</igx-grid>
<ng-template #myDropArea>
     <span> Custom drop area! </span>
</ng-template>

expansionStatesChange

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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>

groupingDone

Emitted when columns are grouped/ungrouped.

groupingDone: EventEmitter<IGroupingDoneEventArgs>

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:220

Remarks

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

Example

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

groupingExpansionStateChange

Emitted when groups are expanded/collapsed.

groupingExpansionStateChange: EventEmitter<IGroupByExpandState[]>

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:201

Example

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

groupingExpressionsChange

Emitted when grouping is performed.

groupingExpressionsChange: EventEmitter<IGroupingExpression[]>

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:190

Example

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

groupsExpanded

Gets/Sets whether created groups are rendered expanded or collapsed.

groupsExpanded: boolean = true

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:233

Remarks

The default rendered state is expanded.

Example

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

id

Gets/Sets the value of the id attribute.

id: string

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:311

Remarks

If not provided it will be automatically generated.

Example

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

moving

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

navigation: IgxGridNavigationService

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

rangeSelected

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Example

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

rowEditEnter

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

data

data: any[]

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:412, projects/igniteui-angular/grids/grid/src/grid.component.ts:416

dataCloneStrategy

Inherited from: IgxGridBaseDirective

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

detailTemplate

detailTemplate: TemplateRef<IgxGridMasterDetailContext>

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:268, projects/igniteui-angular/grids/grid/src/grid.component.ts:289

dragGhostCustomTemplate

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

dropAreaMessage

dropAreaMessage: string

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:623, projects/igniteui-angular/grids/grid/src/grid.component.ts:628

emptyFilteredGridMessage

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

groupByRowSelectorTemplate

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

groupByRowSelectorTemplate: TemplateRef<IgxGroupByRowSelectorTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:650, projects/igniteui-angular/grids/grid/src/grid.component.ts:667

groupingExpansionState

groupingExpansionState: IGroupByExpandState[]

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:549, projects/igniteui-angular/grids/grid/src/grid.component.ts:553

groupingExpressions

groupingExpressions: IGroupingExpression[]

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:493, projects/igniteui-angular/grids/grid/src/grid.component.ts:497

groupRowTemplate

Optional The template for group-by rows. It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

groupRowTemplate: TemplateRef<IgxGroupByRowTemplateContext>

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:734, projects/igniteui-angular/grids/grid/src/grid.component.ts:738

groupStrategy

groupStrategy: IGridGroupingStrategy

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:602, projects/igniteui-angular/grids/grid/src/grid.component.ts:606

headerCollapsedIndicatorTemplate

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

hideGroupedColumns

hideGroupedColumns: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:574, projects/igniteui-angular/grids/grid/src/grid.component.ts:578

hideRowSelectors

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

showGroupArea

showGroupArea: boolean

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:913, projects/igniteui-angular/grids/grid/src/grid.component.ts:916

showSummaryOnCollapse

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

totalItemCount

totalItemCount: number

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:452, projects/igniteui-angular/grids/grid/src/grid.component.ts:456

totalRecords

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

columns

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

groupsRecords

Gets the hierarchical representation of the group by records.

get groupsRecords(): IGroupByRecord[]

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:353

Example

let groupRecords = this.grid.groupsRecords;

Returns IGroupByRecord[]

hiddenColumnsCount

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

Represents the last search information.

get lastSearchInfo(): ISearchInfo

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

Returns ISearchInfo

nativeElement

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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>

selectedCells

Returns an array of the selected IgxGridCells.

get selectedCells(): CellType[]

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:1207

Example

const selectedCells = this.grid.selectedCells;

Returns CellType[]

transactions

Inherited from: IgxGridBaseDirective

Get transactions service for the grid.

get transactions(): TransactionService<Transaction, State>

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

Returns TransactionService<Transaction, State>

unpinnedColumns

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

addRow

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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();

clearGrouping

Clears grouping for particular column, array of columns or all columns.

clearGrouping(name: string | string[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:789

Parameters

name: string | string[]
Name of column or array of column names to be ungrouped.

Returns void

Example

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

clearSearch

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

Deselect specified columns by field.

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

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

Parameters

columns: string[] | ColumnType[]

Returns void

Example

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

deselectRows

Inherited from: IgxGridBaseDirective

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]);

deselectRowsInGroup

Deselect all rows within a group.

deselectRowsInGroup(groupRow: IGroupByRecord): void

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:851

Parameters

groupRow: IGroupByRecord
The group record which rows would be deselected.

Returns void

Example

public groupRow: IGroupByRecord;
this.grid.deselectRowsInGroup(this.groupRow);

disableSummaries

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

name: string
value: any
conditionOrExpressionTree: IFilteringOperation | IFilteringExpressionsTree
ignoreCase: boolean

Returns void

Example

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

filterGlobal

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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");

fullyExpandGroup

Expands the specified group and all of its parent groups.

fullyExpandGroup(groupRow: IGroupByRecord): void

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

Parameters

groupRow: IGroupByRecord
The group record to fully expand.

Returns void

Example

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

getCellByColumn

Returns a CellType object that matches the conditions.

getCellByColumn(rowIndex: number, columnField: string): CellType

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:1222

Parameters

rowIndex: number
columnField: string

Returns CellType

Example

const myCell = this.grid1.getCellByColumn(2, "UnitPrice");

getCellByKey

Returns a CellType object that matches the conditions.

getCellByKey(rowSelector: any, columnField: string): CellType

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:1245

Parameters

rowSelector: any
match any rowID
columnField: string

Returns CellType

Example

grid.getCellByKey(1, 'index');

getColumnByName

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

getColumnByVisibleIndex(index: number): IgxColumnComponent

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

Parameters

index: number

Returns IgxColumnComponent

getHeaderGroupWidth

Inherited from: IgxGridBaseDirective

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

column: IgxColumnComponent

Returns string

getNextCell

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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);

getRowByIndex

Returns the IgxGridRow by index.

getRowByIndex(index: number): RowType

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:1137

Parameters

index: number

Returns RowType

Example

const myRow = grid.getRowByIndex(1);

getRowByKey

Returns IgxGridRow object by the specified primary key.

getRowByKey(key: any): RowType

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:1167

Parameters

key: any

Returns RowType

Example

const myRow = this.grid1.getRowByKey("cell5");

getRowData

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

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.component.ts:1108

Parameters

formatters: boolean
headers: boolean

Returns any[]

getSelectedRanges

Inherited from: IgxGridBaseDirective

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

groupBy

Groups by a new IgxColumnComponent based on the provided expression, or modifies an existing one.

groupBy(expression: IGroupingExpression | IGroupingExpression[]): void

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:762

Parameters

expression: IGroupingExpression | IGroupingExpression[]

Returns void

Example

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

isExpandedGroup

Returns if a group is expanded or not.

isExpandedGroup(group: IGroupByRecord): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:806

Parameters

group: IGroupByRecord
The group record.

Returns boolean

Example

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

isRecordPinnedByIndex

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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);

navigateTo

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

Opens the advanced filtering dialog.

openAdvancedFilteringDialog(overlaySettings: OverlaySettings): void

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

Parameters

overlaySettings: OverlaySettings

Returns void

pinColumn

Inherited from: IgxGridBaseDirective

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

columnName: string | IgxColumnComponent
index: number
pinningPosition: ColumnPinningPosition

Returns boolean

Example

this.grid.pinColumn("ID");

pinRow

Pin the row by its id.

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

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:1253

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.

Returns boolean

Example

this.grid.pinRow(rowID);

recalculateAutoSizes

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

arg: GridSelectionRange | GridSelectionRange[]

Returns void

selectRows

Inherited from: IgxGridBaseDirective

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);

selectRowsInGroup

Select all rows within a group.

selectRowsInGroup(groupRow: IGroupByRecord, clearPrevSelection: boolean): void

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:836

Parameters

groupRow: IGroupByRecord
clearPrevSelection: boolean

Returns void

Example

this.grid.selectRowsInGroup(this.groupRow, true);

sort

Inherited from: IgxGridBaseDirective

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

expression: ISortingExpression<any> | ISortingExpression<any>[]

Returns void

Example

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

toggleAllGroupRows

Toggles the expansion state of all group rows recursively.

toggleAllGroupRows(): void

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:888

Returns void

Example

this.grid.toggleAllGroupRows;

toggleColumnVisibility

Inherited from: IgxGridBaseDirective

Toggles the specified column's visibility.

toggleColumnVisibility(args: IColumnVisibilityChangedEventArgs): void

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

Parameters

args: IColumnVisibilityChangedEventArgs

Returns void

Example

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

toggleGroup

Toggles the expansion state of a group.

toggleGroup(groupRow: IGroupByRecord): void

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:821

Parameters

groupRow: IGroupByRecord
The group record to toggle.

Returns void

Example

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

toggleRow

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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

columnName: string | IgxColumnComponent
index: number

Returns boolean

Example

this.grid.pinColumn("ID");

unpinRow

Unpin the row by its id.

unpinRow(rowID: any): boolean

Defined in projects/igniteui-angular/grids/grid/src/grid.component.ts:1258

Parameters

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

Returns boolean

Example

this.grid.unpinRow(rowID);

updateCell

Inherited from: IgxGridBaseDirective

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

Inherited from: IgxGridBaseDirective

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);