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:3459

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:1047

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

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>

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:925

Remarks

Returns the source and target column 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:938

Remarks

Returns the source and target column 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:912

Remarks

Returns the moved column object.

Example

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

columnPin

Inherited from: IgxGridBaseDirective

Emitted before column 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 column 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:848

Remarks

Returns the column 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 column 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:899

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:886

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:860

Remarks

Returns the grid cell object if the immediate context menu target is a cell or an grid row 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:1117

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:1106

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:169

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:873

Remarks

Returns the grid cell 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:240

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:991

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:766

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:779

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:979

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:952

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:210

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 column 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:191

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:180

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:223

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:301

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:1085

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:1089

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:835

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:793

Remarks

Returns the data for the new grid row 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 grid row.

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:821

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:807

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:970

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:961

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:1036

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:1025

Example

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

rowSelectionChanging

Inherited from: IgxGridBaseDirective

Emitted when grid row 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:1014

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

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:1003

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:740

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:753

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:1060

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:1074

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:2037

Example

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

Accessors

advancedFilteringExpressionsTree

Inherited from: IgxGridBaseDirective

Gets/Sets the advanced filtering state.

get advancedFilteringExpressionsTree(): IFilteringExpressionsTree

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

Example

let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
this.grid.advancedFilteringExpressionsTree = logic;

Returns IFilteringExpressionsTree

set advancedFilteringExpressionsTree(value: IFilteringExpressionsTree): void

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

Parameters

value: IFilteringExpressionsTree

Returns void

allowAdvancedFiltering

Inherited from: IgxGridBaseDirective

Gets/Sets a value indicating whether the advanced filtering is enabled.

get allowAdvancedFiltering(): boolean

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

Example

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

Returns boolean

set allowAdvancedFiltering(value: boolean): void

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

Parameters

value: boolean

Returns void

allowFiltering

Inherited from: IgxGridBaseDirective

Gets/Sets if the filtering is enabled.

get allowFiltering(): boolean

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

Example

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

Returns boolean

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

set allowFiltering(value: boolean): void

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

Parameters

value: boolean

Returns void

batchEditing

Inherited from: IgxGridBaseDirective

Gets/Sets whether the grid has batch editing enabled. When batch editing is enabled, changes are not made directly to the underlying data. Instead, they are stored as transactions, which can later be committed w/ the commit method.

get batchEditing(): boolean

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

Example

<igx-grid [batchEditing]="true" [data]="someData">
</igx-grid>

Returns boolean

set batchEditing(val: boolean): void

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

Parameters

val: boolean

Returns void

cellMergeMode

Inherited from: IgxGridBaseDirective

Gets/Sets cell merge mode.

get cellMergeMode(): GridCellMergeMode

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

Returns GridCellMergeMode

set cellMergeMode(value: GridCellMergeMode): void

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

Parameters

value: GridCellMergeMode

Returns void

cellSelection

Inherited from: IgxGridBaseDirective

Gets/Sets cell selection mode.

get cellSelection(): GridSelectionMode

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

Returns GridSelectionMode

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

set cellSelection(selectionMode: GridSelectionMode): void

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

Parameters

selectionMode: GridSelectionMode

Returns void

columns

Inherited from: IgxGridBaseDirective

Gets an array of columns.

get columns(): IgxColumnComponent[]

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

Example

const colums = this.grid.columns.

Returns IgxColumnComponent[]

columnSelection

Inherited from: IgxGridBaseDirective

Gets/Sets column selection mode

get columnSelection(): GridSelectionMode

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

Returns GridSelectionMode

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

set columnSelection(selectionMode: GridSelectionMode): void

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

Parameters

selectionMode: GridSelectionMode

Returns void

columnWidth

Inherited from: IgxGridBaseDirective

Gets/Sets the default width of the columns.

get columnWidth(): string

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

Example

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

Returns string

set columnWidth(value: string): void

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

Parameters

value: string

Returns void

data

Gets/Sets the array of data that populates the component.

get data(): any[]

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

Example

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

Returns any[]

set data(value: any[]): void

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

Parameters

value: any[]

Returns void

dataCloneStrategy

Inherited from: IgxGridBaseDirective

Gets/Sets the data clone strategy of the grid when in edit mode.

get dataCloneStrategy(): IDataCloneStrategy

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

Example

<igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>

Returns IDataCloneStrategy

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

set dataCloneStrategy(strategy: IDataCloneStrategy): void

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

Parameters

strategy: IDataCloneStrategy

Returns void

dataRowList

Inherited from: IgxGridBaseDirective

A list of currently rendered grid row's.

get dataRowList(): QueryList<IgxRowDirective>

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

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:5765

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:4469

Example

const rowHeigh = this.grid.defaultRowHeight;

Returns number

detailTemplate

Returns a reference to the master-detail template.

let detailTemplate = this.grid.detailTemplate;

get detailTemplate(): TemplateRef<IgxGridMasterDetailContext>

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

Returns TemplateRef<IgxGridMasterDetailContext>

Sets the master-detail template.

<ng-template #detailTemplate igxGridDetail let-dataItem>
   <div>
      <div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div>
      <div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div>
   </div>
</ng-template>

@ViewChild("'detailTemplate'", {read: TemplateRef })
public detailTemplate: TemplateRef<any>;
this.grid.detailTemplate = this.detailTemplate;

set detailTemplate(template: TemplateRef<IgxGridMasterDetailContext>): void

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

Parameters

template: TemplateRef<IgxGridMasterDetailContext>

Returns void

dragGhostCustomTemplate

Inherited from: IgxGridBaseDirective

Gets the custom template, if any, used for row drag ghost.

get dragGhostCustomTemplate(): TemplateRef<IgxGridRowDragGhostContext>

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

Returns TemplateRef<IgxGridRowDragGhostContext>

Sets a custom template for the row drag ghost.

<ng-template #template igxRowDragGhost>
   <igx-icon>menu</igx-icon>
</ng-template>

@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.dragGhostCustomTemplate = this.template;

set dragGhostCustomTemplate(template: TemplateRef<IgxGridRowDragGhostContext>): void

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

Parameters

template: TemplateRef<IgxGridRowDragGhostContext>

Returns void

dragIndicatorIconTemplate

Inherited from: IgxGridBaseDirective

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

get dragIndicatorIconTemplate(): TemplateRef<IgxGridEmptyTemplateContext>

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

Returns TemplateRef<IgxGridEmptyTemplateContext>

Sets a custom template that should be used when rendering the row drag indicator icon.

<ng-template #template igxDragIndicatorIcon>
   <igx-icon>expand_less</igx-icon>
</ng-template>

@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.dragIndicatorIconTemplate = this.template;

set dragIndicatorIconTemplate(val: TemplateRef<IgxGridEmptyTemplateContext>): void

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

Parameters

val: TemplateRef<IgxGridEmptyTemplateContext>

Returns void

dropAreaMessage

get dropAreaMessage(): string

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

Returns string

Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.

set dropAreaMessage(value: string): void

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

Example

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

Parameters

value: string

Returns void

emptyFilteredGridMessage

Inherited from: IgxGridBaseDirective

get emptyFilteredGridMessage(): string

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

Returns string

Gets/Sets the message displayed when there are no records and the grid is filtered.

set emptyFilteredGridMessage(value: string): void

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

Example

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

Parameters

value: string

Returns void

emptyGridMessage

Inherited from: IgxGridBaseDirective

get emptyGridMessage(): string

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

Returns string

Get/Sets the message displayed when there are no records.

set emptyGridMessage(value: string): void

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

Example

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

Parameters

value: string

Returns void

emptyGridTemplate

Inherited from: IgxGridBaseDirective

Gets/Sets a custom template when empty.

get emptyGridTemplate(): TemplateRef<IgxGridTemplateContext>

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

Example

<ng-template igxGridEmpty>
  <!-- content to show when the grid is empty -->
</ng-template>

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

Returns TemplateRef<IgxGridTemplateContext>

set emptyGridTemplate(template: TemplateRef<IgxGridTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridTemplateContext>

Returns void

excelStyleHeaderIconTemplate

Inherited from: IgxGridBaseDirective

Gets the excel style header icon.

get excelStyleHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>

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

Returns TemplateRef<IgxGridHeaderTemplateContext>

Sets the excel style header icon.

<ng-template #template igxExcelStyleHeaderIcon>
<igx-icon>filter_alt</igx-icon>
</ng-template>

@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.excelStyleHeaderIconTemplate = this.template;

set excelStyleHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridHeaderTemplateContext>

Returns void

expansionStates

Inherited from: IgxGridBaseDirective

Gets/Sets a list of key-value pairs [row ID, expansion state].

get expansionStates(): Map<any, boolean>

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

Example

<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
</igx-grid>

Returns Map<any, boolean>

set expansionStates(value: Map<any, boolean>): void

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

Parameters

value: Map<any, boolean>

Returns void

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:3318

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:3330

Example

const filteredSortedData = this.grid1.filteredSortedData;

Returns any[]

filteringExpressionsTree

Inherited from: IgxGridBaseDirective

Gets/Sets the filtering state.

get filteringExpressionsTree(): IFilteringExpressionsTree

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

Example

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

Returns IFilteringExpressionsTree

set filteringExpressionsTree(value: IFilteringExpressionsTree): void

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

Parameters

value: IFilteringExpressionsTree

Returns void

filteringLogic

Inherited from: IgxGridBaseDirective

Gets/Sets the filtering logic of the grid.

get filteringLogic(): FilteringLogic

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

Example

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

Returns FilteringLogic

set filteringLogic(value: FilteringLogic): void

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

Parameters

value: FilteringLogic

Returns void

filterMode

Inherited from: IgxGridBaseDirective

Gets/Sets the filter mode.

get filterMode(): FilterMode

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

Example

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

Returns FilterMode

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

set filterMode(value: FilterMode): void

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

Parameters

value: FilterMode

Returns void

filterStrategy

Inherited from: IgxGridBaseDirective

Gets/Sets the filtering strategy of the grid.

get filterStrategy(): IFilteringStrategy

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

Example

<igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>

Returns IFilteringStrategy

set filterStrategy(classRef: IFilteringStrategy): void

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

Parameters

classRef: IFilteringStrategy

Returns void

groupByRowSelectorTemplate

Gets the group by row selector template.

get groupByRowSelectorTemplate(): TemplateRef<IgxGroupByRowSelectorTemplateContext>

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

Returns TemplateRef<IgxGroupByRowSelectorTemplateContext>

Sets the group by row selector template.

<ng-template #template igxGroupByRowSelector let-groupByRowContext>
{{ groupByRowContext.selectedCount }} / {{ groupByRowContext.totalCount  }}
</ng-template>

@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.groupByRowSelectorTemplate = this.template;

set groupByRowSelectorTemplate(template: TemplateRef<IgxGroupByRowSelectorTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGroupByRowSelectorTemplateContext>

Returns void

groupingExpansionState

Gets/Sets a list of expansion states for group rows.

get groupingExpansionState(): IGroupByExpandState[]

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

Example

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

Returns IGroupByExpandState[]

set groupingExpansionState(value: IGroupByExpandState[]): void

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

Parameters

value: IGroupByExpandState[]

Returns void

groupingExpressions

Gets/Sets the group by state.

get groupingExpressions(): IGroupingExpression[]

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

Example

let groupByState = this.grid.groupingExpressions;
this.grid.groupingExpressions = [...];

Returns IGroupingExpression[]

set groupingExpressions(value: IGroupingExpression[]): void

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

Parameters

value: IGroupingExpression[]

Returns void

groupRowTemplate

Gets/Sets the template reference for the group row.

get groupRowTemplate(): TemplateRef<IgxGroupByRowTemplateContext>

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

Example

const groupRowTemplate = this.grid.groupRowTemplate;
this.grid.groupRowTemplate = myRowTemplate;

Returns TemplateRef<IgxGroupByRowTemplateContext>

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

set groupRowTemplate(template: TemplateRef<IgxGroupByRowTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGroupByRowTemplateContext>

Returns void

groupsRecords

Gets the hierarchical representation of the group by records.

get groupsRecords(): IGroupByRecord[]

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

Example

let groupRecords = this.grid.groupsRecords;

Returns IGroupByRecord[]

groupStrategy

Gets/Sets the grouping strategy of the grid.

get groupStrategy(): IGridGroupingStrategy

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

Example

<igx-grid #grid [data]="localData" [groupStrategy]="groupStrategy"></igx-grid>

Returns IGridGroupingStrategy

set groupStrategy(value: IGridGroupingStrategy): void

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

Parameters

value: IGridGroupingStrategy

Returns void

hasVisibleColumns

Inherited from: IgxGridBaseDirective

Indicates whether the grid has columns that are shown

get hasVisibleColumns(): any

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

Indicates whether the grid has columns that are shown

set hasVisibleColumns(value: boolean): void

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

Parameters

value: boolean

Returns void

headerCollapsedIndicatorTemplate

Inherited from: IgxGridBaseDirective

Gets the row collapse indicator template.

get headerCollapsedIndicatorTemplate(): TemplateRef<IgxGridTemplateContext>

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

Returns TemplateRef<IgxGridTemplateContext>

Sets the row collapse indicator template.

<ng-template igxHeaderCollapsedIndicator>
 <igx-icon role="button">add</igx-icon>
</ng-template>

@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headerCollapsedIndicatorTemplate = this.template;

set headerCollapsedIndicatorTemplate(template: TemplateRef<IgxGridTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridTemplateContext>

Returns void

headerExpandedIndicatorTemplate

Inherited from: IgxGridBaseDirective

Gets the header expand indicator template.

get headerExpandedIndicatorTemplate(): TemplateRef<IgxGridTemplateContext>

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

Returns TemplateRef<IgxGridTemplateContext>

Sets the header expand indicator template.

<ng-template igxHeaderExpandedIndicator>
 <igx-icon role="button">remove</igx-icon>
</ng-template>

@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headerExpandedIndicatorTemplate = this.template;

set headerExpandedIndicatorTemplate(template: TemplateRef<IgxGridTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridTemplateContext>

Returns void

headSelectorTemplate

Inherited from: IgxGridBaseDirective

Gets the header row selector template.

get headSelectorTemplate(): TemplateRef<IgxHeadSelectorTemplateContext>

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

Returns TemplateRef<IgxHeadSelectorTemplateContext>

Sets the header row selector template.

<ng-template #template igxHeadSelector let-headContext>
{{ headContext.selectedCount }} / {{ headContext.totalCount  }}
</ng-template>

@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headSelectorTemplate = this.template;

set headSelectorTemplate(template: TemplateRef<IgxHeadSelectorTemplateContext>): void

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

Parameters

template: TemplateRef<IgxHeadSelectorTemplateContext>

Returns void

height

Inherited from: IgxGridBaseDirective

Gets/Sets the height.

get height(): string

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

Example

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

Returns string

set height(value: string): void

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

Parameters

value: string

Returns void

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:2768

Example

const hiddenCol = this.grid.hiddenColumnsCount;
``

Returns number

hideGroupedColumns

Gets/Sets whether the grouped columns should be hidden.

get hideGroupedColumns(): boolean

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

Example

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

Returns boolean

set hideGroupedColumns(value: boolean): void

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

Parameters

value: boolean

Returns void

hideRowSelectors

Inherited from: IgxGridBaseDirective

Gets/Sets if the row selectors are hidden.

get hideRowSelectors(): boolean

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

Returns boolean

set hideRowSelectors(value: boolean): void

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

Parameters

value: boolean

Returns void

isLoading

Inherited from: IgxGridBaseDirective

get isLoading(): boolean

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

Returns boolean

Gets/Sets whether the grid is going to show a loading indicator.

set isLoading(value: boolean): void

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

Example

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

Parameters

value: boolean

Returns void

lastSearchInfo

Inherited from: IgxGridBaseDirective

Represents the last search information.

get lastSearchInfo(): ISearchInfo

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

Returns ISearchInfo

loadingGridTemplate

Inherited from: IgxGridBaseDirective

Gets/Sets a custom template when loading.

get loadingGridTemplate(): TemplateRef<IgxGridTemplateContext>

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

Example

<ng-template igxGridLoading>
  <!-- content to show when the grid is loading -->
</ng-template>

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

Returns TemplateRef<IgxGridTemplateContext>

set loadingGridTemplate(template: TemplateRef<IgxGridTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridTemplateContext>

Returns void

locale

Inherited from: IgxGridBaseDirective

Gets/Sets the locale.

get locale(): string

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

Returns string

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

set locale(value: string): void

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

Parameters

value: string

Returns void

mergeStrategy

Inherited from: IgxGridBaseDirective

Gets/Sets the merge strategy of the grid.

get mergeStrategy(): IGridMergeStrategy

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

Example

<igx-grid #grid [data]="localData" [mergeStrategy]="mergeStrategy"></igx-grid>

Returns IGridMergeStrategy

set mergeStrategy(value: IGridMergeStrategy): void

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

Parameters

value: IGridMergeStrategy

Returns void

nativeElement

Inherited from: IgxGridBaseDirective

Gets the native element.

get nativeElement(): HTMLElement

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

Example

const nativeEl = this.grid.nativeElement.

Returns HTMLElement

outlet

Inherited from: IgxGridBaseDirective

Gets/Sets the outlet used to attach the grid's overlays to.

get outlet(): IgxOverlayOutletDirective

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

Returns IgxOverlayOutletDirective

set outlet(val: IgxOverlayOutletDirective): void

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

Parameters

val: IgxOverlayOutletDirective

Returns void

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

get pagingMode(): GridPagingMode

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

Returns GridPagingMode

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

set pagingMode(val: GridPagingMode): void

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

Parameters

val: GridPagingMode

Returns void

pinnedColumns

Inherited from: IgxGridBaseDirective

Gets an array of the pinned columns.

get pinnedColumns(): IgxColumnComponent[]

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

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:2775

Returns number

pinnedEndColumns

Inherited from: IgxGridBaseDirective

Gets an array of the pinned to the right columns.

get pinnedEndColumns(): IgxColumnComponent[]

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

Example

const pinnedColumns = this.grid.pinnedEndColumns.

Returns IgxColumnComponent[]

pinnedRows

Inherited from: IgxGridBaseDirective

Gets an array of the pinned rows.

get pinnedRows(): IgxGridRowComponent[]

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

Example

const pinnedRow = this.grid.pinnedRows;

Returns IgxGridRowComponent[]

pinnedStartColumns

Inherited from: IgxGridBaseDirective

Gets an array of the pinned to the left columns.

get pinnedStartColumns(): IgxColumnComponent[]

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

Example

const pinnedColumns = this.grid.pinnedStartColumns.

Returns IgxColumnComponent[]

pinning

Inherited from: IgxGridBaseDirective

Gets/Sets the initial pinning configuration.

get pinning(): IPinningConfig

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

Example

<igx-grid [pinning]="pinningConfig"></igx-grid>

Returns IPinningConfig

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)

set pinning(value: IPinningConfig): void

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

Parameters

value: IPinningConfig

Returns void

primaryKey

Inherited from: IgxGridBaseDirective

Gets/Sets the primary key.

get primaryKey(): string

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

Example

<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>

Returns string

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

set primaryKey(value: string): void

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

Parameters

value: string

Returns void

resourceStrings

Inherited from: IgxGridBaseDirective

get resourceStrings(): IGridResourceStrings

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

Returns IGridResourceStrings

Gets/Sets the resource strings.

set resourceStrings(value: IGridResourceStrings): void

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

Parameters

value: IGridResourceStrings

Returns void

rowAddTextTemplate

Inherited from: IgxGridBaseDirective

Gets the row add text template.

get rowAddTextTemplate(): TemplateRef<IgxGridEmptyTemplateContext>

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

Returns TemplateRef<IgxGridEmptyTemplateContext>

Sets the row add text template.

<ng-template #template igxRowAddText>
Adding Row
</ng-template>

@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowAddTextTemplate = this.template;

set rowAddTextTemplate(template: TemplateRef<IgxGridEmptyTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridEmptyTemplateContext>

Returns void

rowCollapsedIndicatorTemplate

Inherited from: IgxGridBaseDirective

Gets the row collapse indicator template.

get rowCollapsedIndicatorTemplate(): TemplateRef<IgxGridRowTemplateContext>

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

Returns TemplateRef<IgxGridRowTemplateContext>

Sets the row collapse indicator template.

<ng-template igxRowCollapsedIndicator>
 <igx-icon role="button">add</igx-icon>
</ng-template>

@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowCollapsedIndicatorTemplate = this.template;

set rowCollapsedIndicatorTemplate(template: TemplateRef<IgxGridRowTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridRowTemplateContext>

Returns void

rowDraggable

Inherited from: IgxGridBaseDirective

Gets/Sets whether rows can be moved.

get rowDraggable(): boolean

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

Example

<igx-grid #grid [rowDraggable]="true"></igx-grid>

Returns boolean

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

set rowDraggable(val: boolean): void

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

Parameters

val: boolean

Returns void

rowEditable

Inherited from: IgxGridBaseDirective

Gets/Sets whether the rows are editable.

get rowEditable(): boolean

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

Example

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

Returns boolean

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

set rowEditable(val: boolean): void

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

Parameters

val: boolean

Returns void

rowEditActionsTemplate

Inherited from: IgxGridBaseDirective

Gets the row edit actions template.

get rowEditActionsTemplate(): TemplateRef<IgxGridRowEditActionsTemplateContext>

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

Returns TemplateRef<IgxGridRowEditActionsTemplateContext>

Sets the row edit actions template.

<ng-template #template igxRowEditActions let-endRowEdit>
    <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
    <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>

@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowEditActionsTemplate = this.template;

set rowEditActionsTemplate(template: TemplateRef<IgxGridRowEditActionsTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridRowEditActionsTemplateContext>

Returns void

rowEditTextTemplate

Inherited from: IgxGridBaseDirective

Gets the row edit text template.

get rowEditTextTemplate(): TemplateRef<IgxGridRowEditTextTemplateContext>

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

Returns TemplateRef<IgxGridRowEditTextTemplateContext>

Sets the row edit text template.

<ng-template #template igxRowEditText let-rowChangesCount>
Changes: {{rowChangesCount}}
</ng-template>

@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowEditTextTemplate = this.template;

set rowEditTextTemplate(template: TemplateRef<IgxGridRowEditTextTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridRowEditTextTemplateContext>

Returns void

rowExpandedIndicatorTemplate

Inherited from: IgxGridBaseDirective

Gets the row expand indicator template.

get rowExpandedIndicatorTemplate(): TemplateRef<IgxGridRowTemplateContext>

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

Returns TemplateRef<IgxGridRowTemplateContext>

Sets the row expand indicator template.

<ng-template igxRowExpandedIndicator>
 <igx-icon role="button">remove</igx-icon>
</ng-template>

@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowExpandedIndicatorTemplate = this.template;

set rowExpandedIndicatorTemplate(template: TemplateRef<IgxGridRowTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridRowTemplateContext>

Returns void

rowHeight

Inherited from: IgxGridBaseDirective

Gets/Sets the row height.

get rowHeight(): number

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

Example

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

Returns number

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

set rowHeight(value: string | number): void

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

Parameters

value: string | number

Returns void

rowList

Inherited from: IgxGridBaseDirective

A list of grid row.

get rowList(): QueryList<IgxRowDirective>

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

Example

const rowList = this.grid.rowList;

Returns QueryList<IgxRowDirective>

rowSelection

Inherited from: IgxGridBaseDirective

Gets/Sets row selection mode

get rowSelection(): GridSelectionMode

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

Returns GridSelectionMode

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

set rowSelection(selectionMode: GridSelectionMode): void

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

Parameters

selectionMode: GridSelectionMode

Returns void

rowSelectorTemplate

Inherited from: IgxGridBaseDirective

Gets the row selector template.

get rowSelectorTemplate(): TemplateRef<IgxRowSelectorTemplateContext>

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

Returns TemplateRef<IgxRowSelectorTemplateContext>

Sets a custom template for the row selectors.

<ng-template #template igxRowSelector let-rowContext>
   <igx-checkbox [checked]="rowContext.selected"></igx-checkbox>
</ng-template>

@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowSelectorTemplate = this.template;

set rowSelectorTemplate(template: TemplateRef<IgxRowSelectorTemplateContext>): void

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

Parameters

template: TemplateRef<IgxRowSelectorTemplateContext>

Returns void

selectedCells

Returns an array of the selected grid cells.

get selectedCells(): CellType[]

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

Example

const selectedCells = this.grid.selectedCells;

Returns CellType[]

selectedRows

Inherited from: IgxGridBaseDirective

get selectedRows(): any[]

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

Returns any[]

Gets/Sets the current selection state.

set selectedRows(rowIDs: any[]): void

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

Example

<igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>

Parameters

rowIDs: any[]

Returns void

selectRowOnClick

Inherited from: IgxGridBaseDirective

Gets/Sets whether clicking over a row should select/deselect it

get selectRowOnClick(): boolean

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

Returns boolean

set selectRowOnClick(enabled: boolean): void

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

Parameters

enabled: boolean

Returns void

shouldGenerate

Inherited from: IgxGridBaseDirective

Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid

get shouldGenerate(): boolean

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

Example

this.grid.shouldGenerate = true;

Returns boolean

set shouldGenerate(value: boolean): void

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

Parameters

value: boolean

Returns void

showGroupArea

Returns whether the grid has group area.

get showGroupArea(): boolean

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

Example

let isGroupAreaVisible = this.grid.showGroupArea;

Returns boolean

set showGroupArea(value: boolean): void

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

Parameters

value: boolean

Returns void

showSummaryOnCollapse

Inherited from: IgxGridBaseDirective

Controls whether the summary row is visible when groupBy/parent row is collapsed.

get showSummaryOnCollapse(): boolean

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

Example

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

Returns boolean

set showSummaryOnCollapse(value: boolean): void

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

Parameters

value: boolean

Returns void

sortAscendingHeaderIconTemplate

Inherited from: IgxGridBaseDirective

The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.

get sortAscendingHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>

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

Returns TemplateRef<IgxGridHeaderTemplateContext>

Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order.

<ng-template #template igxSortAscendingHeaderIcon>
   <igx-icon>expand_less</igx-icon>
</ng-template>

@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortAscendingHeaderIconTemplate = this.template;

set sortAscendingHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridHeaderTemplateContext>

Returns void

sortDescendingHeaderIconTemplate

Inherited from: IgxGridBaseDirective

The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.

get sortDescendingHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>

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

Returns TemplateRef<IgxGridHeaderTemplateContext>

Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order.

<ng-template #template igxSortDescendingHeaderIcon>
   <igx-icon>expand_more</igx-icon>
</ng-template>

@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortDescendingHeaderIconTemplate = this.template;

set sortDescendingHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridHeaderTemplateContext>

Returns void

sortHeaderIconTemplate

Inherited from: IgxGridBaseDirective

Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.

get sortHeaderIconTemplate(): TemplateRef<IgxGridHeaderTemplateContext>

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

Returns TemplateRef<IgxGridHeaderTemplateContext>

Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted.

<ng-template #template igxSortHeaderIcon>
   <igx-icon>unfold_more</igx-icon>
</ng-template>

@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortHeaderIconTemplate = this.template;

set sortHeaderIconTemplate(template: TemplateRef<IgxGridHeaderTemplateContext>): void

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

Parameters

template: TemplateRef<IgxGridHeaderTemplateContext>

Returns void

sortingExpressions

Inherited from: IgxGridBaseDirective

Gets/Sets the sorting state.

get sortingExpressions(): ISortingExpression<any>[]

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

Example

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

Returns ISortingExpression<any>[]

set sortingExpressions(value: ISortingExpression<any>[]): void

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

Parameters

value: ISortingExpression<any>[]

Returns void

sortingOptions

Inherited from: IgxGridBaseDirective

get sortingOptions(): ISortingOptions

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

Returns ISortingOptions

Gets/Sets the sorting options - single or multiple sorting. Accepts an ISortingOptions object with any of the mode properties.

set sortingOptions(value: ISortingOptions): void

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

Example

const _sortingOptions: ISortingOptions = {
     mode: 'single'
}

html <igx-grid [sortingOptions]="sortingOptions">

Parameters

value: ISortingOptions

Returns void

sortStrategy

Inherited from: IgxGridBaseDirective

Gets/Sets the sorting strategy of the grid.

get sortStrategy(): IGridSortingStrategy

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

Example

<igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>

Returns IGridSortingStrategy

set sortStrategy(value: IGridSortingStrategy): void

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

Parameters

value: IGridSortingStrategy

Returns void

summaryCalculationMode

Inherited from: IgxGridBaseDirective

Gets/Sets the summary calculation mode.

get summaryCalculationMode(): GridSummaryCalculationMode

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

Example

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

Returns GridSummaryCalculationMode

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

set summaryCalculationMode(value: GridSummaryCalculationMode): void

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

Parameters

value: GridSummaryCalculationMode

Returns void

summaryPosition

Inherited from: IgxGridBaseDirective

Gets/Sets the summary position.

get summaryPosition(): GridSummaryPosition

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

Example

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

Returns GridSummaryPosition

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

set summaryPosition(value: GridSummaryPosition): void

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

Parameters

value: GridSummaryPosition

Returns void

summaryRowHeight

Inherited from: IgxGridBaseDirective

get summaryRowHeight(): number

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

Returns number

Get/Set summary row height

set summaryRowHeight(value: number): void

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

Parameters

value: number

Returns void

totalItemCount

get totalItemCount(): number

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

Returns number

Gets/Sets the total number of records in the data source.

set totalItemCount(count: number): void

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

Example

const itemCount = this.grid1.totalItemCount;
this.grid1.totalItemCount = 55;

Parameters

count: number

Returns void

totalRecords

Inherited from: IgxGridBaseDirective

Returns the total number of records.

get totalRecords(): number

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

Example

const totalRecords = this.grid.totalRecords;

Returns number

set totalRecords(total: number): void

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

Parameters

total: number

Returns void

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:2808

Returns TransactionService<Transaction, State>

unpinnedColumns

Inherited from: IgxGridBaseDirective

Gets an array of unpinned columns.

get unpinnedColumns(): IgxColumnComponent[]

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

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:3552

Example

const gridVirtState = this.grid1.virtualizationState;

Returns IForOfState

visibleColumns

Inherited from: IgxGridBaseDirective

Returns an array of visible columns.

get visibleColumns(): IgxColumnComponent[]

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

Example

const visibleColumns = this.grid.visibleColumns.

Returns IgxColumnComponent[]

width

Inherited from: IgxGridBaseDirective

Gets/Sets the width of the grid.

get width(): string

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

Example

let gridWidth = this.grid.width;

Returns string

set width(value: string): void

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

Parameters

value: string

Returns void

Methods

addRow

Inherited from: IgxGridBaseDirective

Creates a new grid row 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:4897

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:6527

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:6585

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:5862

Returns void

Example

this.grid.clearCellSelection();

clearFilter

Inherited from: IgxGridBaseDirective

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

clearFilter(name: string): void

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

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:779

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:5441

Returns void

Example

this.grid.clearSearch();

clearSort

Inherited from: IgxGridBaseDirective

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

clearSort(name: string): void

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

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:6414

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:4369

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:4400

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 grid row and the corresponding data record by primary key.

deleteRow(rowSelector: any): any

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

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:6025

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:5846

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:5999

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:5810

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:841

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:5172

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:5150

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:6491

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:4356

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:4385

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

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

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

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 column in the grid with the same condition.

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

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

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:5374

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:5391

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:856

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:1212

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:1235

Parameters

rowSelector: any
match any rowID
columnField: string

Returns CellType

Example

grid.getCellByKey(1, 'index');

getColumnByName

Inherited from: IgxGridBaseDirective

Returns the column by field name.

getColumnByName(name: string): IgxColumnComponent

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

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:4664

Parameters

index: number

Returns IgxColumnComponent

getHeaderGroupWidth

Inherited from: IgxGridBaseDirective

Gets the width to be set on grid header group.

getHeaderGroupWidth(column: IgxColumnComponent): string

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

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:6229

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:5691

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:5668

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:6265

Parameters

currRowIndex: number
curVisibleColIndex: number
callback: object

Returns ICellPosition

Example

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

getRowByIndex

Returns the grid row by index.

getRowByIndex(index: number): RowType

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

Parameters

index: number

Returns RowType

Example

const myRow = grid.getRowByIndex(1);

getRowByKey

Returns grid row object by the specified primary key.

getRowByKey(key: any): RowType

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

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:5046

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:6050

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:1098

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:5930

Returns GridSelectionRange[]

groupBy

Groups by a new column 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:752

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:796

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:3590

Parameters

rowIndex: number
Index of the record in the filteredSortedData collection.

Returns boolean

markForCheck

Inherited from: IgxGridBaseDirective

Triggers change detection for the grid. 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:4882

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:4805

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:6181

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:6394

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:5243

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:1243

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:4679

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:5357

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:5406

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:6038

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:5828

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:5971

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:5956

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:5890

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:5796

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:826

Parameters

groupRow: IGroupByRecord
clearPrevSelection: boolean

Returns void

Example

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

sort

Inherited from: IgxGridBaseDirective

Sort a single column.

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

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

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:878

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:4311

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:811

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:4416

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:5258

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:1248

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 grid row 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:4972

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 grid row

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

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

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