Hide an ID column

Hello Alex,

I am trying to figure out the proper way to hide a column. I'm loading XML data and want column-0 to contain my ID data, but remain hidden.

http://www.activewidgets.com/messages/?id=184

I see there that you've recommended hiding the column with this type of setup over using the RowID stuff, which is fine.

Here's what I have, but it's not quite working:

<style>
.active-column-0 {width: 0px; visibility: hidden;}
</style>

The problem with the above is that it breaks the look of the header. It also seems to be having some other adverse effects on the row height! Any suggestions?

P.S. Awesome grid widget, I love it so far!!

I figured it out. "display: none;" works fine in IE, but I'm using Mozilla (Firefox 0.8), which is what caused me to think display:none wasn't correct when I first tried that. For now I'll just do 'width: 0px; display: none;' and it'll just have to look weird in Mozilla.

Is there a way to make the grid not render a column, but still be available in the row data?

Try this:

.active-column-0 {display: none!important;}

You can show a subset of available columns supplying an array of column indices into the column/values property:

obj.setColumnValues([0,2,4]);

This only affects which columns are rendered, all the data is still available.

Excellent! The !important does the trick in Mozilla! Thanks so much. I may use the other method you mentioned if I need to hide more than one column.

Is there a way to change the style of a column dynamically? For instance: grid has 10 columns. The 4 rightmost columns are "hidden" on initial load (using .css w/ display: none). Outside of the grid there are links that user can click on that will execute javascript functions to display the 4 hidden columns....

Does this make sense?

Doh! Sorry, forgot to put the code for what I am currently trying to do (which I can't get to work).

function showCol(id) {
    var showColumn = new Active.Templates.Text;
    showColumn.setStyle("display", "block");
    obj.setTemplate("column", showColumn, id);
}

function hideCol(id) {
    var hideColumn = new Active.Templates.Text;
    hideColumn.setStyle("display", "none");
    obj.setTemplate("column", hideColumn, id);
}

Check this thread:

http://www.activewidgets.com/javascript.forum.3067.2/change-column-with-via-javascript.html

This solution is simply, fine and has no bug :

obj.setRowHeaderWidth("0px");

What i did was modify the activewidgets script in the examples
to only use the cols after the first col up to the max amount of cols.
then implode it to get a string variable to put into the attribute below.

for ($i=0; $i < $column_count; $i++) {
$columns .= "\"".@mssql_field_name($data, $i)."\", ";
if ($i <> 0){
$cvals [] = $i;
}
}
$columns .= "\n];\n";
$colNums = implode(', ', $cvals);
$rows = "var ".$name."_data = [\n";

then added this into the object
$html .= " $name.setColumnValues([$colNums]);\n";