Embed image in asp.net MVC web grid column header

Question

Is there any way to embed a image in asp.net MVC web grid column?

I like to display a information icon beside the webgrid column header.

 @if(grid != null)
    {
        @grid.GetHtml(tableStyle:"table table-striped",headerStyle:"webgrid-header text-center",
        columns:grid.Columns(
        grid.Column(columnName:"Id", header: "Id"),
        grid.Column("Description", header:"Mode"),
        grid.Column("Registrations", header: "Registrations" + @<text><img src="~/Images/info.jpg" class="infoImageIcon" /></text>),
        grid.Column("Attempts", header:"Attempts")
        ));
    }

Eilon · Accepted Answer · 2014-06-10T23:00:32.303

You can create a CSS class style (e.g. in Site.css) that has a background image. You can then use a JavaScript library such as jQuery UI to register a tooltip when a user hovers their mouse over elements with that CSS class.

Something like this:

@grid.GetHtml(tableStyle:"table table-striped",headerStyle:"webgrid-header text-center",
    columns:grid.Columns(
        grid.Column(columnName:"Id", header: "Id"),
        grid.Column("Description", header:"Mode",
        grid.Column("Registrations", header: "Registrations", style: "regClass"),
        grid.Column("Attempts", header:"Attempts")
    ));

<style>
.regClass {
    background-image: url("/Images/info.jpg");
    // stick more CSS here to make the image aligned however you want
}
</style>

<script>
$(".regClass").<add some jQuery UI thing here to do tooltips>(...);
</script>

Embed image in asp.net MVC web grid column header

1 Answers1