Cannot change column visibility after resize

I have created a "console" where a user can turn the visibility of columns on or off using checkboxes. This works fine, as does the resize functionality. However, after a resize the column visibility toggle stops working. Here is some code:

Code for checkbox event:
<code>
<input type="checkbox" onChange="colarray[0][0] = showHideCols(1, colarray[0][0],colarray[0][4]);" CHECKED>
</code>

colarray is a two dimensional javascript array containing user preferences for visibility, width and other properties.

Column visibility function:
<code>
function showHideCols(index, status, size) {
var stylesheet = document.styleSheets[document.styleSheets.length-1];
var colname = ".active-column-" + index;
width1 = "width:0px";
width2 = "width:" + size + "px";

if (status == true) {
status = 0;
stylesheet.addRule(colname, width1);
stylesheet.addRule(colname, "display: none");
} else {
status = 1;
stylesheet.addRule(colname, width2);
stylesheet.addRule(colname, "display: block");
}
return status;
}
</code>

This error occurs in both Firefox and IE. Any suggestions?

When changing the column visibility of an already drawn grid, try this:

obj.getColumnTemplate(column#).setStyle("display", "none");
 obj.refresh() // this may or may not be needed

I have not tried this but it should work.

The above code did work, but it hid the column and left the column header intact. I tried a variety of things to get the header of the column to disappear as well, but nothing seems to work. Any ideas?

Try this one
document.styleSheets[document.styleSheets.length-1].addRule(".active-column" + colname , "width: 0px");

Actually Carlos, thats what I was doing initially. If you look at the initail posting you can see it in the code:

var stylesheet = document.styleSheets[document.styleSheets.length-1];
var colname = ".active-column-" + index;
...
stylesheet.addRule(colname, width1);

Bump