Ignite UI for Angular Column Group

Constructors

Section titled "Constructors"

IgxColumnGroupComponent 

new IgxColumnGroupComponent(): IgxColumnGroupComponent

Returns IgxColumnGroupComponent

Properties

Section titled "Properties"

additionalTemplateContext

Section titled "additionalTemplateContext"

Inherited from: IgxColumnComponent

Sets/gets custom properties provided in additional template context.

<igx-column [additionalTemplateContext]="contextObject">
  <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
     {{ props }}
  </ng-template>
</igx-column>
additionalTemplateContext: any

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:903

autosizeHeader

Section titled "autosizeHeader"

Inherited from: IgxColumnComponent

Sets/gets whether the column header is included in autosize logic. Useful when template for a column header is sized based on parent, for example a default div. Default value is false.

let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>
autosizeHeader: boolean = true

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:324

cellClasses

Section titled "cellClasses"

Inherited from: IgxColumnComponent

Sets a conditional class selector of the column cells. Accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean, like so:

callback = (rowData, columnKey, cellValue, rowIndex) => { return rowData[columnKey] > 6; }
cellClasses = { 'className' : this.callback };
<igx-column [cellClasses] = "cellClasses"></igx-column>
<igx-column [cellClasses] = "{'class1' : true }"></igx-column>
cellClasses: any

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:672

cellStyles

Section titled "cellStyles"

Inherited from: IgxColumnComponent

Sets conditional style properties on the column cells. Similar to ngStyle it accepts an object literal where the keys are the style properties and the value is the expression to be evaluated. As with cellClasses it accepts a callback function.

styles = {
 background: 'royalblue',
 color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit'
}
<igx-column [cellStyles]="styles"></igx-column>
cellStyles: GridStyleCSSProperty | null = null

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

children

Section titled "children" 
children: QueryList<IgxColumnComponent>

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:51

colEnd

Section titled "colEnd"

Inherited from: IgxColumnComponent

Column index where the current field should end. The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field

<igx-column-layout>
  <igx-column [colEnd]="3" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
colEnd: number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:861

collapsibleIndicatorTemplate

Section titled "collapsibleIndicatorTemplate"

Allows you to define a custom template for expand/collapse indicator

 
collapsibleIndicatorTemplate: TemplateRef<IgxColumnTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:201

colStart

Section titled "colStart"

Inherited from: IgxColumnComponent

Column index from which the field is starting.

<igx-column-layout>
  <igx-column [colStart]="1" [rowStart]="1"></igx-column>
</igx-column-layout>
colStart: number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:887

dataType

Section titled "dataType"

Inherited from: IgxColumnComponent

Sets/gets the data type of the column values. Default value is string.

let columnDataType = this.column.dataType;
<igx-column [dataType] = "'number'"></igx-column>
dataType: GridColumnDataType = GridColumnDataType.String

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:829

disableHiding

Section titled "disableHiding"

Inherited from: IgxColumnComponent

Gets whether the hiding is disabled.

let isHidingDisabled =  this.column.disableHiding;
disableHiding: boolean = false

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:481

disablePinning

Section titled "disablePinning"

Inherited from: IgxColumnComponent

Gets whether the pinning is disabled.

let isPinningDisabled =  this.column.disablePinning;
disablePinning: boolean = false

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:493

expandedChange

Section titled "expandedChange"

Inherited from: IgxColumnComponent

Emitted when the column expanded or collapsed.

<igx-column (expandedChange)="expandedChange($event)">
</igx-column>
expandedChange: EventEmitter<boolean>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:456

filterable

Section titled "filterable"

Inherited from: IgxColumnComponent

Sets/gets whether the column is filterable. Default value is true.

let isFilterable = this.column.filterable;
<igx-column [filterable] = "false"></igx-column>
filterable: boolean = true

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:292

filteringIgnoreCase

Section titled "filteringIgnoreCase"

Inherited from: IgxColumnComponent

Sets/gets whether the column filtering should be case sensitive. Default value is true.

let filteringIgnoreCase = this.column.filteringIgnoreCase;
<igx-column [filteringIgnoreCase] = "false"></igx-column>
filteringIgnoreCase: boolean = true

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:784

Optional formatter

Section titled "formatter"

Inherited from: IgxColumnComponent

Applies display format to cell values in the column. Does not modify the underlying data.

 
formatter: object

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:735

Remarks

Note: As the formatter is used in places like the Excel style filtering dialog, in certain scenarios (remote filtering for example), the row data argument can be undefined.

In this example, we check to see if the column name is Salary, and then provide a method as the column formatter to format the value into a currency string.

Example

columnInit(column: IgxColumnComponent) {
  if (column.field == "Salary") {
    column.formatter = (salary => this.format(salary));
  }
}

format(value: number) : string {
  return formatCurrency(value, "en-us", "$");
}

grid

Section titled "grid"

Inherited from: IgxColumnComponent

Represents the instance of the parent GridType that contains this column.

 
grid: GridType

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:84

Section titled "header"

Inherited from: IgxColumnComponent

Sets/gets the header value.

let columnHeader = this.column.header;
<igx-column [header] = "'ID'"></igx-column>
header: string = ''

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:156

headerClasses

Section titled "headerClasses"

Inherited from: IgxColumnComponent

Sets/gets the class selector of the column header.

let columnHeaderClass = this.column.headerClasses;
<igx-column [headerClasses] = "'column-header'"></igx-column>
headerClasses: string = ''

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:591

headerGroupClasses

Section titled "headerGroupClasses"

Inherited from: IgxColumnComponent

Sets/gets the class selector of the column group header.

let columnHeaderClass = this.column.headerGroupClasses;
<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column>
headerGroupClasses: string = ''

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

headerGroupStyles

Section titled "headerGroupStyles"

Inherited from: IgxColumnComponent

Sets conditional style properties on the column header group wrapper. Similar to ngStyle it accepts an object literal where the keys are the style properties and the value is the expression to be evaluated.

styles = {
 background: 'royalblue',
 color: (column) => column.pinned ? 'red': 'inherit'
}
<igx-column [headerGroupStyles]="styles"></igx-column>
headerGroupStyles: GridStyleCSSProperty | null = null

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:649

headerStyles

Section titled "headerStyles"

Inherited from: IgxColumnComponent

Sets conditional style properties on the column header. Similar to ngStyle it accepts an object literal where the keys are the style properties and the value is the expression to be evaluated.

styles = {
 background: 'royalblue',
 color: (column) => column.pinned ? 'red': 'inherit'
}
<igx-column [headerStyles]="styles"></igx-column>
headerStyles: GridStyleCSSProperty | null = null

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:612

hiddenChange

Section titled "hiddenChange"

Inherited from: IgxColumnComponent

Emitted when the column is hidden or shown.

<igx-column (hiddenChange)="hiddenChange($event)">
</igx-column>
hiddenChange: EventEmitter<boolean>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:444

parent

Section titled "parent"

Inherited from: IgxColumnComponent

Sets/gets the parent column.

let parentColumn = this.column.parent;
this.column.parent = higherLevelColumn;
parent: ColumnType | null = null

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1834

pinnedChange

Section titled "pinnedChange"

Inherited from: IgxColumnComponent

Emitted when the column is pinned/unpinned.

<igx-column (pinnedChange)="pinnedChange($event)">
</igx-column>
pinnedChange: EventEmitter<boolean>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:927

resizable

Section titled "resizable"

Inherited from: IgxColumnComponent

Sets/gets whether the column is resizable. Default value is false.

let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>
resizable: boolean = false

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:307

rowEnd

Section titled "rowEnd"

Inherited from: IgxColumnComponent

Row index where the current field should end. The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field

<igx-column-layout>
  <igx-column [rowEnd]="2" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
rowEnd: number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:847

rowStart

Section titled "rowStart"

Inherited from: IgxColumnComponent

Row index from which the field is starting.

<igx-column-layout>
  <igx-column [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
rowStart: number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:874

searchable

Section titled "searchable"

Sets/gets whether the column group is searchable. Default value is true.

let isSearchable =  this.columnGroup.searchable;
<igx-column-group [searchable] = "false"></igx-column-group>
searchable: boolean = true

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:142

sortable

Section titled "sortable"

Inherited from: IgxColumnComponent

Sets/gets whether the column is sortable. Default value is false.

let isSortable = this.column.sortable;
<igx-column [sortable] = "true"></igx-column>
sortable: boolean = false

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:186

sortingIgnoreCase

Section titled "sortingIgnoreCase"

Inherited from: IgxColumnComponent

Sets/gets whether the column sorting should be case sensitive. Default value is true.

let sortingIgnoreCase = this.column.sortingIgnoreCase;
<igx-column [sortingIgnoreCase] = "false"></igx-column>
sortingIgnoreCase: boolean = true

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:799

Optional summaryFormatter

Section titled "summaryFormatter"

Inherited from: IgxColumnComponent

The summaryFormatter is used to format the display of the column summaries.

In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers.

columnInit(column: IgxColumnComponent) {
  if (column.field == "OrderDate") {
    column.summaryFormatter = this.summaryFormat;
  }
}

summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
  const result = summary.summaryResult;
  if(summaryResult.key !== 'count' && result !== null && result !== undefined) {
     const pipe = new DatePipe('fr-FR');
     return pipe.transform(result,'mediumDate');
  }
  return result;
}
summaryFormatter: object

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:768

title

Section titled "title"

Inherited from: IgxColumnComponent

Sets/gets the title value.

let title = this.column.title;
<igx-column [title] = "'Some column tooltip'"></igx-column>
title: string = ''

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:171

widthChange

Section titled "widthChange"

Inherited from: IgxColumnComponent

Emitted when the column width changes.

<igx-column (widthChange)="widthChange($event)">
</igx-column>
widthChange: EventEmitter<string>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:915

Accessors

Section titled "Accessors"

childColumns

Section titled "childColumns"

A list containing all the child columns under this column (if any). Empty without children or if this column is not Group or Layout.

 
get childColumns(): ColumnType[]

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:347

Returns ColumnType[]

collapsible

Section titled "collapsible"

Optional Indicated whether the column can be collapsed. If the value is true, the column can be collapsed It is used in tree grid and for navigation

 
get collapsible(): any

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:63

Set if the column group is collapsible. Default value is false

<igx-column-group [collapsible] = "true"></igx-column-group>
set collapsible(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:63

Parameters

  • value: boolean

Returns void

columnGroup

Section titled "columnGroup"

Returns a boolean indicating if the column is a ColumnGroup.

let isColumnGroup =  this.columnGroup.columnGroup
get columnGroup(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:363

Returns boolean

columnLayout

Section titled "columnLayout"

Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.

let columnGroup =  this.column.columnGroup;
get columnLayout(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:374

Returns boolean

columnLayoutChild

Section titled "columnLayoutChild"

Inherited from: IgxColumnComponent

Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout.

let columnLayoutChild =  this.column.columnLayoutChild;
get columnLayoutChild(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1624

Returns boolean

disabledSummaries

Section titled "disabledSummaries"

Inherited from: IgxColumnComponent

Sets/gets the summary operands to exclude from display. Accepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc.

let disabledSummaries = this.column.disabledSummaries;
<igx-column [disabledSummaries]="['min', 'max', 'average']"></igx-column>
get disabledSummaries(): string[]

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1190

Returns string[] 

set disabledSummaries(value: string[]): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1194

Parameters

  • value: string[]

Returns void

editable

Section titled "editable"

Inherited from: IgxColumnComponent

Gets whether the column is editable. Default value is false.

let isEditable = this.column.editable;
get editable(): boolean

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

Returns boolean

Sets whether the column is editable.

this.column.editable = true;
<igx-column [editable] = "true"></igx-column>
set editable(editable: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:274

Parameters

  • editable: boolean

Returns void

editorOptions

Section titled "editorOptions"

Inherited from: IgxColumnComponent

Sets properties on the default column editors

 
get editorOptions(): IColumnEditorOptions

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1760

Returns IColumnEditorOptions

Pass optional properties for the default column editors.

 
set editorOptions(value: IColumnEditorOptions): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1757

Example

const editorOptions: IColumnEditorOptions = {
     dateTimeFormat: 'MM/dd/YYYY',
}
<igx-column dataType="date" [editorOptions]="editorOptions"></igx-column>

Parameters

Returns void

errorTemplate

Section titled "errorTemplate"

Inherited from: IgxColumnComponent

Returns a reference to the validation error template.

let errorTemplate = this.column.errorTemplate;
get errorTemplate(): TemplateRef<IgxCellTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1466

Returns TemplateRef<IgxCellTemplateContext>

Sets the error template.

<ng-template igxCellValidationError let-cell="cell" #errorTemplate >
    <div *ngIf="cell.validation.errors?.['forbiddenName']">
     This name is forbidden.
    </div>
</ng-template>
@ViewChild("'errorTemplate'", {read: TemplateRef })
public errorTemplate: TemplateRef<any>;
this.column.errorTemplate = this.errorTemplate;
set errorTemplate(template: TemplateRef<IgxCellTemplateContext>): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1484

Parameters

Returns void

expanded

Section titled "expanded"

Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded

 
get expanded(): any

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:90

Set whether the group is expanded or collapsed initially. Applied only if the collapsible property is set to true Default value is true

const state = false
 <igx-column-group [(expand)] = "state"></igx-column-group>
set expanded(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:90

Parameters

  • value: boolean

Returns void

field

Section titled "field"

Inherited from: IgxColumnComponent

The internal field name, used in expressions and queries.

 
get field(): string

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:107

Returns string

Sets/gets the field value.

let columnField = this.column.field;
<igx-column [field] = "'ID'"></igx-column>
set field(value: string): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:103

Parameters

  • value: string

Returns void

filterCellTemplate

Section titled "filterCellTemplate"

Inherited from: IgxColumnComponent

Returns a reference to the filterCellTemplate.

let filterCellTemplate = this.column.filterCellTemplate;
get filterCellTemplate(): TemplateRef<IgxColumnTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1499

Returns TemplateRef<IgxColumnTemplateContext>

Sets the quick filter template.

<ng-template #filterCellTemplate IgxFilterCellTemplate let-column="column">
   <input (input)="onInput()">
</ng-template>
@ViewChild("'filterCellTemplate'", {read: TemplateRef })
public filterCellTemplate: TemplateRef<any>;
this.column.filterCellTemplate = this.filterCellTemplate;
set filterCellTemplate(template: TemplateRef<IgxColumnTemplateContext>): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1517

Parameters

Returns void

filteringExpressionsTree

Section titled "filteringExpressionsTree"

Inherited from: IgxColumnComponent

Returns the filteringExpressionsTree of the column.

let tree =  this.column.filteringExpressionsTree;
get filteringExpressionsTree(): FilteringExpressionsTree

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1818

Returns FilteringExpressionsTree

filters

Section titled "filters"

Gets the column group filters.

let columnGroupFilters = this.columnGroup.filters;
get filters(): any

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:152

Returns any

Sets the column group filters.

this.columnGroup.filters = IgxStringFilteringOperand;
set filters(classRef: any): void

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:165

Parameters

  • classRef: any

Returns void

groupable

Section titled "groupable"

Inherited from: IgxColumnComponent

Sets/gets whether the column is groupable. Default value is false.

let isGroupable = this.column.groupable;
<igx-column [groupable] = "true"></igx-column>
get groupable(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:229

Returns boolean

Indicates whether a column can be put in a group. If the value is true, the column can be put in a group

 
set groupable(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:232

Parameters

  • value: boolean

Returns void

groupingComparer

Section titled "groupingComparer"

Inherited from: IgxColumnComponent

Gets the function that compares values for grouping.

let groupingComparer = this.column.groupingComparer'
get groupingComparer(): object

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1288

Returns object

Sets a custom function to compare values for grouping. Subsequent values in the sorted data that the function returns 0 for are grouped.

this.column.groupingComparer = (a: any, b: any, currRec?: any, groupRec?: any) => { return a === b ? 0 : -1; }
set groupingComparer(funcRef: object): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1302

Parameters

  • funcRef: object

Returns void

hasSummary

Section titled "hasSummary"

Inherited from: IgxColumnComponent

Gets a value indicating whether the summary for the column is enabled.

let hasSummary = this.column.hasSummary;
get hasSummary(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:337

Returns boolean

Sets a value indicating whether the summary for the column is enabled. Default value is false.

<igx-column [hasSummary] = "true"></igx-column>
set hasSummary(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:349

Parameters

  • value: boolean

Returns void

headerTemplate

Section titled "headerTemplate"

Inherited from: IgxColumnComponent

Returns a reference to the header template.

let headerTemplate = this.column.headerTemplate;
get headerTemplate(): TemplateRef<IgxColumnTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1400

Returns TemplateRef<IgxColumnTemplateContext>

Sets the header template. Note that the column header height is fixed and any content bigger than it will be cut off.

<ng-template #headerTemplate>
  <div style = "background-color:black" (click) = "changeColor(val)">
      <span style="color:red" >{{column.field}}</span>
  </div>
</ng-template>
@ViewChild("'headerTemplate'", {read: TemplateRef })
public headerTemplate: TemplateRef<any>;
this.column.headerTemplate = this.headerTemplate;
set headerTemplate(template: TemplateRef<IgxColumnTemplateContext>): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1421

Parameters

Returns void

hidden

Section titled "hidden"

Gets whether the column group is hidden.

let isHidden = this.columnGroup.hidden;
get hidden(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:228

Returns boolean

Sets the column group hidden property.

<igx-column [hidden] = "true"></igx-column>

Two-way data binding

<igx-column [(hidden)] = "model.columns[0].isHidden"></igx-column>
set hidden(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:246

Parameters

  • value: boolean

Returns void

index

Section titled "index"

Inherited from: IgxColumnComponent

Gets the column index.

let columnIndex = this.column.index;
get index(): number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1066

Returns number

level

Section titled "level"

Inherited from: IgxColumnComponent

Returns the level of the column in a column group. Returns 0 if the column doesn't have a parent.

let columnLevel =  this.column.level;
get level(): number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1649

Returns number

maxWidth

Section titled "maxWidth"

Inherited from: IgxColumnComponent 

get maxWidth(): string

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:574

Returns string

Sets/gets the maximum width of the column.

let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'150px'"></igx-column>
set maxWidth(value: string): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:569

Parameters

  • value: string

Returns void

merge

Section titled "merge"

Inherited from: IgxColumnComponent

Sets/gets whether to merge cells in this column.

<igx-column [merge]="true"></igx-column>
get merge(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:119

Returns boolean 

set merge(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:123

Parameters

  • value: boolean

Returns void

mergingComparer

Section titled "mergingComparer"

Inherited from: IgxColumnComponent

Gets the function that compares values for merging.

let mergingComparer = this.column.mergingComparer'
get mergingComparer(): object

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1262

Returns object

Sets a custom function to compare values for merging.

this.column.mergingComparer = (prevRecord: any, record: any, field: string) => { return prevRecord[field] === record[field]; }
set mergingComparer(funcRef: object): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1273

Parameters

  • funcRef: object

Returns void

minWidth

Section titled "minWidth"

Inherited from: IgxColumnComponent 

get minWidth(): string

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1045

Returns string

Sets/gets the minimum width of the column. Default value is 88;

let columnMinWidth = this.column.minWidth;
<igx-column [minWidth] = "'100px'"></igx-column>
set minWidth(value: string): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1037

Parameters

  • value: string

Returns void

pinned

Section titled "pinned"

Inherited from: IgxColumnComponent

Gets whether the column is pinned.

let isPinned = this.column.pinned;
get pinned(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1103

Returns boolean

Sets whether the column is pinned. Default value is false.

<igx-column [pinned] = "true"></igx-column>

Two-way data binding.

<igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column>
set pinned(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1120

Parameters

  • value: boolean

Returns void

pinningPosition

Section titled "pinningPosition"

Inherited from: IgxColumnComponent

Gets the pinning position of the column.

let pinningPosition = this.column.pinningPosition;
get pinningPosition(): ColumnPinningPosition

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1078

Returns ColumnPinningPosition

Sets the pinning position of the column.

<igx-column [pinningPosition]="1"></igx-column>
set pinningPosition(value: ColumnPinningPosition): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1089

Parameters

Returns void

pipeArgs

Section titled "pipeArgs"

Inherited from: IgxColumnComponent

Optional arguments for any pipe applied to the field.

 
get pipeArgs(): IColumnPipeArgs

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1735

Returns IColumnPipeArgs 

set pipeArgs(value: IColumnPipeArgs): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1729

Example

const pipeArgs: IColumnPipeArgs = {
     format: 'longDate',
     timezone: 'UTC',
     digitsInfo: '1.1-2'
}
<igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column>
<igx-column dataType="number" [pipeArgs]="pipeArgs"></igx-column>

Parameters

Returns void

selectable

Section titled "selectable"

Returns if the column group is selectable

let columnGroupSelectable = this.columnGroup.selectable;
get selectable(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:175

Returns boolean

selected

Section titled "selected"

Returns if the column group is selected.

let isSelected = this.columnGroup.selected;
get selected(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:269

Returns boolean

Select/deselect the column group.

this.columnGroup.selected = true;
set selected(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:283

Parameters

  • value: boolean

Returns void

sortStrategy

Section titled "sortStrategy"

Inherited from: IgxColumnComponent

Gets the column sortStrategy.

let sortStrategy = this.column.sortStrategy
get sortStrategy(): ISortingStrategy

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1238

Returns ISortingStrategy

Sets the column sortStrategy.

this.column.sortStrategy = new CustomSortingStrategy().
class CustomSortingStrategy extends SortingStrategy {...}
set sortStrategy(classRef: ISortingStrategy): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1250

Parameters

Returns void

summaries

Section titled "summaries"

Gets the column group summaries.

let columnGroupSummaries = this.columnGroup.summaries;
get summaries(): any

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:113

Returns any

Sets the column group summaries.

this.columnGroup.summaries = IgxNumberSummaryOperand;
set summaries(classRef: any): void

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:126

Parameters

  • classRef: any

Returns void

summaryTemplate

Section titled "summaryTemplate"

Inherited from: IgxColumnComponent

Returns a reference to the summaryTemplate.

let summaryTemplate = this.column.summaryTemplate;
get summaryTemplate(): TemplateRef<IgxSummaryTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1332

Returns TemplateRef<IgxSummaryTemplateContext>

Sets the summary template.

<ng-template #summaryTemplate igxSummary let-summaryResults>
   <p>{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</p>
   <p>{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</p>
</ng-template>
@ViewChild("'summaryTemplate'", {read: TemplateRef })
public summaryTemplate: TemplateRef<any>;
this.column.summaryTemplate = this.summaryTemplate;
set summaryTemplate(template: TemplateRef<IgxSummaryTemplateContext>): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1351

Parameters

Returns void

topLevelParent

Section titled "topLevelParent"

Inherited from: IgxColumnComponent

Returns a reference to the top level parent column.

let topLevelParent =  this.column.topLevelParent;
get topLevelParent(): ColumnType | undefined

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:2529

Returns ColumnType | undefined

visibleIndex

Section titled "visibleIndex"

Inherited from: IgxColumnComponent

Gets the column visible index. If the column is not visible, returns -1.

let visibleColumnIndex =  this.column.visibleIndex;
get visibleIndex(): number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1556

Returns number

visibleWhenCollapsed

Section titled "visibleWhenCollapsed"

Inherited from: IgxColumnComponent 

get visibleWhenCollapsed(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1702

Returns boolean

Indicates whether the column will be visible when its parent is collapsed.

<igx-column-group>
  <igx-column [visibleWhenCollapsed]="true"></igx-column>
</igx-column-group>
set visibleWhenCollapsed(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1693

Parameters

  • value: boolean

Returns void

width

Section titled "width"

Gets the width of the column group.

let columnGroupWidth = this.columnGroup.width;
get width(): string

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:385

Returns string

Gets the width of the column.

let columnWidth = this.column.width;
set width(val: string): void

Defined in projects/igniteui-angular/grids/core/src/columns/column-group.component.ts:396

Parameters

  • val: string

Returns void

Methods

Section titled "Methods"

autosize

Section titled "autosize"

Inherited from: IgxColumnComponent

Autosize the column to the longest currently visible cell value, including the header cell.

@ViewChild('grid') grid: IgxGridComponent;
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();
autosize(byHeaderOnly: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:2569

Parameters

  • byHeaderOnly: boolean

    Set if column should be autosized based only on the header content.

Returns void

move

Section titled "move"

Inherited from: IgxColumnComponent

Moves a column to the specified visible index. If passed index is invalid, or if column would receive a different visible index after moving, moving is not performed. If passed index would move the column to a different column group. moving is not performed.

 
move(index: number): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:2460

Parameters

  • index: number

Returns void

Example

column.move(index);

pin

Section titled "pin"

Inherited from: IgxColumnComponent

Pins the column in the specified position at the provided index in that pinned area. Defaults to index 0 if not provided, or to the initial index in the pinned area. Returns true if the column is successfully pinned. Returns false if the column cannot be pinned. Column cannot be pinned if:

  • Is already pinned
  • index argument is out of range
let success = this.column.pin();
pin(index: number, pinningPosition: ColumnPinningPosition): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:2265

Parameters

Returns boolean

unpin

Section titled "unpin"

Inherited from: IgxColumnComponent

Unpins the column and place it at the provided index in the unpinned area. Defaults to index 0 if not provided, or to the initial index in the unpinned area. Returns true if the column is successfully unpinned. Returns false if the column cannot be unpinned. Column cannot be unpinned if:

  • Is already unpinned
  • index argument is out of range
let success = this.column.unpin();
unpin(index: number): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:2375

Parameters

  • index: number

Returns boolean