Responsive Hierarchical Grid

Noticing the title? ‘Grids’? Yes, plural. Decided I should show some love for those with more complicated(hierarchical) data on their hands. Sometimes by looking at what we write and demonstrate someone would think we are forgetting about the Hierarchical Grid. We aren’t really, we are merely forgetting how easy it is for readers and users to forget that it is build on top of actual flat grids. You know, there’s actually a very normal igGrid widget running alongside the igHierarchicalGrid every time, even for the parent layout. When we talk features and functionality, we almost always have both controls in mind and only mention special cases. Point is this particular Hierarchical Grid is not afraid of some Responsive Web Design!

The Responsive feature can be inherited but that, as with other features with column settings, won’t do you any good. In other words, the feature and its settings must be defined for each layout you want it on. Which is not half bad because you can apply separate recognizers and mode profiles for them.

Twitter Bootstrap is also supported, which is to say you can use Bootstrap CSS classes for column visibility and mode recognition. And it’s also super easy to set up. Introducing the Responsive Web Design page with Ignite UI jQuery Hierarchical Grid and Twitter Bootstrap… whoa, that’s a mouthful!

The only difference is that you have to specify the Bootstrap recognizer if you need it, and use unprefixed classes for the column visibility like “hidden-phone” and you should be good to go:

Responsive Web Design jQuery Hierarchical Grid and Twitter Bootstrap

And the template you notice above is just for desktop where you can enjoy power and space so why not have a column with Gauges or sliders or progress bars in my case:

Thinking about it, you get responsive design mode grid with responsive design grids in it in a responsive web design site/app – this should totally qualify for an Inception meme!

Resources

I have some interesting tips and tricks coming up next, so stay tuned!

The super hacky JSFiddle on Responsive Web Design page with Ignite UI jQuery Hierarchical Grid and Twitter Bootstrap. That’s the full-screen version, the actual fiddle – code and all(preview probably in tablet or phone mode depending on how big your screen is) is here.
An ASP.NET MVC demo with everything showed above in full code. The Hierarchical Grid here doesn’t use bootstrap so you can compare how very little difference there is in code.
There’s a Webinar on Designing for Responsive Design tomorrow, don’t miss!