Gets the checkbox components representing column items currently present in the dropdown
let columnItems = this.columnActions.columnItems;
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>
Gets/sets the max height of the columns area.
The default max height is 100%.
<igx-column-actions [columnsAreaMaxHeight]="200px"></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';
Gets/Sets the grid to provide column actions for.
let grid = this.columnActions.grid;
Shows/hides the columns filtering input from the UI.
<igx-column-actions [hideFilter]="true"></igx-column-actions>
Gets/sets the indentation of columns in the column list based on their hierarchy level.
<igx-column-actions [indentation]="15"></igx-column-actions>
Gets/sets the title of the column actions component.
<igx-column-actions [title]="'Pin Columns'"></igx-column-actions>
Gets the text of the button that checks all columns.
If unset it is obtained from the IgxColumnActionsBased derived directive applied.
let uncheckAllText = this.columnActions.uncheckAllText;
Sets the text of the button that checks all columns.
If unset it is obtained from the IgxColumnActionsBased derived directive applied.
<igx-column-actions [checkAllText]="'Hide All'"></igx-column-actions>
Gets the display order of the columns.
let columnDisplayOrder = this.columnActions.columnDisplayOrder;
Sets the display order of the columns.
this.columnActions.columnDisplayOrder = ColumnDisplayOrder.Alphabetical;
Gets the prompt that is displayed in the filter input.
let filterColumnsPrompt = this.columnActions.filterColumnsPrompt;
Sets the prompt that is displayed in the filter input.
<igx-column-actions [filterColumnsPrompt]="'Type here to search'"></igx-column-actions>
Gets the value which filters the columns list.
let filterCriteria = this.columnActions.filterCriteria;
Sets the value which filters the columns list.
<igx-column-actions [filterCriteria]="'ID'"></igx-column-actions>
Gets/Sets the value of the id
attribute.
If not provided it will be automatically generated.
<igx-column-actions [id]="'igx-actions-1'"></igx-column-actions>
Gets the text of the button that unchecks all columns.
If unset it is obtained from the IgxColumnActionsBased derived directive applied.
let uncheckAllText = this.columnActions.uncheckAllText;
Sets the text of the button that unchecks all columns.
<igx-column-actions [uncheckAllText]="'Show All'"></igx-column-actions>
Providing reference to
IgxColumnActionsComponent
:```typescript @ViewChild('columnActions', { read: IgxColumnActionsComponent }) public columnActions: IgxColumnActionsComponent;