Class IgxColumnActionsComponent

Providing reference to IgxColumnActionsComponent:

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

Hierarchy

IgxColumnActionsComponent

Implements

DoCheck

Constructors

Properties

Accessors

Methods

Constructors

constructor

new IgxColumnActionsComponent(differs: IterableDiffers): IgxColumnActionsComponent
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:166
Parameters
- differs: IterableDiffers
Returns IgxColumnActionsComponent

Properties

columnItems

columnItems: QueryList<IgxCheckboxComponent>

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

Example

let columnItems =  this.columnActions.columnItems;

columnToggled

columnToggled: EventEmitter<IColumnToggledEventArgs> = ...

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>

columnsAreaMaxHeight

columnsAreaMaxHeight: string = '100%'

Gets/sets the max height of the columns area.

Remarks

The default max height is 100%.

Example

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

cssClass

cssClass: string = 'igx-column-actions'

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

grid

grid: GridType

Gets/Sets the grid to provide column actions for.

Example

let grid = this.columnActions.grid;

hideFilter

hideFilter: boolean = false

Shows/hides the columns filtering input from the UI.

Example

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

indentation

indentation: number = 30

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

Example

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

title

title: string = ''

Gets/sets the title of the column actions component.

Example

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

Accessors

checkAllText

get checkAllText(): string
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:281
Gets the text of the button that checks all columns.

Remarks
If unset it is obtained from the IgxColumnActionsBased derived directive applied.

Example
```
let uncheckAllText = this.columnActions.uncheckAllText;
```
Returns string
set checkAllText(value: string): void
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:295
Sets the text of the button that checks all columns.

Remarks
If unset it is obtained from the IgxColumnActionsBased derived directive applied.

Example
```
<igx-column-actions [checkAllText]="'Hide All'"></igx-column-actions>
```
Parameters
- value: string
Returns void

columnDisplayOrder

get columnDisplayOrder(): ColumnDisplayOrder
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:228
Gets the display order of the columns.

Example
```
let columnDisplayOrder = this.columnActions.columnDisplayOrder;
```
Returns ColumnDisplayOrder
set columnDisplayOrder(value: ColumnDisplayOrder): void
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:240
Sets the display order of the columns.

Example
```
this.columnActions.columnDisplayOrder = ColumnDisplayOrder.Alphabetical;
```
Parameters
- value: ColumnDisplayOrder
Returns void

filterColumnsPrompt

get filterColumnsPrompt(): string
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:178
Gets the prompt that is displayed in the filter input.

Example
```
let filterColumnsPrompt = this.columnActions.filterColumnsPrompt;
```
Returns string
set filterColumnsPrompt(value: string): void
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:190
Sets the prompt that is displayed in the filter input.

Example
```
<igx-column-actions [filterColumnsPrompt]="'Type here to search'"></igx-column-actions>
```
Parameters
- value: string
Returns void

filterCriteria

get filterCriteria(): string
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:201
Gets the value which filters the columns list.

Example
```
let filterCriteria =  this.columnActions.filterCriteria;
```
Returns string
set filterCriteria(value: string): void
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:213
Sets the value which filters the columns list.

Example
```
 <igx-column-actions [filterCriteria]="'ID'"></igx-column-actions>
```
Parameters
- value: string
Returns void

id

get id(): string
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:323
Gets/Sets the value of the id attribute.

Remarks
If not provided it will be automatically generated.

Example
```
<igx-column-actions [id]="'igx-actions-1'"></igx-column-actions>
```
Returns string
set id(value: string): void
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:328
Parameters
- value: string
Returns void

uncheckAllText

get uncheckAllText(): string
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:256
Gets the text of the button that unchecks all columns.

Remarks
If unset it is obtained from the IgxColumnActionsBased derived directive applied.

Example
```
let uncheckAllText = this.columnActions.uncheckAllText;
```
Returns string
set uncheckAllText(value: string): void
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:268
Sets the text of the button that unchecks all columns.

Example
```
<igx-column-actions [uncheckAllText]="'Show All'"></igx-column-actions>
```
Parameters
- value: string
Returns void

Methods

checkAllColumns

checkAllColumns(): void
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:376
Checks all columns and performs the appropriate action.

Example
```
this.columnActions.checkAllColumns();
```
Returns void

uncheckAllColumns

uncheckAllColumns(): void
- Defined in projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts:364
Unchecks all columns and performs the appropriate action.

Example
```
this.columnActions.uncheckAllColumns();
```
Returns void

Class IgxColumnActionsComponent

Hierarchy

Hierarchy

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

differs: IterableDiffers

Returns IgxColumnActionsComponent

Properties

columnItems

Example

columnToggled

columnsAreaMaxHeight

Remarks

Example

cssClass

grid

Example

hideFilter

Example

indentation

Example

title

Example

Accessors

checkAllText

Remarks

Example

Returns string

Remarks

Example

Parameters

value: string

Returns void

columnDisplayOrder

Example

Returns ColumnDisplayOrder

Example

Parameters

value: ColumnDisplayOrder

Returns void

filterColumnsPrompt

Example

Returns string

Example

Parameters

value: string

Returns void

filterCriteria

Example

Returns string

Example

Parameters

value: string

Returns void

id

Remarks

Example

Returns string

Parameters

value: string

Returns void

uncheckAllText

Remarks

Example

Returns string

Example

Parameters

value: string

Returns void

Methods

checkAllColumns

Example

Returns void

uncheckAllColumns