Column hiding isn't built into the grid, and setting the CSS visibility property definitely isn't the way you're going to want to implement it. I've gotten column hiding and and column drag-and-drop to work by calling the grid.setStructure method with a dynamically generated structure object. Something like this might work:

And then, to hide the first column, call

and to show it, call

instead of visibility:hidden, you can use display:none; in your cellStyles attribute. IE and Firefox do behave differently for the column index. Firefox still includes the hidden columns in your index count, IE skips those hidden columns.

Consider the following two-column grid;

var dynamicView = {
cells: [
[
{name: "Dynamic Structure Person", field: "fname", width:"50%"},
{name: "City", field: "city", cellStyles:"display:none", headerStyles:"display:none" }
]
]
};

var initialDynamicStructure = [dynamicView];

Here is the associated code in the jsp:

<span dojoType="dojox.grid.data.DojoData" jsId="dynamicModel"
store="globalDataStore5"
query="{fname: '*' }" clientSort="true">
</span>

<div dojoType="dojox.grid.Grid" id="dynamicGrid"
model="dynamicModel" structure="initialDynamicStructure"
rowsPerPage="20" class="anygrid" >
</div>

With the above setup, both columns of data are displayed, despite the display:none cellStyles and headerStyles. I have also tried visibility:hidden for both attributes, but again both columns are displayed. So I am unable to cause a designated column to be initially hidden.

Then I try to dynamically change the visibility of the city column. There are two HTML buttons, as follow:

<form>
<button type="button" onclick="displayCityColumn('dynamicGrid', true);">Show City Column</button>
<button type="button" onclick="displayCityColumn('dynamicGrid', false);">Hide City Column</button>
</form>

Here is the invoked JavaScript method displayCityColumn:

function displayCityColumn(gridId, cityVisibility) {
var grid = dijit.byId(gridId);
var row = []; //Note row is an array
row.push(dynamicView.cells[0][0]); //Push one field-level struct into row array - for fname

if (cityVisibility) {
alert("Setting cityVisibility on");
row.push( {name: "City", field: "city"} ); //Push one field-level struct into row array - for city
}
else {
alert("Setting cityVisibility off");
row.push( {name: "City", field: "city", cellStyles:"visibility:hidden", headerStyles:"visibility:hidden"} );
}

var dynamicStructure = {cells:[row] }; //The cells instance variable is an array of array of field-level structs

grid.setStructure(dynamicStructure);
grid.refresh();
}

Pressing either of the buttons "Show City Column" or "Hide City Column" causes the entire grid area to become grey colored, and empty.

I did not try display:none in this JavaScript method, because I did not know what the opposite value should be - perhaps display:inline or display:something else.

But in any event the pair of command buttons did not work either.

Does anyone see an error in the above code?

To summarize, I could not find a way that actually works in practice to initially hide a column, nor to dynamically change the visibility of a column.

Any help that actually works, as opposed to may work in theory, would be very much appreciated.

Thank you very much.

If you are defining a new structure each time you change the visibility, there is no need to try to use visibility: hidden styles, rather just leave the column out of the grid entirely. Your grid does not need a column for every field in your data source.