Hide a datagrid column with Javascript?

Question

I have a .net datagrid with some 20 columns. I need a column's visibilty to be toggled based on the click of a button using javascript. Any ideas?

Answer 1

You want to use COLGROUP to do this, otherwise you have to apply a style to every cell on every row, which will be terribly inefficient and will likely hang the browser, especially if your grid is large. All of the aforementioned answers that rely on a third-party library (jQuery) are doing it the slow/lazy way. Since all Javascript runs on the client-side, you probably want to have a little more consideration when it comes to efficiency.

Here ya go...

function hideColumns(tableId, colIndexArray) {
  var tbl = document.getElementById(tableId);
  if(!tbl) return;

  var rows = tbl.getElementsByTagName("TBODY");

  if(rows.length == 0)
    rows = tbl.getElementsByTagName("TR");
  else
    rows = rows[0].getElementsByTagName("TR");

  var cols = rows[rows.length - 1].getElementsByTagName("TD");
  var colgroup = document.createElement("COLGROUP");

  for(var i = 0, l = cols.length; i < l; i++) {
    var col = document.createElement("COL");

    for(var num in colIndexArray) {
      if(colIndexArray[num] == i) {
        if(document.all)
          col.style.display = 'none'
        else
          col.style.visibility = 'collapse';

        break;
      }
    }

    colgroup.appendChild(col);
  }

  tbl.insertBefore(colgroup, tbl.childNodes[0]);
}

Use it like this...

var columnsToHide = [0, 1, 2]; // hide the first 3 columns
var tableId = "tableIdHere"; // view the source of your page to get this
hideColumns(tableId, columnsToHide);

Tested in IE7 and FF3: Hide Table Columns Using Javascript