Column Hiding Specification

1. Overview

IgxColumnHiding component provides UI to alter grid's layout by changing columns' visibility in run-time via checkboxes.

Column Hiding by using the Toolbar

The grid's toolbar provides a toggle button, which can be used for displaying the built-in Column Hiding component. In order to use it, both the showToolbar and the columnHiding property of the grid should be set to true.

<igx-grid [showToolbar]="true" [columnHiding]="true">
</igx-grid>

Column Hiding as a separate component

The IgxColumnHiding component can be defined on our page separately (rather than having it built-in the toolbar).

Setup grid

<igx-grid #grid [data]="data"></igx-grid>

Declare ColumnHidingUI on your page

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

2. User Stories

Developer

As a developer, I want:

to be able to programatically show and hide igxColumnChooser;
to change the igxColumnChooser title;
to allow users to search through the list of columns;
to allow/disallow users to hide columns in run time;
to be able to host the column chooser out of the grid.

End user

As an end user, I want to:

show and hide grid columns via UI;
be able to search through the list of columns;
know how many columns are hidden at any given moment.
easily toggle the visibility of all columns.

3. API

Properties

IgxColumnHidingComponent properties:

Name	Type	Description
`columns`	Object Array	The array of grid columns that will be manipulated.
`columnDisplayOrder`	ColumnDisplayOrder enumeration	Whether the columns should be sorted Alphabetically or displayed in the order they appear in the grid.
`title`	string	The title to be displayed.
`filterColumnsPrompt`	string	The prompt to be displayed in the filter input.
`filterCriteria`	string	The value to filter the columns list by.
`disableHideAll`	boolean	Returns whether the Hide All button will be disabled.
`disableShowAll`	boolean	Returns whether the Show All button will be disabled.
`showAllText`	string	The text to be displayed inside the Show All button.
`hideAllText`	string	The text to be displayed inside the Hide All button.
`columnsAreaMaxHeight`	string	The maximum height of the area of the Column Hiding UI that contains the columns.

IgxGridComponent properties:

Name	Type	Description
`columnHiding`	boolean	Whether the built-in column hiding UI for the grid is enabled.
`columnHidingTitle`	string	The title to be displayed of the built-in column hiding UI.
`hiddenColumnsCount`	number	The number of hidden columns.
`hiddenColumnsText`	string	The text to be displayed inside the toggle button for the built-in column hiding UI.

IgxColumnComponent properties:

Name	Type	Description
`disableHiding`	boolean	Determines whether the column cannot be hidden through the column hiding UI.

IgxGridToolbarComponent properties:

Name	Type	Description
`columnHidingUI`	IgxColumnHidingComponent	Reference to the built-in column hiding UI component.
`columnHidingDropdown`	IgxDropDownComponent	Reference to the dropdown, that contains the built-in column hiding UI component.

Methods

IgxColumnHidingComponent methods:

Name	Type	Parameters	Description
`showAllColumns`	void	N/A	Shows all columns in the grid.
`hideAllColumns`	void	N/A	Hides all columns in the grid.

IgxGridToolbarComponent methods:

Name	Type	Parameters	Description
`toggleColumnHidingUI`	void	N/A	Shows/Hides the built-in column hiding UI.

Outputs

IgxColumnHidingComponent outputs:

Name	Description
`onColumnVisibilityChanged`	Emitted when a column visibility has changed. Args: `{ column: any, newValue: boolean }`

IgxGridComponent outputs:

Name	Description
`onColumnVisibilityChanged`	Emitted when a column visibility has changed. Args: `{ column: any, newValue: boolean }`

4. Test Scenarios

Automation

Column chooser lists all columns of the associated grid in the same order
Column chooser title property controls what title would be displayed ("Column Chooser" by default)
The order of columns in Column Chooser is controlled by the columnDisplayOrder property
Checkboxes' checked state reflects each column's visibility (checked if hidden)
Columns' whose allowHiding is false are shown disabled
Visibility of columns' whose allowHiding=false cannot be toggled via Column Chooser UI
Changing columns' allowHiding value is reflected in Column Chooser UI
Toggling a column checkbox state immediately shows/hides the column from the grid
Hide All button hides all currently visible columns whose allowHiding is true
Hide All button gets disabled when there's no column to be hidden:
- after pressing the button itself;
- after unchecking all enabled checkboxes;
- after setting allowHiding=false for all currently visible columns;
- initially, when all columns are hidden or their allowHiding=false.
Show All button shows all currently hidden columns whose allowHiding is true
Show All button gets disabled when all columns that can be visible are already visible:
- after pressing the button itself;
- after checking all enabled checkboxes;
- after setting allowHiding=false for all currently hidden columns;
- initially, when all columns are visible or their allowHiding=false.
By default, Column Chooser displays a filter input with "Filter columns list � " text
"Filter columns list � " prompt can be changed via filterColumnsPrompt property
Columns list gets filtered while typing in the filter input on every stroke
Clearing the filter textbox restores the initial columns list
Show All & Hide All buttons operate over the filtered in columns only
enableFilter property controls whether the filter input is shown
onColumnVisibilityChanged event is fired with the proper arguments on toggling a column's checkbox
onColumnVisibilityChanged event is fired for each visible column only on pressing Hide All button
onColumnVisibilityChanged event is fired for each hidden column only on pressing Show All button
Grid's onColumnVisibilityChanged event is fired for every change of a column's hidden property value
Grid's enableColumnChooser property controls whether the Column Chooser button should be shown
Grid's column chooser button shows the number of hidden columns
By default, Column Chooser is displayed in a toggle
Grid's showColumnChooser() method opens Column Chooser toggle when enableColumnChooser is true
Grid's hideColumnChooser() method closes Column Chooser toggle when enableColumnChooser is true
Column chooser can be positioned outside the grid

Manual

Column hiding loads in a timely manner with a big number of columns (~300)
Hide All command is executed in a timely manner on a big number of columns (~300)
Show All command is executed in a timely manner on a big number of columns (~300)