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';
Hides/ shows the filtering columns input from the UI.
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>
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>
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>
Gets the display order of the columns.
let columnDisplayOrder = this.columnHidingUI.columnDisplayOrder;
Sets the display order of the columns.
this.columnHidingUI.columnDisplayOrder = ColumnDisplayOrder.Alphabetical;
Gets the items of the selected columns.
let columnItems = this.columnHidingUI.columnItems;
Gets the grid columns that are going to be manipulated.
let gridColumns = this.columnHidingUI.columns;
Sets the the grid columns that are going to be manipulated.
<igx-column-hiding [columns]="grid.columns"></igx-column-hiding>
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;
Returns a boolean indicating whether the SHOW ALL button is disabled.
let isShowAlldisabled = this.columnHiding.disableShowAll;
Gets the prompt that is displayed in the filter input.
let filterColumnsPrompt = this.columnHidingUI.filterColumnsPrompt;
Sets the prompt that is going to be displayed in the filter input.
<igx-column-hiding [filterColumnsPrompt]="'Type here to search'"></igx-column-hiding>
Gets the value which filters the columns list.
let filterCriteria = this.columnHidingUI.filterCriteria;
Sets the value which filters the columns list.
<igx-column-hiding [filterCriteria]="'ID'"></igx-column-hiding>
Gets the count of the hidden columns.
let hiddenColumnsCount = this.columnHiding.hiddenColumnsCount;
Sets/gets the title of the column chooser.
let title = this.columnHidingUI.title;
<igx-column-hiding [title]="'IgxColumnHidingComponent Title'"></igx-column-hiding>
Hides all columns in the grid.
this.columnHiding.hideAllColumns();
Shows all columns in the grid.
this.columnHiding.showAllColumns();
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>