Skip to content

Latest commit

 

History

History
62 lines (50 loc) · 2.3 KB

ColumnHider.md

File metadata and controls

62 lines (50 loc) · 2.3 KB
Raw

ColumnHider

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.

API

Method Summary

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.

Additional Column Definition Properties

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.

Events

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 occurred
  • column: The column definition object representing the column that was hidden or shown
  • hidden: Boolean representing the new state of the column: true if hidden, false if shown