Class IgxColumnComponent

Ignite UI for Angular Column - Documentation

The Ignite UI Column is used within an igx-grid element to define what data the column will show. Features such as sorting, filtering & editing are enabled at the column level. You can also provide a template containing custom content inside the column using ng-template which will be used for all cells within the column.

Hierarchy

Implements

  • AfterContentInit

Constructors

constructor

Properties

cdr

cdr: ChangeDetectorRef

cellClasses

cellClasses: any

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) => { return rowData[columnKey] > 6; }
cellClasses = { 'className' : this.callback };
<igx-column [cellClasses] = "cellClasses"></igx-column>
<igx-column [cellClasses] = "{'class1' : true }"></igx-column>
memberof

IgxColumnComponent

children

children: any

Sets/gets the children columns.

let columnChildren = this.column.children;
this.column.children = childrenColumns;
memberof

IgxColumnComponent

dataType

dataType: DataType = DataType.String

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

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

IgxColumnComponent

defaultWidth

defaultWidth: string

hidden

editable

editable: any = null

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

let isEditable = this.column.editable;
<igx-column [editable] = "true"></igx-column>
memberof

IgxColumnComponent

field

field: string

Sets/gets the field value.

let columnField = this.column.field;
<igx-column [field] = "'ID'"></igx-column>
memberof

IgxColumnComponent

filterable

filterable: boolean = true

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

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

IgxColumnComponent

filteringIgnoreCase

filteringIgnoreCase: boolean = true

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>
memberof

IgxColumnComponent

formatter

formatter: function

Sets/gets formatter for the column.

let columnFormatter = this.column.formatter;
this.column.formatter = (val: Date) => {
return new Intl.DateTimeFormat("en-US").format(val);
memberof

IgxColumnComponent

Type declaration

    • (value: any): any
    • Parameters

      • value: any

      Returns any

gridAPI

gridAPI: GridBaseAPIService<IgxGridBaseComponent>

gridID

gridID: string

Gets/Sets the id of the igx-grid.

let columnGridId = this.column.gridID;
this.column.gridID = 'grid-1';
memberof

IgxColumnComponent

groupable

groupable: boolean = false

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

let isGroupable = this.column.groupable;
<igx-column [groupable] = "true"></igx-column>
memberof

IgxColumnComponent

header

header: string = ""

Sets/gets the header value.

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

IgxColumnComponent

headerClasses

headerClasses: string = ""

Sets/gets the class selector of the column header.

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

IgxColumnComponent

maxWidth

maxWidth: string

Sets/gets the maximum width of the column.

let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'75%'"></igx-column>
memberof

IgxColumnComponent

minWidth

minWidth: string = this.defaultMinWidth

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

let columnMinWidth = this.column.minWidth;
<igx-column [minWidth] = "'15%'"></igx-column>
memberof

IgxColumnComponent

movable

movable: boolean = false

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

let isMovable = this.column.movable;
<igx-column [movable] = "true"></igx-column>
memberof

IgxColumnComponent

parent

parent: any = null

Sets/gets the parent column.

let parentColumn = this.column.parent;
this.column.parent = higherLevelColumn;
memberof

IgxColumnComponent

resizable

resizable: boolean = false

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

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

IgxColumnComponent

searchable

searchable: boolean = true

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

let isSearchable =  this.column.searchable';
 <igx-column [searchable] = "false"></igx-column>
memberof

IgxColumnComponent

sortable

sortable: boolean = false

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

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

IgxColumnComponent

sortingIgnoreCase

sortingIgnoreCase: boolean = true

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>
memberof

IgxColumnComponent

widthSetByUser

widthSetByUser: boolean

hidden

Accessors

allChildren

  • Returns the children columns collection. Returns an empty array if the column does not contain children columns.

    let childrenColumns =  this.column.allChildren;
    memberof

    IgxColumnComponent

    Returns IgxColumnComponent[]

bodyTemplate

  • get bodyTemplate(): TemplateRef<any>
  • set bodyTemplate(template: TemplateRef<any>): void
  • Returns a reference to the bodyTemplate.

    let bodyTemplate = this.column.bodyTemplate;
    memberof

    IgxColumnComponent

    Returns TemplateRef<any>

  • Sets the body template.

    <ng-template #bodyTemplate igxCell let-val>
       <div style = "background-color: yellowgreen" (click) = "changeColor(val)">
          <span> {{val}} </span>
       </div>
    </ng-template>
    @ViewChild("'bodyTemplate'", {read: TemplateRef })
    public bodyTemplate: TemplateRef<any>;
    this.column.bodyTemplate = this.bodyTemplate;
    memberof

    IgxColumnComponent

    Parameters

    • template: TemplateRef<any>

    Returns void

calcWidth

  • get calcWidth(): any

cells

columnGroup

  • get columnGroup(): boolean
  • Returns a boolean indicating if the column is a ColumnGroup.

    let columnGroup =  this.column.columnGroup;
    memberof

    IgxColumnComponent

    Returns boolean

defaultMinWidth

  • get defaultMinWidth(): string
  • Gets the default minimum width of the column.

    let defaultMinWidth =  this.column.defaultMinWidth;
    memberof

    IgxColumnComponent

    Returns string

disableHiding

  • get disableHiding(): boolean
  • set disableHiding(value: boolean): void
  • Gets whether the hiding is disabled.

    let isHidingDisabled =  this.column.disableHiding;
    memberof

    IgxColumnComponent

    Returns boolean

  • Enables/disables hiding for the column. Default value is false.

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

    IgxColumnComponent

    Parameters

    • value: boolean

    Returns void

filterCell

  • get filterCell(): IgxGridFilteringCellComponent
  • Returns a reference to the filter cell of the column.

    let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
    let filterell = column.filterell;
    memberof

    IgxColumnComponent

    Returns IgxGridFilteringCellComponent

filteringExpressionsTree

filters

grid

groupingComparer

  • get groupingComparer(): function
  • set groupingComparer(funcRef: function): void
  • Gets the function that compares values for grouping.

    let groupingComparer = this.column.groupingComparer'
    memberof

    IgxColumnComponent

    Returns function

      • (a: any, b: any): number
      • Parameters

        • a: any
        • b: any

        Returns number

  • 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) => { return a === b ? 0 : -1; }
    memberof

    IgxColumnComponent

    Parameters

    • funcRef: function
        • (a: any, b: any): number
        • Parameters

          • a: any
          • b: any

          Returns number

    Returns void

hasSummary

  • get hasSummary(): boolean
  • set hasSummary(value: boolean): void
  • Gets a value indicating whether the summary for the column is enabled.

    let hasSummary = this.column.hasSummary;
    memberof

    IgxColumnComponent

    Returns boolean

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

    <igx-column [hasSummary] = "true"></igx-column>
    memberof

    IgxColumnComponent

    Parameters

    • value: boolean

    Returns void

headerCell

  • get headerCell(): IgxGridHeaderComponent
  • Returns a reference to the header of the column.

    let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
    let headerCell = column.headerCell;
    memberof

    IgxColumnComponent

    Returns IgxGridHeaderComponent

headerTemplate

  • get headerTemplate(): TemplateRef<any>
  • set headerTemplate(template: TemplateRef<any>): void
  • Returns a reference to the header template.

    let headerTemplate = this.column.headerTemplate;
    memberof

    IgxColumnComponent

    Returns TemplateRef<any>

  • Sets the header template.

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

    IgxColumnComponent

    Parameters

    • template: TemplateRef<any>

    Returns void

hidden

  • get hidden(): boolean
  • set hidden(value: boolean): void
  • Gets whether the column is hidden.

    let isHidden = this.column.hidden;
    memberof

    IgxColumnComponent

    Returns boolean

  • Sets the column hidden property. Default value is false.

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

    IgxColumnComponent

    Parameters

    • value: boolean

    Returns void

index

  • get index(): number

inlineEditorTemplate

  • get inlineEditorTemplate(): TemplateRef<any>
  • set inlineEditorTemplate(template: TemplateRef<any>): void
  • Returns a reference to the inline editor template.

    let inlineEditorTemplate = this.column.inlineEditorTemplate;
    memberof

    IgxColumnComponent

    Returns TemplateRef<any>

  • Sets the inline editor template.

    <ng-template #inlineEditorTemplate igxCellEditor let-cell="cell">
        <input type="string" [(ngModel)]="cell.value"/>
    </ng-template>
    @ViewChild("'inlineEditorTemplate'", {read: TemplateRef })
    public inlineEditorTemplate: TemplateRef<any>;
    this.column.inlineEditorTemplate = this.inlineEditorTemplate;
    memberof

    IgxColumnComponent

    Parameters

    • template: TemplateRef<any>

    Returns void

isLastPinned

  • get isLastPinned(): boolean

level

  • get level(): number
  • 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;
    memberof

    IgxColumnComponent

    Returns number

pinned

  • get pinned(): boolean
  • set pinned(value: boolean): void
  • Gets whether the column is pinned.

    let isPinned = this.column.pinned;
    memberof

    IgxColumnComponent

    Returns boolean

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

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

    IgxColumnComponent

    Parameters

    • value: boolean

    Returns void

sortStrategy

  • Gets the column sortStrategy.

    let sortStrategy = this.column.sortStrategy'

    class CustomSortingStrategy extends SortingStrategy { ... } `

    memberof

    IgxColumnComponent

    Returns ISortingStrategy

  • Sets the column sortStrategy. `typescript this.column.sortStrategy = new CustomSortingStrategy().

    class CustomSortingStrategy extends SortingStrategy { ... } `

    memberof

    IgxColumnComponent

    Parameters

    Returns void

summaries

  • get summaries(): any
  • set summaries(classRef: any): void
  • Gets the column summaries.

    let columnSummaries = this.column.summaries;
    memberof

    IgxColumnComponent

    Returns any

  • Sets the column summaries.

    this.column.summaries = IgxNumberSummaryOperand;
    memberof

    IgxColumnComponent

    Parameters

    • classRef: any

    Returns void

topLevelParent

  • get topLevelParent(): any
  • Returns a reference to the top level parent column.

    let topLevelParent =  this.column.topLevelParent;
    memberof

    IgxColumnComponent

    Returns any

visibleIndex

  • get visibleIndex(): number
  • Gets the column visible index. If the column is not visible, returns -1.

    let visibleColumnIndex =  this.column.visibleIndex;
    memberof

    IgxColumnComponent

    Returns number

width

  • get width(): string
  • set width(value: string): void
  • Gets the width of the column.

    let columnWidth = this.column.width;
    memberof

    IgxColumnComponent

    Returns string

  • Sets the width of the column.

    <igx-column [width] = "'25%'"></igx-column>
    memberof

    IgxColumnComponent

    Parameters

    • value: string

    Returns void

Methods

autosize

  • autosize(): void
  • Autosize the column to the longest currently visible cell value, including the header cell. `typescript @ViewChild('grid') grid: IgxGridComponent;

    let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; column.autosize(); `

    memberof

    IgxColumnComponent

    Returns void

pin

  • pin(index?: number): boolean
  • Pins the column at the provided index in the pinned area. Defaults to index 0 if not provided. 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
    • The pinned area exceeds 80% of the grid width
      let success = this.column.pin();
    memberof

    IgxColumnComponent

    Parameters

    • Optional index: number

    Returns boolean

unpin

  • unpin(index?: number): boolean
  • Unpins the column and place it at the provided index in the unpinned area. Defaults to index 0 if not provided. 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();
    memberof

    IgxColumnComponent

    Parameters

    • Optional index: number

    Returns boolean

updateHighlights

  • updateHighlights(oldIndex: number, newIndex: number): void
  • Updates the highlights when a column index is changed.

    this.column.updateHighlights(1, 3);
    memberof

    IgxColumnComponent

    Parameters

    • oldIndex: number
    • newIndex: number

    Returns void

Static updateHighlights