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

Probably the most "ASP.NET" way to do it would be to use ASP.NET AJAX. Wrap the datagrid in an UpdatePanel and have the button's server-side code modify the columns of the datagrid.

Answer 2

Use jQuery! It's awesome.

Your link can look like this:

<a href="javascript:ToggleColumn();">Toggle My Column</a>

Your javascript function can look like this:

function ToggleColumn()
{
    $(".myColumn").toggle();
}

Each generated in the desired column will have to have the attribute class="myColumn" so your javascript can find it. To do this, you can add an <ItemStyle /> element to the desired column of your DataGrid, like this:

<asp:TemplateColumn runat="server">
    <ItemStyle CssClass="myColumn" />
</asp:TemplateColumn>

And finally, remember to include a link to jQuery in your header file somewhere, like this:

<script src="/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

You can download jQuery here.

Answer 3

My personal opinion would be to use JQuery.

Use the selectors to find the column and add a 'hidden:true' to the style. This is a pure JS solution.

Answer 4

Look at this jQuery plugin,

http://p.sohei.org/jquery-plugins/columnmanager/

Incorporate this plugin on your page and call it on the click event of the link.

Answer 5

Use jquery as others suggested...a selector something like this ought to do it. This would essentially hide column 3.

$('table.tableCSS tr').find('td:eq(2)').hide(); // eq(index)

Answer 6

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