Merged Cells is a new addition to the arsenal of features in the jQuery Grids by Infragistics, even though it is introduced as CTP (Community Technology Preview) for the first release of 2012. Like with most features this one is also realized and managed by its own widget and there are several benefits to that. For starters, that said widget doesn’t need to be loaded unless you need its functionality, combined with everything built like that - it just adds up. It also means that most of those can be shared for both the flat data and the hierarchical grid. It also attaches its functionality to the grid and the actual grid is unaware such thing is active at all. It’s is not yet polished as you’d might guess, but that shouldn’t worry you, on the contrary – the whole point of these preview is us sharing what we have so far, hopefully it is something you’d like and get you excited about it, perhaps give it a try, share your thoughts, make a feature request and so on. This feature sure is exciting and it has plenty of ways to come to its own in the future, so let’s have a closer look!

Merging Cells

While I say merging cells, that might be somewhat deceiving (if you are currently imagining excel-style user operated merging of two random and unrelated cells, then yes it is deceiving, indeed). Thing is, users are not really required to do anything and this feature doesn’t allow merging of unrelated cells. What it does is combining neighbouring cells with the same values. You may ask what good would that do? Well, the whole point of this feature is to provide visual aid for the user -  think of it as a visual cue that would help identifying same values by grouping or merging them in a sense. The widget will do just that – merge cells in a column that are next to each other and have identical values. Again the best usage for such a feature would be to seamlessly spot “areas” with specific repeating values, with perhaps the strongest usability and benefit being after sorting. Of course, a visual feature is not fully introduced without an image. Here’s the jQuery grid displaying the usual Northwind Customers – with Merged Cells enabled once you sort to stack identical values next to each other they will be nicely styled so the user can easily spot just where are those groups:

 

Now that makes it crystal clear, doesn’t it? Moving on to how to get that feature running and what it will offer.

Steps

As with other features, as mentioned, this one can and should be loaded when it’s needed. For that you have our own scripts and styles loader widget and all you have to do is state you want that feature as a resource along with an igGrid or igHierarchical grid:

That can as always be done using our ASP.NET (MVC) helpers and naturally you can swap the ‘igGrid’ for ‘igHierarchicalGrid’ in that snippet when your case requires.

Setting up the feature is much like all others – regardless of the rest of your grid definition, added to the features and it looks like so:

So far the feature only comes with this setting – what it does is controlling when the merging effect should occur. Setting it as above to merged would cause the grid to be initialized with cells merged, meaning as soon as you load if there are neighbouring same values – they get the proper treatment and it can look like:

That’s like one country above (depends on your data after all) so not as spectacular as when you have your values sorted. And after sorting is exactly when the cell will be merged, if you leave or set that property to ‘regular’.

Further enhancements

Multiple column sorting and merging

Having the basic functionality started, notice in the grid definition above, the Sorting mode is set to multiple. That means multiple columns can be sorted. Therefore, multiple columns will have similar values next to each other and they will all have their cells merged. Here’s how that would look when you sort both countries, like above, and then cities:

Hierarchy

As mentioned this widget will happily plug to the hierarchical jQuery grid as well and there are just a few twists. Merged Cells will affect child layouts if you leave the initial state to merged. However you can provide the same treatment for them as the parent grid via feature inheritance – allow for sorting to be inherited. Also set the initial state of the Merged Cells feature to regular and allow for it to be inherited as well. Here’s a snippet of hot the features would look for the hierarchical grid definition:

And that would result in the visual separation of the values in the sorted columns for both parent and child layouts:

Events

As expected the feature will fire events to allow you to gather information about the process and have control over it. Two events are fired one as the merging is in progress (the ‘-ing’ which is almost always cancellable so you can prevent the operation based on some criteria) and one after a merging has occurred (‘-ed’). Naturally you can use the event arguments to gain access to the grid when the feature was activated or to the widget itself or the staring row. There are also some feature-specific things that are provided for you, like the repeated value that caused cells to be grouped and how many of them were included. Here’s a sample binding to the ‘-ed’ event:

Wrapping Up

The Merged Cells in an excellent feature to visually aid in distinguishing groups of same values in sorted columns. It makes those columns seem less cluttered, more organized by visually reducing the amount of text in them (as the greyed cells just don’t stand out as much). It all results in a more intelligible layout after sorting and actually functional and pleasing visual effect to enhance the experience for the user.

12.1 is incredibly near! Keep an eye on the blogs, follow us on Twitter @Infragistics and Facebook. Speaking of which - we’ve been showing you how to do some pretty awesome stuff using our controls and perhaps it’s time for you to show us your best? Follow the link above to our Facebook page for more info and enter the competition for building the best app and a chance to win an iPad3!

UPDATE: Demo Project available for download! Both flat and hierarchical grid implementatons using only client-side scripts as well as the MVC helper. Keep in mind you will need at least a Trial version of our jQuery controls (it's free!) to build and run the views using the helper.