Ignite UI for Angular Column Group

Igx Parent

IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxColumnGroupComponent, IgxRowIslandComponent

Type Parameters

Hierarchy

Hierarchy

Constructors

Properties

context: any

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
props: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>> & Readonly<{
    children?: ReactNode;
}>
refs: {
    [key: string]: ReactInstance;
}

Type declaration

  • [key: string]: ReactInstance
state: Readonly<{}>
contextType?: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}

Accessors

  • get additionalTemplateContext(): any
  • Returns any

  • set additionalTemplateContext(v): void
  • Parameters

    • v: any

    Returns void

  • get autosizeHeader(): boolean
  • Returns boolean

  • set autosizeHeader(v): void
  • Parameters

    • v: boolean

    Returns void

  • get bodyTemplate(): FunctionComponent<{
        dataContext: IgrCellTemplateContext;
    }> | Component<{
        dataContext: IgrCellTemplateContext;
    }, {}, any>
  • Returns a reference to the bodyTemplate.

    let bodyTemplate = this.column.bodyTemplate;
    

    Memberof

    IgxColumnComponent

    Returns FunctionComponent<{
        dataContext: IgrCellTemplateContext;
    }> | Component<{
        dataContext: IgrCellTemplateContext;
    }, {}, any>

  • set bodyTemplate(v): void
  • Parameters

    Returns void

  • get cellClasses(): any
  • Returns any

  • set cellClasses(v): void
  • Parameters

    • v: any

    Returns void

  • get cellStyles(): any
  • Returns any

  • set cellStyles(v): void
  • Parameters

    • v: any

    Returns void

  • get childColumns(): IgrColumn<IIgrColumnProps>[]
  • A list containing all the child columns under this column (if any). Empty without children or if this column is not Group or Layout.

    Returns IgrColumn<IIgrColumnProps>[]

  • get colEnd(): number
  • Returns number

  • set colEnd(v): void
  • Parameters

    • v: number

    Returns void

  • get colStart(): number
  • Returns number

  • set colStart(v): void
  • Parameters

    • v: number

    Returns void

  • get collapsible(): boolean
  • Returns boolean

  • set collapsible(v): void
  • Parameters

    • v: boolean

    Returns void

  • get collapsibleIndicatorTemplate(): FunctionComponent<{
        dataContext: IgrColumnTemplateContext;
    }> | Component<{
        dataContext: IgrColumnTemplateContext;
    }, {}, any>
  • Allows you to define a custom template for expand/collapse indicator

    Memberof

    IgxColumnGroupComponent

    Returns FunctionComponent<{
        dataContext: IgrColumnTemplateContext;
    }> | Component<{
        dataContext: IgrColumnTemplateContext;
    }, {}, any>

  • set collapsibleIndicatorTemplate(v): void
  • Parameters

    Returns void

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

    let columnGroup =  this.column.columnGroup;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • get columnLayout(): boolean
  • Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.

    let columnGroup =  this.column.columnGroup;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • get columnLayoutChild(): boolean
  • Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout.

    let columnLayoutChild =  this.column.columnLayoutChild;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • get dataType(): GridColumnDataType
  • Returns GridColumnDataType

  • set dataType(v): void
  • Parameters

    Returns void

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

    let isHidingDisabled =  this.column.disableHiding;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • set disableHiding(v): void
  • Parameters

    • v: boolean

    Returns void

  • get disablePinning(): boolean
  • Gets whether the pinning is disabled.

    let isPinningDisabled =  this.column.disablePinning;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • set disablePinning(v): void
  • Parameters

    • v: boolean

    Returns void

  • get editable(): boolean
  • Gets whether the column is editable. Default value is false.

    let isEditable = this.column.editable;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • set editable(v): void
  • Parameters

    • v: boolean

    Returns void

  • get errorTemplate(): FunctionComponent<{
        dataContext: IgrCellTemplateContext;
    }> | Component<{
        dataContext: IgrCellTemplateContext;
    }, {}, any>
  • Returns a reference to the validation error template.

    let errorTemplate = this.column.errorTemplate;
    

    Returns FunctionComponent<{
        dataContext: IgrCellTemplateContext;
    }> | Component<{
        dataContext: IgrCellTemplateContext;
    }, {}, any>

  • set errorTemplate(v): void
  • Parameters

    Returns void

  • get expanded(): boolean
  • Returns boolean

  • set expanded(v): void
  • Parameters

    • v: boolean

    Returns void

  • get field(): string
  • Returns string

  • set field(v): void
  • Parameters

    • v: string

    Returns void

  • get filterCellTemplate(): FunctionComponent<{
        dataContext: IgrColumnTemplateContext;
    }> | Component<{
        dataContext: IgrColumnTemplateContext;
    }, {}, any>
  • Returns a reference to the filterCellTemplate.

    let filterCellTemplate = this.column.filterCellTemplate;
    

    Memberof

    IgxColumnComponent

    Returns FunctionComponent<{
        dataContext: IgrColumnTemplateContext;
    }> | Component<{
        dataContext: IgrColumnTemplateContext;
    }, {}, any>

  • set filterCellTemplate(v): void
  • Parameters

    Returns void

  • get filterable(): boolean
  • Returns boolean

  • set filterable(v): void
  • Parameters

    • v: boolean

    Returns void

  • get filteringExpressionsTree(): IgrFilteringExpressionsTree
  • Returns the filteringExpressionsTree of the column.

    let tree =  this.column.filteringExpressionsTree;
    

    Memberof

    IgxColumnComponent

    Returns IgrFilteringExpressionsTree

  • get filteringIgnoreCase(): boolean
  • Returns boolean

  • set filteringIgnoreCase(v): void
  • Parameters

    • v: boolean

    Returns void

  • get filters(): IgrFilteringOperand
  • Gets the column filters.

    let columnFilters = this.column.filters'
    

    Memberof

    IgxColumnComponent

    Returns IgrFilteringOperand

  • set filters(v): void
  • Parameters

    Returns void

  • get formatter(): ((value, rowData) => any)
  • Applies display format to cell values in the column. Does not modify the underlying data.

    Remark

    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", "$");
    }

    Example

    const column = this.grid.getColumnByName('Address');
    const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
    column.formatter = addressFormatter;

    Memberof

    IgxColumnComponent

    Returns ((value, rowData) => any)

      • (value, rowData): any
      • Applies display format to cell values in the column. Does not modify the underlying data.

        Remark

        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", "$");
        }

        Example

        const column = this.grid.getColumnByName('Address');
        const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
        column.formatter = addressFormatter;

        Memberof

        IgxColumnComponent

        Parameters

        • value: any
        • rowData: any

        Returns any

  • set formatter(v): void
  • Parameters

    • v: ((value, rowData) => any)
        • (value, rowData): any
        • Parameters

          • value: any
          • rowData: any

          Returns any

    Returns void

  • get groupable(): boolean
  • Returns boolean

  • set groupable(v): void
  • Parameters

    • v: boolean

    Returns void

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

    let hasSummary = this.column.hasSummary;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • set hasSummary(v): void
  • Parameters

    • v: boolean

    Returns void

  • get header(): string
  • Returns string

  • set header(v): void
  • Parameters

    • v: string

    Returns void

  • get headerClasses(): string
  • Returns string

  • set headerClasses(v): void
  • Parameters

    • v: string

    Returns void

  • get headerGroupClasses(): string
  • Returns string

  • set headerGroupClasses(v): void
  • Parameters

    • v: string

    Returns void

  • get headerGroupStyles(): any
  • Returns any

  • set headerGroupStyles(v): void
  • Parameters

    • v: any

    Returns void

  • get headerStyles(): any
  • Returns any

  • set headerStyles(v): void
  • Parameters

    • v: any

    Returns void

  • get headerTemplate(): FunctionComponent<{
        dataContext: IgrColumnTemplateContext;
    }> | Component<{
        dataContext: IgrColumnTemplateContext;
    }, {}, any>
  • Returns a reference to the header template.

    let headerTemplate = this.column.headerTemplate;
    

    Memberof

    IgxColumnComponent

    Returns FunctionComponent<{
        dataContext: IgrColumnTemplateContext;
    }> | Component<{
        dataContext: IgrColumnTemplateContext;
    }, {}, any>

  • set headerTemplate(v): void
  • Parameters

    Returns void

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

    let isHidden = this.column.hidden;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • set hidden(v): void
  • Parameters

    • v: boolean

    Returns void

  • get index(): number
  • Gets the column index.

    let columnIndex = this.column.index;
    

    Memberof

    IgxColumnComponent

    Returns number

  • get inlineEditorTemplate(): FunctionComponent<{
        dataContext: IgrCellTemplateContext;
    }> | Component<{
        dataContext: IgrCellTemplateContext;
    }, {}, any>
  • Returns a reference to the inline editor template.

    let inlineEditorTemplate = this.column.inlineEditorTemplate;
    

    Memberof

    IgxColumnComponent

    Returns FunctionComponent<{
        dataContext: IgrCellTemplateContext;
    }> | Component<{
        dataContext: IgrCellTemplateContext;
    }, {}, any>

  • set inlineEditorTemplate(v): void
  • Parameters

    Returns void

  • 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

  • get maxWidth(): string
  • Returns string

  • set maxWidth(v): void
  • Parameters

    • v: string

    Returns void

  • get minWidth(): string
  • Returns string

  • set minWidth(v): void
  • Parameters

    • v: string

    Returns void

  • get name(): string
  • Returns string

  • set name(v): void
  • Parameters

    • v: string

    Returns void

  • get nativeElement(): HTMLElement
  • Returns HTMLElement

  • get parent(): any
  • Sets/gets the parent column.

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

    Memberof

    IgxColumnComponent

    Returns any

  • set parent(v): void
  • Parameters

    • v: any

    Returns void

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

    let isPinned = this.column.pinned;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • set pinned(v): void
  • Parameters

    • v: boolean

    Returns void

  • get pipeArgs(): IgrColumnPipeArgs
  • Returns IgrColumnPipeArgs

  • set pipeArgs(v): void
  • Parameters

    Returns void

  • get resizable(): boolean
  • Returns boolean

  • set resizable(v): void
  • Parameters

    • v: boolean

    Returns void

  • get rowEnd(): number
  • Returns number

  • set rowEnd(v): void
  • Parameters

    • v: number

    Returns void

  • get rowStart(): number
  • Returns number

  • set rowStart(v): void
  • Parameters

    • v: number

    Returns void

  • get searchable(): boolean
  • Returns boolean

  • set searchable(v): void
  • Parameters

    • v: boolean

    Returns void

  • get selectable(): boolean
  • Returns if the column is selectable.

    let columnSelectable = this.column.selectable;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • set selectable(v): void
  • Parameters

    • v: boolean

    Returns void

  • get selected(): boolean
  • Returns if the column is selected.

    let isSelected = this.column.selected;
    

    Memberof

    IgxColumnComponent

    Returns boolean

  • set selected(v): void
  • Parameters

    • v: boolean

    Returns void

  • get sortStrategy(): IgrSortingStrategy
  • Gets the column sortStrategy.

    let sortStrategy = this.column.sortStrategy
    

    Memberof

    IgxColumnComponent

    Returns IgrSortingStrategy

  • set sortStrategy(v): void
  • Parameters

    Returns void

  • get sortable(): boolean
  • Returns boolean

  • set sortable(v): void
  • Parameters

    • v: boolean

    Returns void

  • get sortingIgnoreCase(): boolean
  • Returns boolean

  • set sortingIgnoreCase(v): void
  • Parameters

    • v: boolean

    Returns void

  • get summaries(): any
  • Gets the column summaries.

    let columnSummaries = this.column.summaries;
    

    Memberof

    IgxColumnComponent

    Returns any

  • set summaries(v): void
  • Parameters

    • v: any

    Returns void

  • get summaryFormatter(): ((summary, summaryOperand) => any)
  • Returns ((summary, summaryOperand) => any)

  • set summaryFormatter(v): void
  • Parameters

    Returns void

  • get summaryTemplate(): FunctionComponent<{
        dataContext: IgrSummaryTemplateContext;
    }> | Component<{
        dataContext: IgrSummaryTemplateContext;
    }, {}, any>
  • Returns a reference to the summaryTemplate.

    let summaryTemplate = this.column.summaryTemplate;
    

    Memberof

    IgxColumnComponent

    Returns FunctionComponent<{
        dataContext: IgrSummaryTemplateContext;
    }> | Component<{
        dataContext: IgrSummaryTemplateContext;
    }, {}, any>

  • set summaryTemplate(v): void
  • Parameters

    Returns void

  • get title(): string
  • Returns string

  • set title(v): void
  • Parameters

    • v: string

    Returns void

  • get topLevelParent(): IgrColumn<IIgrColumnProps>
  • Returns a reference to the top level parent column.

    let topLevelParent =  this.column.topLevelParent;
    

    Returns IgrColumn<IIgrColumnProps>

  • 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

  • get visibleWhenCollapsed(): boolean
  • Returns boolean

  • set visibleWhenCollapsed(v): void
  • Parameters

    • v: boolean

    Returns void

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

    let columnWidth = this.column.width;
    

    Memberof

    IgxColumnComponent

    Returns string

  • set width(v): void
  • Parameters

    • v: string

    Returns void

Methods

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

    Memberof

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

    Parameters

    • Optional byHeaderOnly: boolean
      • Set if column should be autosized based only on the header content.

    Returns void

  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    • error: Error
    • errorInfo: ErrorInfo

    Returns void

  • Returns void

  • Called immediately after updating occurs. Not called for the initial render.

    The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

    Parameters

    • prevProps: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>>
    • prevState: Readonly<{}>
    • Optional snapshot: any

    Returns void

  • Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.

    Returns void

  • Parameters

    • name: string

    Returns any

  • Parameters

    • Optional callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it.

    Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.

    Parameters

    • prevProps: Readonly<P & Omit<HTMLAttributes<HTMLElement>, keyof P>>
    • prevState: Readonly<{}>

    Returns any

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

    Example

    column.move(index);
    

    Memberof

    IgxColumnComponent

    Parameters

    • index: number

    Returns void

  • Pins the column at the provided index in the 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
    • The pinned area exceeds 80% of the grid width
    let success = this.column.pin();
    

    Memberof

    IgxColumnComponent

    Parameters

    • Optional index: number

    Returns boolean

  • Returns DetailedReactHTMLElement<any, HTMLElement>

  • Parameters

    • element: any

    Returns void

  • Type parameters

    Type Parameters

    • K extends never

    Parameters

    • state: {} | ((prevState, props) => {} | Pick<{}, K>) | Pick<{}, K>
    • Optional callback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Parameters

    • nextProps: any
    • nextState: any

    Returns boolean

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

    Memberof

    IgxColumnComponent

    Parameters

    • Optional index: number

    Returns boolean