Column Hiding is one of the igGrid features bundled into NetAdvantage for jQuery. It will enable an igGrid user to alter the amount of information he sees by hiding certain columns or revealing ones that might have been hidden. This is quite helpful since, pretty often, the user would only be looking for a certain part of the information and not all of it. Enabling this feature is traditionally easy and the effect is, as always, very elegant and practical.

To hide a column

First, it would be a good idea to consider whether you really need to use this feature or not. A scenario where you might not need to use column hiding is if all the data you’re showing in a grid is tightly related - there would be no sense for anyone to hide viable information.

An example of a case where you may want to enable column hiding is a grid which displays, for example, a list of products and their prices in different currencies. Customers from Spain may not care what each product costs in Danish kronas – they may choose to hide that column.

So now that you’ve examined your situation and decided that your grid sports a lot of auxiliary information, you decide to implement column hiding. Luckily for you, it has all been made easy.

How to do it

What you need to do is simply go to the code where you initialize your igGrid widget. In there, just add another feature object in your features declaration – like so:

   1: features: [

   2:     { name: "Paging", pageSize: 5 },

   3:     { name: "Hiding" }

   4: ]

After adding line 3, there’s a pretty good chance that your grid now looks something like this:

The underlined handles are the tools that will enable users to hide a column. Respectively, once a column has been hidden – the handle will change to a rectangle, letting them recover the hidden column:

Now, this all is just the basic functionality. You can, however, add some additional options to the column hiding feature. You may disallow hiding of a specific column or you may have columns which are initially hidden.

   1: features: [

   2:                 { name: "Paging", pageSize: 5 },

   3:                 { name: "Hiding", columnSettings: [

   4:                     { columnIndex: 0, allowHiding: false },

   5:                     { columnIndex: 1, hidden: true }

   6:                 ]

   7:                 }

   8:           ]

and it looks like this:

Notice how the “Movie Name” column has no “hide” handle – we’ve made that column always visible by not allowing it to be hidden. Also, the “Release Year” column is missing and is replaced by a “show” handle – we’ve made it hidden by default.

The Column Chooser

The column chooser is that handy popup that you can bring up when you click on a minimized column’s rectangle in order to make it fully visible again. There’s a button that reads “Column Chooser” and upon clicking on it, you’ll be presented with the following dialog:

A centralized control over the visibility of all the columns in the grid. Too bad that the only way to bring it up is to have a column that is hidden…or not?

By looking at the methods for the igGrid Column Hiding feature, two stand out as potentially helpful – showColumnChooser and hideColumnChooser. By using these two methods in conjunction with a button, we provide easy access to the column chooser – here’s what the code looks like:

   1: $("#Button").click(function () {

   2:     $("#gridTarget").igGridHiding("hideColumnChooser");

   3:     $("#gridTarget").igGridHiding("showColumnChooser");

   4: });

There is another alternative to the default column chooser behavior. Should you for some reason need to avoid the standard column chooser – feel free to use such an implementation.

Conclusion

Hopefully, this blog post helped you with setting up column hiding. It also tried to aid with providing easy access to the column chooser, which is a neat way of deciding which columns to hide or show. If you need even more material to look at, here are some possibilities:

You can find official samples here, here, here and here.

Help pages for igGrid are located here, and specialized help for the column hiding feature can be found on this page.