Monday, November 12, 2012

Improving usability with Telerik MVC Grid

The 'Grid' is a presentation element that you will come across quite often in the traditional LOB application development. Whether it's web or windows one can never avoid meeting the 'Grid'. In ASP.Net MVC development platform Telerik MVC grid provides a rich, consistent and powerful abstraction to handle grids.

What I'd like to discuss in this post is the 'Hierarchical' capabilities of Telerik MVC grid. Specifically how you could achieve different levels of usability and developer productivity by using the server and client data binding techniques that Telerik MVC grid provides.

NOTE: Prior experience of Telerik MVC grid usage is assumed.
Let’s take a 2 level grid and identify different kinds of data binding techniques we have.

Master Data bindingDetail data bindingDetails
ServerServerSuits small scale grids with low. Quick to implement
ClientClient Fairly easy to implement and can be used for a smoother user experience when larger loads are involved.
ServerClient - AutomaticDetail level is bound as and when the master is rendered on the browser. All the detail levels are bound regardless of whether they are expanded or not.
ServerClient - On DemandDetail levels are bound only when user expands a level. This scenario scales the best.

The first 2 scenarios are the easiest to implement and you will find several online references. But for the rest of the two, where you got mixed data binding techniques going on between master and detail levels, the examples are not so common.

Server-Client (Automatic)



The master grid is pretty straight forward. Only thing to note is that we use ‘Server Templates’ to render the detail view.

In the detail grid a client data binding mechanism is used. This will force the detail grid to perform deferred data binding after the master grid is rendered on the client. However all the detail levels will be data bound regardless of whether they are expanded. This works OK in ‘Chrome’ where the detail level binding happens behind the scene after the master level is rendered. The page will silently bind and render detail levels without page flickering. But in ‘IE’ (7.0) the page gets hold up until all the detail levels are rendered. 

This technique could be preferred if the usage of the grid demands high responsiveness at detail levels but does not care so much about the initial page load time. Since all the detail levels are bound at page load, they become highly responsive afterwards. Good choice for a business case where the user will spend a considerable amount of time in the same page/grid.

Server - Client (On Demand)
In this scenario we attempt to bind the detail level only if the user decides to expand a particular level. 



The interesting thing to note here is that although the Detail grid is marked for client data binding it does not have a data binding client event handler like in the previous instance. This will render an empty detail grid to the browser when the master grid is rendered. To trigger the data bind of the detail grid when a particular level is expanded in the master, we use the ClientEvent handler.
.ClientEvents(e=>  e.OnDetailViewExpand("showDetail"))

This will trigger a javascript function ‘showDetail’ which will do the necessary data binding.

This is an excellent choice if you value the initial response time of the page. The detail levels are shown only when required thus this does not put unnecessary load on the network and server thus scales the best.
Post a Comment