IgxGridCellComponent

Providing reference to grid cell:

@ViewChild('grid', { read: IgxGridComponent })
 public grid: IgxGridComponent;

let column = this.grid.columnList.first;

let cell = column.cells[0];

Constructors

new IgxGridCellComponent(): IgxGridCellComponent

Returns IgxGridCellComponent

Properties

activeHighlightClass

Sets/gets the active highlight class class of the cell. Default value is "igx-highlight__active".

let activeHighlightClass = this.cell.activeHighlightClass;

this.cell.activeHighlightClass = 'igx-cell-highlight_active';

activeHighlightClass: string = 'igx-highlight__active'

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:819

cdr

cdr: ChangeDetectorRef

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:115

cellTemplate

Sets/gets the template of the cell.

<ng-template #cellTemplate igxCell let-value>
  <div style="font-style: oblique; color:blueviolet; background:red">
      <span>{{value}}</span>
  </div>
</ng-template>

@ViewChild('cellTemplate',{read: TemplateRef})
cellTemplate: TemplateRef<any>;

this.cell.cellTemplate = this.cellTemplate;

let template =  this.cell.cellTemplate;

cellTemplate: TemplateRef<any>

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:244

cellValidationErrorTemplate

cellValidationErrorTemplate: TemplateRef<any>

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:247

column

Gets the column of the cell.

let cellColumn = this.cell.column;

column: ColumnType

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:160

editMode

Returns whether the cell is in edit mode.

editMode: boolean = false

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:520

Optional formatter

Gets the cell formatter.

let cellForamatter = this.cell.formatter;

formatter: object

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:275

grid

Represents the grid instance containing the cell

grid: GridType

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:113

highlightClass

Sets/gets the highlight class of the cell. Default value is "igx-highlight".

let highlightClass = this.cell.highlightClass;

this.cell.highlightClass = 'igx-cell-highlight';

highlightClass: string = 'igx-highlight'

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:805

isMerged

Gets whether this cell is a merged cell.

isMerged: boolean

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:173

pinnedIndicator

pinnedIndicator: TemplateRef<any>

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

role

Sets/get the role property of the cell. Default value is "gridcell".

this.cell.role = 'grid-cell';

let cellRole = this.cell.role;

role: string = 'gridcell'

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:535

rowData

Gets the data of the row of the cell.

let rowData = this.cell.rowData;

rowData: any

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:212

value

Sets/gets the cell value.

this.cell.value = "Cell Value";

let cellValue = this.cell.value;

value: any

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:264

width

Gets the width of the cell.

let cellWidth = this.cell.width;

width: string = ''

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:628

Accessors

ariaSelected

get ariaSelected(): boolean

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:638

Returns boolean

attrCellID

get attrCellID(): string

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:418

Returns string

booleanClass

get booleanClass(): any

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:450

Returns any

cellID

Gets the ID of the cell.

let cellID = this.cell.cellID;

get cellID(): object

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:411

Returns object

cellSelectionMode

get cellSelectionMode(): any

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:475

set cellSelectionMode(value: GridSelectionMode): void

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:475

Parameters

value: GridSelectionMode

Returns void

colEnd

get colEnd(): number

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:607

Returns number

colStart

get colStart(): number

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:615

Returns number

columnIndex

Gets the index of the cell column.

let columnIndex = this.cell.columnIndex;

get columnIndex(): number

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:381

Returns number

columnSelected

Gets whether the cell column is selected.

let isCellColumnSelected = this.cell.columnSelected;

get columnSelected(): boolean

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:682

Returns boolean

context

Gets the cell template context object.

let context = this.cell.context();

get context(): IgxCellTemplateContext

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:285

Returns IgxCellTemplateContext

editable

Returns whether the cell is editable.

get editable(): boolean

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:719

Returns boolean

editValue

Gets the current edit value while a cell is in edit mode. Only for cell editing mode.

let editValue = this.cell.editValue;

get editValue(): any

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:710

Returns any

Sets the current edit value while a cell is in edit mode. Only for cell editing mode.

this.cell.editValue = value;

set editValue(value: any): void

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:695

Parameters

value: any

Returns void

gridColumnSpan

get gridColumnSpan(): number

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:599

Returns number

gridID

Gets the id of the grid in which the cell is stored.

let gridId = this.cell.gridID;

get gridID(): any

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:355

Returns any

gridRowSpan

get gridRowSpan(): number

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:595

Returns number

nativeElement

Returns a reference to the nativeElement of the cell.

let cellNativeElement = this.cell.nativeElement;

get nativeElement(): HTMLElement

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:462

Returns HTMLElement

pinnedIndicatorTemplate

Gets the pinned indicator template.

let template = this.cell.pinnedIndicatorTemplate;

get pinnedIndicatorTemplate(): TemplateRef<any>

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:340

Returns TemplateRef<any>

readonly

Gets whether the cell is editable.

let isCellReadonly = this.cell.readonly;

get readonly(): boolean

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:546

Returns boolean

row

Gets the row of the cell.

let cellRow = this.cell.row;

get row(): RowType

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:199

Returns RowType

rowEnd

get rowEnd(): number

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:603

Returns number

rowIndex

Gets the index of the row where the cell is stored.

let rowIndex = this.cell.rowIndex;

get rowIndex(): number

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:369

Returns number

rowStart

get rowStart(): number

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:611

Returns number

selected

Gets whether the cell is selected.

let isSelected = this.cell.selected;

get selected(): boolean

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:651

Returns boolean

Selects/deselects the cell.

this.cell.selected = true.

set selected(val: boolean): void

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:663

Parameters

val: boolean

Returns void

template

Gets the cell template.

let template = this.cell.template;

get template(): TemplateRef<any>

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:315

Returns TemplateRef<any>

title

An optional title to display for the cell

get title(): any

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:423

Returns any

visibleColumnIndex

Returns the column visible index.

let visibleColumnIndex = this.cell.visibleColumnIndex;

get visibleColumnIndex(): number

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:395

Returns number

The index of the column that the cell belongs to. It counts only the visible (not hidden) columns

set visibleColumnIndex(val: number): void

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:399

Parameters

val: number

Returns void

Methods

clearHighlight

Clears the highlight of the text in the cell.

this.cell.clearHighLight();

clearHighlight(): void

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:1192

Returns void

highlightText

If the provided string matches the text in the cell, the text gets highlighted.

this.cell.highlightText('Cell Value', true);

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

Defined in projects/igniteui-angular/grids/core/src/cell.component.ts:1180

Parameters

text: string
caseSensitive: boolean
exactMatch: boolean

Returns number

ngAfterViewInit

A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.