In this blog post, we will discuss how to spice up your igGrid widget by adding interaction options. Namely, this means letting your users select data directly by clicking on it. Yeah, this is out-of-the-box functionality that comes with NetAdvantage for jQuery – all you need to do is enable it. In a little while, you will know how to do that too, so without further ado – let’s get on with it !

Basic preparation

Provided you have an igGrid set up and running, this instantly means you have got all the files that are required for row selectors and selection to work. If you , however , do not have a grid initialized – then read below to find out how to do it.

All the javascript files in the Scripts/ folder are located in your Infragistics installation directory. In there, go to jQuery/js/combined/min/ and copy ig.ui.min.js into your project's Scripts/ folder. The base jQuery files should be included in your project already, but if they’re not – you can get them at jQuery/demos/scripts/ if you have the product samples installed. You can also get them off the official jQuery and jQueryUI sites.

Then, go to jQuery/themes/ and copy all three folders into either Content/ or Styles/ in your project. After that, add links to these files and you’re all set. The CSS files you need to link are min/ig/jquery.ui.custom.min.css and base/ig.ui.min.js

Row Selectors VS Selection

If these two terms aren’t clear to you, let me try to explain what the difference between them is.

Row Selection: this feature will add an auto-managed indexer column which will keep track of each row’s position in the grid. Additionally, enabling row selection will give you access to an event that is triggered whenever a row’s index is clicked. The maximum amount of selected rows you can have is ONE. You can change the way row selectors work by enabling checkboxes. In that case, you will additionally get access to two more events that are triggered whenever a row’s checkbox selector is clicked.

In short: Row Selection is very useful if you only want to know which row was clicked ( by getting row key and/or index ).

Selection: this feature will enable individual cells or entire rows within your grid to be selected. It will not alter your grid’s appearance by adding additional columns ( unlike Row Selection ). Additionally, you can enable multiple selection thus having MORE THAN ONE selected items at a time. You also have access to events that are triggered whenever a cell or a row are selected.

In short: Selection provides way more interactivity by letting users select individual cells or multiple cells / rows.

Row Selectors

Enabling row selectors is pretty easy. All there is to it is going to the place in your code where you initialize your igGrid and then add Row Selectors as an additional feature – like so:

   1: grid.igGrid({

   2:     autoGenerateColumns: false,

   3:     width: 600,

   4:     dataSource: jsonp,

   5:     columns: [

   6:         { headerText: "Movie Name", key: "Name" },

   7:         { headerText: "Release Year", key: "ReleaseYear" },

   8:         { headerText: "Average Rating", key: "AverageRating" }

   9:     ],

  10:     features: [

  11:         { name: "Paging", pageSize: 10 },

  12:         { name: "RowSelectors" }

  13:     ]

  14: });

You see that on line 12 we’ve added the “RowSelectors” feature without any additional options. This, on its own, will make the grid look like the one shown in the first screenshot above – the one with the indexed rows. Bear in mind that without having the other feature - “Selection” - enabled, there will be no visual feedback when a row has been selected. Row Selectors lets you fix that by setting the option “enableCheckBoxes” to true.  This will add a checkbox right next to each row selector thus making it more intuitive for users to select individual rows. There are a few other options you can play with, too. Also make sure to familiarize yourself with available events – they’re not that many for this feature but they are still useful. You can see an example event usage in my sample project.

Selection

Selection is really the way for your users to interact with your igGrid widget. Enabling this feature is not troublesome either, however options can bring much of a change here.

   1: grid.igGrid({

   2:     autoGenerateColumns: false,

   3:     width: 400,

   4:     dataSource: jsonp,

   5:     columns: [

   6:         { headerText: "Movie Name", key: "Name" }

   7:     ], features: [

   8:         { name: "Paging", pageSize: 10 },

   9:         { name: "Selection", mode: "cell" }

  10:     ]

  11: });

In this snippet, we enable the feature on line 9 and set the “mode” option to cell. This will let users select individual data cells within the grid. Among other options,  one that is worth noting is “multipleSelection” – it will make it so more than one selection can be active at a time. This can be applied to both modes – meaning you can select multiple rows or individual cells from all over the grid.  Additionally, you can check my sample project out to see an example usage of selection events. 

Conclusion

This blog post was entirely about bringing up the interactive side of a jQuery igGrid. Instead of only visualizing information, we saw how to let users navigate through it and execute selections on data that is of interest. More examples can be seen on this page, this one too, as well as this one and finally this.

Here are the developer guides for Row Selectors and Selection.

And finally, here is my sample solution.