With NetAdvantage for jQuery in your hands, you are dealing with one of the most feature-complete jQuery controls package on the market. All of the components come with an amazing amount of built-in functionality that is just waiting to be tapped in. The NetAdvantage for jQuery Grid is a great example – take a look for yourself ! With so many things you can set up and use immediately, it will most often be the case that the grid you are using has a number of its features enabled at once. This leaves you with a very good chance of getting to use the jQuery Grid Feature Chooser – which is what this post will be about.

What is this feature chooser?

The last few sentences of the paragraph above left the feature chooser shrouded in a cloud of mist – yes, you may only sometimes see it in action – definitely not every single time you have any feature enabled. You can not turn it on whenever you desire, either. Why is that, you wonder?

The feature chooser is a dialog that you get access to whenever two or more column-altering features have been enabled. For example – you have a grid with column hiding and column summaries. Each of these features has a distinctive icon that is displayed in the column header’s rightmost side.

This is what you get with column hiding.

And this is column summaries.

The result of having these two enabled at the same time would not be to have the two icons appear right next to each other – this would be taking too much space.

We’re lucky there are only two icons up there !

What happens when these two features are enabled is this – the icon area in every applicable column gets a small gear icon ( the one we typically associate with settings or options ). Here is what that looks like:

This is the jQuery Grid Feature Chooser. It will only appear if at least two out of these three have been enabled – Column Filtering, Column Hiding and Column Summaries.

How to use it?

To use the jQuery Grid Feature Chooser, you will need to add the ig.ui.grid.featurechooser.min.js file to your project – if you are using the minified scripts. If you have ig.ui.min.js added, you do not need to add anything extra. In essence – you' are not enabling a separate feature on its own, rather enabling a number of features and thus triggering the grid’s feature chooser appearance.

Once you see the chooser’s dialog, it is pretty intuitive to work with it. Upon clicking on a column’s corresponding icon, the dialog will pop up,  populated with a link for every feature that is available for that column. Clicking on a link will toggle that feature – turning it off if it was currently enabled and vice versa. Features that are currently enabled for the selected column will have their links appear in bold text. Here is an illustration of this whole thing in practice:

On the “Movie Name” column we do not see a link to “Hide” because that simply is not enabled for the column. Additionally, we have the other two links bold – meaning they are enabled.

The second column has all three features enabled and therefore visible as links.

The third one is obvious – there is no filtering enabled.

And this is pretty much everything about the Feature Chooser. You can additionally change the duration of the dropdown animation in this manner:

   1: // gridTarget is a <table> element which is used as a core for the jQuery Grid

   2: // 500 is the time in milliseconds that it will take the animation to finish - default is 400.

   3: $("#gridTarget").igGridFeatureChooser("option", "animationDuration", 500);

Conclusion

This was my post about feature chooser – a handy little option that requires zero effort to set up and saves a lot of effort when interacting with multiple features related to the same column.