Responsive Web Design with jQuery Grids: A closer look

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:

Responsive Web Design jQuery Hierarchical Grid and Twitter Bootstrap

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!


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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s