Monday, January 31, 2011

Sort indicator in System.Web.Helpers.WebGrid

ASP.NET MVC 3 has a new long expected native class System.Web.Helpers.WebGrid which is highly customizable and could be used in a number of different scenarios. Among other the grid is able to automatically sort data by selected column.

I would like to show how to add a sort indicator near the column title. It's not too difficult, but as I know, can't be done by configuring WebGrid itself. This sample is using new Razor view engine.

This markup

renders to:

As you can see column titles are linked to the same page but these links now have two extra parameters sort and sortdir which are considered by WebGrid during rendering process. These parameters are mapped to SortColumn and SortDirection properties respectively. Thus we can check if data is sorted, determine selected column using jQuery selector and add a little triangle to it's title:

The indicator will look like this:

This sample of course could be expanded for real world usage.


  1. Great tip!

    Just a side note: avoid images when posting coding blocks in the posts. What if we want to try the code? We have to type everything when we just could copy/paste.


  2. good one. there is another good sample in below link

  3. Could you please tell me instead of having unicode character ("▲" : "▼") , how can i have a image??

    1. You could use something like "<img src=\"up.gif\">" instead of "▲".