How to add an extra column to WebGrid in MVC3

Question

I am using the WebGrid helper to sort the grid in my MVC application.

@{ var grid = new WebGrid(Model, canSort:true ); @grid.GetHtml( columns:grid.Columns( grid.Column( "Username", "Full Name", canSort:true ), grid.Column("Profile","Profile", canSort:false) )); } 

Sorting a column will override (display a blue link) the default header style, how can I support this?

In the last column, I have an action with an image that will open a popup using the javascript dialog

  <img title="View Detail" style="cursor: pointer" onclick="openPopup('@item.EncryUserId')" src="@Url.Content("~/Content/Images/view-fullscreen.png")" /> 

How to add this extra column using WebGrid?

Thanks.

Answer 1

Finally, I got the answer as below

  grid.Column(header: "Details", format: @<text><img src="@Url.Content("~/Content/Images/view-fullscreen.png")" style="cursor: pointer" onclick="openPopup('@item.EncryUserId')" alt="View Detail" title="View Detail"/></text>) 

and there is an anchor tag inside the header, so I added headerStyle: "tdheader" and add a new style .tdheader a {color: white};

Answer 2

 grid.Column(format: @<img title="View Detail" style="cursor: pointer" onclick="openPopup('@item.EncryUserId')" src="@Url.Content("~/Content/Images/view-fullscreen.png")" /> )