Providing reference to column actions:

@ViewChild('columnActions', { read: IgxColumnActionsComponent })
 public columnActions: IgxColumnActionsComponent;

Constructors

Section titled "Constructors"

IgxColumnActionsComponent 

new IgxColumnActionsComponent(): IgxColumnActionsComponent

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:166

Returns IgxColumnActionsComponent

Properties

Section titled "Properties"

columnItems

Section titled "columnItems"

Gets the checkbox components representing column items currently present in the dropdown

 
columnItems: QueryList<IgxCheckboxComponent>

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:92

Example

let columnItems =  this.columnActions.columnItems;

columnsAreaMaxHeight

Section titled "columnsAreaMaxHeight"

Gets/sets the max height of the columns area.

 
columnsAreaMaxHeight: string = '100%'

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:72

Remarks

The default max height is 100%.

Example

<igx-column-actions [columnsAreaMaxHeight]="200px"></igx-column-actions>

columnToggled

Section titled "columnToggled"

An event that is emitted after a column's checked state is changed. Provides references to the column and the checked properties as event arguments.

<igx-column-actions (columnToggled)="columnToggled($event)"></igx-column-actions>
columnToggled: EventEmitter<IColumnToggledEventArgs>

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:112

cssClass

Section titled "cssClass"

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

let cssCLass =  this.columnHidingUI.cssClass;
this.columnHidingUI.cssClass = 'column-chooser';
cssClass: string = 'igx-column-actions'

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:60

grid

Section titled "grid"

Gets/Sets the grid to provide column actions for.

 
grid: GridType

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:38

Example

let grid = this.columnActions.grid;

hideFilter

Section titled "hideFilter"

Shows/hides the columns filtering input from the UI.

 
hideFilter: boolean = false

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:82

Example

<igx-column-actions [hideFilter]="true"></igx-column-actions>

indentation

Section titled "indentation"

Gets/sets the indentation of columns in the column list based on their hierarchy level.

 
indentation: number = 30

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:48

Example

<igx-column-actions [indentation]="15"></igx-column-actions>

title

Section titled "title"

Gets/sets the title of the column actions component.

 
title: string = ''

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:102

Example

<igx-column-actions [title]="'Pin Columns'"></igx-column-actions>

Accessors

Section titled "Accessors"

checkAllText

Section titled "checkAllText"

Gets the text of the button that checks all columns.

 
get checkAllText(): string

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:282

Example

let uncheckAllText = this.columnActions.uncheckAllText;

Returns string

Sets the text of the button that checks all columns.

 
set checkAllText(value: string): void

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:295

Example

<igx-column-actions [checkAllText]="'Hide All'"></igx-column-actions>

Parameters

  • value: string

Returns void

columnDisplayOrder

Section titled "columnDisplayOrder"

Gets the display order of the columns.

 
get columnDisplayOrder(): ColumnDisplayOrder

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

Example

let columnDisplayOrder = this.columnActions.columnDisplayOrder;

Returns ColumnDisplayOrder

Sets the display order of the columns.

 
set columnDisplayOrder(value: ColumnDisplayOrder): void

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:240

Example

this.columnActions.columnDisplayOrder = ColumnDisplayOrder.Alphabetical;

Parameters

Returns void

filterColumnsPrompt

Section titled "filterColumnsPrompt"

Gets the prompt that is displayed in the filter input.

 
get filterColumnsPrompt(): string

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:179

Example

let filterColumnsPrompt = this.columnActions.filterColumnsPrompt;

Returns string

Sets the prompt that is displayed in the filter input.

 
set filterColumnsPrompt(value: string): void

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:190

Example

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

Parameters

  • value: string

Returns void

filterCriteria

Section titled "filterCriteria"

Gets the value which filters the columns list.

 
get filterCriteria(): string

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:202

Example

let filterCriteria =  this.columnActions.filterCriteria;

Returns string

Sets the value which filters the columns list.

 
set filterCriteria(value: string): void

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:213

Example

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

Parameters

  • value: string

Returns void

id

Section titled "id"

Gets/Sets the value of the id attribute.

 
get id(): string

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:325

Example

<igx-column-actions [id]="'igx-actions-1'"></igx-column-actions>

Returns string 

set id(value: string): void

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:328

Parameters

  • value: string

Returns void

uncheckAllText

Section titled "uncheckAllText"

Gets the text of the button that unchecks all columns.

 
get uncheckAllText(): string

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:257

Example

let uncheckAllText = this.columnActions.uncheckAllText;

Returns string

Sets the text of the button that unchecks all columns.

 
set uncheckAllText(value: string): void

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:268

Example

<igx-column-actions [uncheckAllText]="'Show All'"></igx-column-actions>

Parameters

  • value: string

Returns void

Methods

Section titled "Methods"

checkAllColumns

Section titled "checkAllColumns"

Checks all columns and performs the appropriate action.

 
checkAllColumns(): void

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:376

Returns void

Example

this.columnActions.checkAllColumns();

uncheckAllColumns

Section titled "uncheckAllColumns"

Unchecks all columns and performs the appropriate action.

 
uncheckAllColumns(): void

Defined in projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts:364

Returns void

Example

this.columnActions.uncheckAllColumns();