Class ϴIgxGridCellComponent

Providing reference to IgxGridCellComponent:

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

 let column = this.grid.columnList.first;

 let cell = column.cells[0];

Hierarchy

ϴIgxGridCellComponent
- IgxGridExpandableCellComponent
- θIgxHierarchicalGridCellComponent

Implements

OnInit
OnChanges
OnDestroy
CellType
AfterViewInit

Constructors

constructor

new ϴIgxGridCellComponent(selectionService: IgxGridSelectionService, grid: GridType, overlayService: IgxOverlayService, cdr: ChangeDetectorRef, element: ElementRef<HTMLElement>, zone: NgZone, touchManager: HammerGesturesManager, platformUtil: PlatformUtil): ϴIgxGridCellComponent
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:749
Parameters
- selectionService: IgxGridSelectionService
- grid: GridType
- overlayService: IgxOverlayService
- cdr: ChangeDetectorRef
- element: ElementRef<HTMLElement>
- zone: NgZone
- touchManager: HammerGesturesManager
- platformUtil: PlatformUtil
Returns ϴIgxGridCellComponent

Properties

activeHighlightClass

activeHighlightClass: string = 'igx-highlight__active'

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

Memberof

IgxGridCellComponent

cdr

cdr: ChangeDetectorRef

cellTemplate

cellTemplate: TemplateRef<any>

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;

Memberof

IgxGridCellComponent

cellValidationErrorTemplate

cellValidationErrorTemplate: TemplateRef<any>

column

column: ColumnType

Gets the column of the cell.

 let cellColumn = this.cell.column;

Memberof

IgxGridCellComponent

defaultErrorTemplate

defaultErrorTemplate: TemplateRef<any>

Gets the default error template.

editMode

editMode: boolean = false

Returns whether the cell is in edit mode.

formatter

formatter: ((value: any, rowData?: any, columnData?: any) => any)

Type declaration

- (value: any, rowData?: any, columnData?: any): any
- Gets the cell formatter.
```
let cellForamatter = this.cell.formatter;
```
  Memberof
  IgxGridCellComponent
  Parameters
  - value: any
  - Optional rowData: any
  - Optional columnData: any
  Returns any

grid

grid: GridType

highlightClass

highlightClass: string = 'igx-highlight'

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

let highlightClass = this.cell.highlightClass;

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

Memberof

IgxGridCellComponent

pinnedIndicator

pinnedIndicator: TemplateRef<any>

role

role: string = 'gridcell'

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

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

let cellRole = this.cell.role;

Memberof

IgxGridCellComponent

rowData

rowData: any

Gets the data of the row of the cell.

let rowData = this.cell.rowData;

Memberof

IgxGridCellComponent

value

value: any

Sets/gets the cell value.

this.cell.value = "Cell Value";

let cellValue = this.cell.value;

Memberof

IgxGridCellComponent

width

width: string = ''

Gets the width of the cell.

let cellWidth = this.cell.width;

Memberof

IgxGridCellComponent

Accessors

cellID

get cellID(): {
    columnID: number;
    rowID: any;
    rowIndex: number;
}
Implementation of CellType.cellID
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:336
Gets the ID of the cell.
```
let cellID = this.cell.cellID;
```
Memberof
IgxGridCellComponent
Returns {
    columnID: number;
    rowID: any;
    rowIndex: number;
}
- columnID: number
- rowID: any
- rowIndex: number

cellSelectionMode

set cellSelectionMode(value: string): void
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:399
Parameters
- value: string
Returns void

colEnd

get colEnd(): number
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:529
Returns number

colStart

get colStart(): number
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:537
Returns number

columnIndex

get columnIndex(): number
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:306
Gets the index of the cell column.
```
let columnIndex = this.cell.columnIndex;
```
Memberof
IgxGridCellComponent
Returns number

columnSelected

get columnSelected(): boolean
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:603
Gets whether the cell column is selected.
```
let isCellColumnSelected = this.cell.columnSelected;
```
Memberof
IgxGridCellComponent
Returns boolean

context

get context(): IgxCellTemplateContext
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:213
Gets the cell template context object.
```
 let context = this.cell.context();
```
Memberof
IgxGridCellComponent
Returns IgxCellTemplateContext

editValue

get editValue(): any
Implementation of CellType.editValue
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:632
Gets the current edit value while a cell is in edit mode. Only for cell editing mode.
```
let editValue = this.cell.editValue;
```
Memberof
IgxGridCellComponent
Returns any
set editValue(value: any): void
Implementation of CellType.editValue
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:617
Sets the current edit value while a cell is in edit mode. Only for cell editing mode.
```
this.cell.editValue = value;
```
Memberof
IgxGridCellComponent
Parameters
- value: any
Returns void

editable

get editable(): boolean
Implementation of CellType.editable
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:641
Returns whether the cell is editable.

Returns boolean

gridColumnSpan

get gridColumnSpan(): number
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:521
Returns number

gridID

get gridID(): any
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:280
Gets the id of the grid in which the cell is stored.
```
let gridId = this.cell.gridID;
```
Memberof
IgxGridCellComponent
Returns any

gridRowSpan

get gridRowSpan(): number
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:517
Returns number

nativeElement

get nativeElement(): HTMLElement
Implementation of CellType.nativeElement
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:386
Returns a reference to the nativeElement of the cell.
```
let cellNativeElement = this.cell.nativeElement;
```
Memberof
IgxGridCellComponent
Returns HTMLElement

pinnedIndicatorTemplate

get pinnedIndicatorTemplate(): TemplateRef<any>
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:265
Gets the pinned indicator template.
```
let template = this.cell.pinnedIndicatorTemplate;
```
Memberof
IgxGridCellComponent
Returns TemplateRef<any>

readonly

get readonly(): boolean
Implementation of CellType.readonly
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:469
Gets whether the cell is editable.
```
let isCellReadonly = this.cell.readonly;
```
Memberof
IgxGridCellComponent
Returns boolean

row

get row(): RowType
Implementation of CellType.row
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:126
Gets the row of the cell.
```
let cellRow = this.cell.row;
```
Memberof
IgxGridCellComponent
Returns RowType

rowEnd

get rowEnd(): number
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:525
Returns number

rowIndex

get rowIndex(): number
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:293
Gets the index of the row where the cell is stored.
```
let rowIndex = this.cell.rowIndex;
```
Memberof
IgxGridCellComponent
Returns number

rowStart

get rowStart(): number
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:533
Returns number

selected

get selected(): boolean
Implementation of CellType.selected
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:572
Gets whether the cell is selected.
```
let isSelected = this.cell.selected;
```
Memberof
IgxGridCellComponent
Returns boolean
set selected(val: boolean): void
Implementation of CellType.selected
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:585
Selects/deselects the cell.
```
this.cell.selected = true.
```
Memberof
IgxGridCellComponent
Parameters
- val: boolean
Returns void

template

get template(): TemplateRef<any>
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:243
Gets the cell template.
```
let template = this.cell.template;
```
Memberof
IgxGridCellComponent
Returns TemplateRef<any>

title

get title(): any
Implementation of CellType.title
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:347
Returns any

visibleColumnIndex

get visibleColumnIndex(): number
Implementation of CellType.visibleColumnIndex
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:318
Returns the column visible index.
```
let visibleColumnIndex = this.cell.visibleColumnIndex;
```
Memberof
IgxGridCellComponent
Returns number
set visibleColumnIndex(val: number): void
Implementation of CellType.visibleColumnIndex
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:324
Parameters
- val: number
Returns void

Methods

clearHighlight

clearHighlight(): void
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:1097
Clears the highlight of the text in the cell.
```
this.cell.clearHighLight();
```
Memberof
IgxGridCellComponent
Returns void

highlightText

highlightText(text: string, caseSensitive?: boolean, exactMatch?: boolean): number
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:1085
If the provided string matches the text in the cell, the text gets highlighted.
```
this.cell.highlightText('Cell Value', true);
```
Memberof
IgxGridCellComponent
Parameters
- text: string
- Optional caseSensitive: boolean
- Optional exactMatch: boolean
Returns number

ngAfterViewInit

ngAfterViewInit(): void
Implementation of AfterViewInit.ngAfterViewInit
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:821
Returns void

setEditMode

setEditMode(value: boolean): void
Implementation of CellType.setEditMode
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:915
Starts/ends edit mode for the cell.
```
cell.setEditMode(true);
```
Parameters
- value: boolean
Returns void

update

update(val: any): void
Implementation of CellType.update
- Defined in projects/igniteui-angular/src/lib/grids/cell.component.ts:940
Sets new value to the cell.
```
this.cell.update('New Value');
```
Memberof
IgxGridCellComponent
Parameters
- val: any
Returns void

Class ϴIgxGridCellComponent

Hierarchy

Hierarchy

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

selectionService: IgxGridSelectionService

grid: GridType

overlayService: IgxOverlayService

cdr: ChangeDetectorRef

element: ElementRef<HTMLElement>

zone: NgZone

touchManager: HammerGesturesManager

platformUtil: PlatformUtil

Returns ϴIgxGridCellComponent

Properties

activeHighlightClass

Memberof

cdr

cellTemplate

Memberof

cellValidationErrorTemplate

column

Memberof

defaultErrorTemplate

editMode

formatter

Type declaration

Memberof

Parameters

value: any

Optional rowData: any

Optional columnData: any

Returns any

grid

highlightClass

Memberof

pinnedIndicator

role

Memberof

rowData

Memberof

value

Memberof

width

Memberof

Accessors

ariaSelected

Returns boolean

attrCellID

Returns string

booleanClass

Returns any

cellID

Memberof

Returns { columnID: number; rowID: any; rowIndex: number; }

columnID: number

rowID: any

rowIndex: number

cellSelectionMode

Parameters

value: string

Returns void

colEnd

Returns number

colStart

Returns number

columnIndex

Memberof

Returns number

columnSelected

Memberof

Returns boolean

context

Memberof

Returns {
columnID: number;
rowID: any;
rowIndex: number;
}