Adding custom html to header in WebGrid

Question

I am trying to add a custom header for MVC3 WebGrid.

The title property only accepts a string, and any HTML is shielded.

My current view of the razor mesh 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?

Answer 1

If you want to create separate headers in the current version of WebGrid, you will have to use client-side code for this.

Answer 2

for all title elements ....................

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

and then apply the style of any of this and want to see

.addClass () .append ()

for a separate heading .....................

this actually applies the rowcell style to 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