Adding custom html to Header in WebGrid

Question

I'm trying to add a custom header for an MVC3 WebGrid.

The header property only allows for string, and any HTML is escaped.

My current grid razor view is as follows:

var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
            grid.Pager(WebGridPagerModes.NextPrevious);

            @grid.GetHtml(tableStyle: "data_table-sorter",
                alternatingRowStyle: "odd",
                columns: grid.Columns(
                grid.Column(header:"Select<span class=\"fi fi_gear\"></span>\"" , style: "table-select-col has-menu", canSort: false, format: @<input type="checkbox" value="@item.Id" />),
                grid.Column("Name", "Briefing Book Name", canSort: true, style: "dj_sortable-table-column"),
                grid.Column("Format", "Format", canSort: true, style: "dj_sortable-table-column") 
));

How can I do this?

Mike Brind · Accepted Answer · 2011-06-08 15:21:33Z

1

If you want to style individual headers in the current version of the WebGrid, you will have to use client-side code to do that.

answered Jun 8, 2011 at 15:21

Mike Brind

30.3k6 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:33:41Z

0

for all header element....................

$("#gridContent").find('table thead tr a')

and then apply style any this u want see

.addClass() .append()

for individual header.....................

actually this is applying style of rowcell to the headercell

var headerCells = $("#gridContent table tr th");

var firstRowCells = $("#gridContent table tr td");

$.each(firstRowCells, function (index, value) {
    $(headerCells[index]).addClass($(firstRowCells[index]).attr("class"));
});

also see MVC3 WebGrid Formatting or Styling Column Headers

How to add Html inside ASP.NET MVC 3 WebGrid Column Name (Header)

MVC3 WebGrid Formatting or Styling Column Headers

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Dec 3, 2013 at 9:42

Prasad Phule

4884 silver badges21 bronze badges

Collectives™ on Stack Overflow

Adding custom html to Header in WebGrid

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related