Hide column in dgrid dynamically - dojo

Question

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.

Answer 1

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;");

Answer 2

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

Answer 3

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
});

Answer 4

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);