Class IgxColumnHidingComponent

Hierarchy

  • ColumnChooserBase
    • IgxColumnHidingComponent

Implements

  • OnDestroy
  • OnDestroy

Constructors

constructor

Properties

cdr

cdr: ChangeDetectorRef

columnsAreaMaxHeight

columnsAreaMaxHeight: string = "100%"

Access to the columnHidingUI:

@ViewChild('column-hiding-component')
 public columnHidingUI: IgxColumnHidingComponent;

Sets/gets the max height of the column area.

let columnsAreaMaxHeight =  this.columnHidingUI.columnsAreaMaxHeight;
<igx-column-hiding [columnsAreaMaxHeight]="200px"></igx-column-hiding>
memberof

ColumnChooserBase

cssClass

cssClass: string = "igx-column-hiding"

Sets/Gets the css class selector. By default the value of the class attribute is "igx-column-hiding".

let cssCLass =  this.columnHidingUI.cssClass;
this.columnHidingUI.cssClass = 'column-chooser';
memberof

ColumnChooserBase

disableFilter

disableFilter: boolean = false

Hides/ shows the filtering columns input from the UI.

hideAllText

hideAllText: string = "Hide All"

Sets/gets the text of the button that hides all columns if they are shown.

let hideAllButtonText =  this.columnHiding.hideAllText;
<igx-column-hiding [hideAllText] = "'Hide Columns'"></igx-column-hiding>
memberof

IgxColumnHidingComponent

onColumnVisibilityChanged

onColumnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs> = new EventEmitter<IColumnVisibilityChangedEventArgs>()

An event that is emitted after the columns visibility is changed. Provides references to the column and the newValue properties as event arguments.

 <igx-column-hiding (onColumnVisibilityChanged) = "onColumnVisibilityChanged($event)"></igx-column-hiding>
memberof

IgxColumnHidingComponent

showAllText

showAllText: string = "Show All"

Sets/gets the text of the button that shows all columns if they are hidden.

let showAllButtonText =  this.columnHiding.showAllText;
<igx-column-hiding [showAllText] = "'Show Columns'"></igx-column-hiding>
memberof

IgxColumnHidingComponent

Accessors

columnDisplayOrder

  • Gets the display order of the columns.

    let columnDisplayOrder  =  this.columnHidingUI.columnDisplayOrder;
    memberof

    ColumnChooserBase

    Returns ColumnDisplayOrder

  • Sets the display order of the columns.

    this.columnHidingUI.columnDisplayOrder = ColumnDisplayOrder.Alphabetical;
    memberof

    ColumnChooserBase

    Parameters

    Returns void

columnItems

  • get columnItems(): any[]
  • Gets the items of the selected columns.

    let columnItems =  this.columnHidingUI.columnItems;
    memberof

    ColumnChooserBase

    Returns any[]

columns

  • get columns(): any[]
  • set columns(value: any[]): void
  • Gets the grid columns that are going to be manipulated.

    let gridColumns = this.columnHidingUI.columns;
    memberof

    ColumnChooserBase

    Returns any[]

  • Sets the the grid columns that are going to be manipulated.

    <igx-column-hiding [columns]="grid.columns"></igx-column-hiding>
    memberof

    ColumnChooserBase

    Parameters

    • value: any[]

    Returns void

disableHideAll

  • get disableHideAll(): boolean
  • Returns a boolean indicating whether the HIDE ALL button is disabled.

    <igx-column-hiding #columnHidingUI
        [columns]="grid.columns" [title]="'Column Hiding'">
    </igx-column-hiding>
    @ViewChild("'columnHidingUI'")
    public columnHiding: IgxColumnHidingComponent;
    let isHideAlldisabled =  this.columnHiding.disableHideAll;
    memberof

    IgxColumnHidingComponent

    Returns boolean

disableShowAll

  • get disableShowAll(): boolean
  • Returns a boolean indicating whether the SHOW ALL button is disabled.

    let isShowAlldisabled =  this.columnHiding.disableShowAll;
    memberof

    IgxColumnHidingComponent

    Returns boolean

filterColumnsPrompt

  • get filterColumnsPrompt(): string
  • set filterColumnsPrompt(value: string): void
  • Gets the prompt that is displayed in the filter input.

    let filterColumnsPrompt =  this.columnHidingUI.filterColumnsPrompt;
    memberof

    ColumnChooserBase

    Returns string

  • Sets the prompt that is going to be displayed in the filter input.

    <igx-column-hiding [filterColumnsPrompt]="'Type here to search'"></igx-column-hiding>
    memberof

    ColumnChooserBase

    Parameters

    • value: string

    Returns void

filterCriteria

  • get filterCriteria(): string
  • set filterCriteria(value: string): void
  • Gets the value which filters the columns list.

    let filterCriteria =  this.columnHidingUI.filterCriteria;
    memberof

    ColumnChooserBase

    Returns string

  • Sets the value which filters the columns list.

     <igx-column-hiding [filterCriteria]="'ID'"></igx-column-hiding>
    memberof

    ColumnChooserBase

    Parameters

    • value: string

    Returns void

hiddenColumnsCount

  • get hiddenColumnsCount(): number
  • Gets the count of the hidden columns.

    let hiddenColumnsCount =  this.columnHiding.hiddenColumnsCount;
    memberof

    IgxColumnHidingComponent

    Returns number

title

  • get title(): string
  • set title(value: string): void
  • Sets/gets the title of the column chooser.

    let title =  this.columnHidingUI.title;
    memberof

    ColumnChooserBase

    Returns string

  • <igx-column-hiding [title]="'IgxColumnHidingComponent Title'"></igx-column-hiding>
    memberof

    ColumnChooserBase

    Parameters

    • value: string

    Returns void

Methods

hideAllColumns

  • hideAllColumns(): void

showAllColumns

  • showAllColumns(): void