web grid sorting not working mvc 3 razor

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><a href="javascript:ShowData(@item.ColName);">@item.Name</a></text>, canSort:true),
                listgrid.Column(null, "Delete", (item) => MvcHtmlString.Create(string.Format("<a href='DeleteList/{0}'>Delete</a>", @item.Name))),                    
                                 ))
        }
    </div>

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><a href="javascript:ShowData(@item.ColName);">@item.Name</a></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!