How to display image on WebGrid Header

Question

I am trying to use the WebGrid in My MVC3 application and in my grid two column Headers i want to display images .So please give some example for this. By using "format" option i displayed images in column but not in header so please tel me how to acheave this in web grid

@MvcHtmlString.Create(grid.GetHtml( columns: grid.Columns( grid.Column(header: "{Tree}", format: @), grid.Column("Name") )).ToString().Replace("{Tree}", "")). — MNR, Feb 24 '12 at 08:59
that actually works :D But is there another not so "hacky" solution? — BaSche, Feb 28 '12 at 18:01

score 0 · Answer 1 · edited May 23 '17 at 12:06

If you want to display multi images, you can use Html.ActionLink property in your View as below. In this sample I use Detail/Edit/Delete images as a button under Operation column.

Note: Type "Title", "Controller" and "Action" name in Html.ActionLinks according to your project. If you use empty title simply use " ".

....
//for using multiple Html.ActionLink in a column using Webgrid
grid.Column("Operations", format: (item) =>
 new HtmlString(
       Html.ActionLink("Show Details", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,               
           title = "Detail",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/detail.png')"
       }, null).ToString() +
       Html.ActionLink("Edit Record", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID, 
           title = "Edit",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/edit.png')"
       }, null).ToString() +
       Html.ActionLink("Delete Record", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,
           title = "Delete",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/delete.png')"
       }, null).ToString()
 )
)
....


<style type="text/css">
    a.icon-link {
        background-color: transparent; 
        background-repeat: no-repeat; 
        background-position: 0px 0px;
        border: none;
        cursor: pointer; 
        width: 16px;
        height: 16px;
        margin-right: 8px; 
        vertical-align: middle;
    }
</style>

For my full example, you might look at here: How to use WebGrid in a cshtml view?

Regards.

How to display image on WebGrid Header

1 Answers1