web grid sorting not working mvc 3 razor - asp.net-mvc-3

Question

I am using MVC 3 with Razor and I am using the below web grid to show some data,
What I need sorting on my first column. I have used similar code on other pages too for my sorting and it works fine, but here it doesnt seem to work.
However if I go to the next page say page 2 and now I click sort, it is sorted ascending and then again same problem.
<div id="grid">
#{
// added ajaxContainerId
var listgrid = new WebGrid(source: Model.ABC, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
#listgrid.GetHtml(
columns: listgrid.Columns(
listgrid.Column("ColName", format: #<text>#item.Name</text>, canSort:true),
listgrid.Column(null, "Delete", (item) => MvcHtmlString.Create(string.Format("<a href='DeleteList/{0}'>Delete</a>", #item.Name))),
))
}
</div>

Answer 1

Full article at : http://yassershaikh.com/mvc-3-web-grid-sorting-not-working/
using the columnName attribute helped, I was using the wrong column name, because of which the sorting was not working
Here is the code I am using now
<div id="grid">
#{
// added ajaxContainerId
var listgrid = new WebGrid(source: Model.ABC, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
#listgrid.GetHtml(
columns: listgrid.Columns(
listgrid.Column(header:"ColName", columnName="DbColName", format: #<text>#item.Name</text>, canSort:true),
listgrid.Column(null, "Delete", (item) => MvcHtmlString.Create(string.Format("<a href='DeleteList/{0}'>Delete</a>", #item.Name))),
))
}
</div>
Hope this helps someone in future too!