-
Notifications
You must be signed in to change notification settings - Fork 162
Column Hiding Specification
Galina Edinakova edited this page Feb 1, 2019
·
7 revisions
IgxColumnHiding component provides UI to alter grid's layout by changing columns' visibility in run-time via checkboxes.
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>The IgxColumnHiding component can be defined on our page separately (rather than having it built-in the toolbar).
<igx-grid #grid [data]="data"></igx-grid><igx-column-hiding [columns]="grid.columns"></igx-column-hiding>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.
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 (row selection checkboxes are hidden when all the columns are hidden)
| 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. |
| 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. |
| Name | Type | Description |
|---|---|---|
disableHiding |
boolean | Determines whether the column cannot be hidden through the column hiding UI. |
| 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. |
| Name | Type | Parameters | Description |
|---|---|---|---|
showAllColumns |
void | N/A | Shows all columns in the grid. |
hideAllColumns |
void | N/A | Hides all columns in the grid. |
| Name | Type | Parameters | Description |
|---|---|---|---|
toggleColumnHidingUI |
void | N/A | Shows/Hides the built-in column hiding UI. |
| Name | Description |
|---|---|
onColumnVisibilityChanged |
Emitted when a column visibility has changed. Args: { column: any, newValue: boolean }
|
| Name | Description |
|---|---|
onColumnVisibilityChanged |
Emitted when a column visibility has changed. Args: { column: any, newValue: boolean }
|
- 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 disableHiding is true are not shown
- Visibility of columns' whose disableHiding=true cannot be toggled via Column Chooser UI
- Changing columns' disableHiding 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 disableHiding is false
- 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 disableHiding=true for all currently visible columns;
- initially, when all columns are hidden or their disableHiding=true.
- Show All button shows all currently hidden columns whose disableHiding is false
- 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 disableHiding=true for all currently hidden columns;
- initially, when all columns are visible or their disableHiding=true.
- 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
- 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)