The ColumnHider extension adds the ability to dynamically hide or show columns
in a grid without the need to fully reset its layout. User interaction is
enabled via a menu accessible from the top right corner of the grid
(represented by a "+" mark); it will open on click, presenting checkboxes for
each column in the grid. These can be checked or unchecked to show or hide
individual columns, respectively.
require([
'dojo/_base/declare',
'dgrid/OnDemandGrid',
'dgrid/extensions/ColumnHider'
], function (declare, OnDemandGrid, ColumnHider) {
var grid = new (declare([ OnDemandGrid, ColumnHider ]))({
columns: {
col1: {
label: 'Column 1',
hidden: true
},
col2: {
label: 'Column 2',
unhidable: true
},
col3: 'Column 3'
}
}, 'grid');
// ...
});
Note: This extension is only fully supported for cases of simple, single-row
column layouts. It can also be used with the CompoundColumns extension.
| Method | Description |
|---|---|
toggleColumnHiddenState(id, hidden) |
Toggles or sets the hidden state of the column with the specified id. Hides the column if hidden is true, shows it if false, and toggles the current state if unspecified. |
The ColumnHider extension supports the following additional column definition properties.
| Property | Description |
|---|---|
hidden |
If true, the column in question will be initially hidden, but can be shown by opening the menu and checking its box. |
unhidable |
If true, the column in question will not be listed in the menu, denying access to toggle its appearance. This can be particularly useful for a selector column which should always be shown, for example. |
The ColumnHider extension will emit adgrid-columnstatechange event when a
column is hidden or shown via the popup. It includes the following properties:
grid: The Grid instance in which this event occurredcolumn: The column definition object representing the column that washidden: Boolean representing the new state of the column: true iffalse if shown