4

How to hide complete column in dgrid (gridFromHtml) based on some run time parameter? Lets say if the value of parameter is true I should be able to display some column and if the value is false then I should be able to hide that same column.

TechnoCrat
  • 2,055
  • 4
  • 23
  • 35

4 Answers4

15

Use grid.styleColumn(columnId, css):

var grid = new Grid({
    store: store,
    columns: [
        { id: "artist", label: "Artist", field: "Artist"},
        { id: "name", label: "Song", field: "Name"},
        { id: "gerne", label: "Genre", field: "Genre"}
    ]
}, "grid-placeholder");

// to hide column with id="name"
grid.styleColumn("name", "display: none;");

// to show it
grid.styleColumn("name", "display: table-cell;");
phusick
  • 7,342
  • 1
  • 21
  • 26
  • It'd be great if there was a parameter you could pass to the columns themselves that would make them hidden. is there any documentation out there on the params you can pass? – streetlight Mar 13 '14 at 16:42
  • Also, I've been getting the error "An invalid or illegal string was specified." When passing things in -- have you seen this before? – streetlight Apr 01 '14 at 18:33
6

There is a dgrid extension called ColumnHider which allows you to pass in a column with a "hidden" property.

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");
  // ...
});

This will also give the user the ability to hide their own columns. You can set some columns to be unhidable, like column 2 above

bryaneaton13
  • 96
  • 1
  • 2
  • Is there an alternative way where we don't use the ColumnHider feature, but just hide a particular column of a reusable grid and give it to the user without any option for the user to view/hide the columns – NIV Jun 26 '18 at 12:53
1

You need to use toggleColumnHiddenState:

require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/extensions/ColumnHider'
], function (declare, OnDemandGrid, ColumnHider) {
    var grid = new (declare([ OnDemandGrid, ColumnHider ]))({
        columns: {
            'id': {label: '#'},
            'name': {label: 'Название'}
        }
    }, 'grid');

    grid.toggleColumnHiddenState('name', true);  // hiding 
    grid.toggleColumnHiddenState('name', false); // showing 
    grid.toggleColumnHiddenState('name');        // toggling column
});
Lidiya Parshina
  • 195
  • 1
  • 6
  • toggleColumnHiddenState: function (id, hidden). Looks like it expects an id, not a name. – soeik Aug 17 '18 at 11:20
-1

Should think this will work

var grid = new dojox.grid.DataGrid({

    store: dataStore,
    structure: [{
        name: "ID",
        field: "id",
        width: "100px"
    }, {
        name: "Values",
        field: "values",
        width: "100px"
    }]
}, "myGrid");

grid.startup();

function showOrHideColumn(show, widget, index) {
  var d = show ? "" : "none"
  dojo.query('td[idx="'+index+'"]', widget.viewsNode).style("display", d);
  dojo.query('th[idx="'+index+'"]', widget.viewsHeaderNode).style("display", d);
}

showOrHideColumn(false,grid,0);
mschr
  • 8,531
  • 3
  • 21
  • 35