Fixed header for Webgrid in ASP.NET MVC

One of the very common and useful functionality is to keep fixed header for grid, when we have number of rows on page, Webgrid does not provide fixed header. This article will show you how to create a webgrid with fixed header.

Approach: When we create webgrid it actually create a html table with thead, tbody and tfoot. We will work on this table and split the table in to header, body , footer and put them in to three different div (header, body, footer), using jQuery in $(document).ready(function () {});. Some changes in css required as per our requirement. Newly created Webgrid with fixed header provide sorting and paging feature also.

Fixed Webgrid header

Fixed Webgrid header

Here is code

@model  List<FixedGridHeader.Models.StudentModel>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}

<script type="text/javascript">
     $(document).ready(function () {
         $("#GridHeader").html("<table>" + $('#gridContent table thead').html() + "</table>");
         $("#GridHeader table tr:first").append("<th style='width:12px;' ></th>");
         $("#GridBody").html("<table>" + $('#gridContent table tbody').html() + "</table>");
         $("#GridFooter").html("<table>" + $('#gridContent table tfoot').html() + "</table>");
         $("#gridContent").hide();
     });
</script>

<style type="text/css">
    .webgrid-table td, th { border: 1px solid #98BF21;   }
    .webgrid-header { background-color: #A7C942; color: #FFFFFF; text-align: left;}
    .webgrid-alternating-row { background-color: #EAF2D3; }
    .colWidth { width: 200px;  }
    #Outer { font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;}
    #GridBody{width:1020px ;height:200px; overflow-y: scroll; border:solid 1px #e8eef4;  }
    #GridHeader table { width:1022px; text-align:left; margin-top: 0px; border: solid 1px #A7C942; padding:0px; border-collapse:collapse; } 
    #GridFooter  {  border:solid 1px #e8eef4; width:1020px; }
    #GridHeader table th { width: 200px;}
</style>

<h2>Student</h2>

@{
    var grid = new WebGrid(Model);
}

<div  id="gridContent" style=" padding:20px; " >
@grid.GetHtml(
        tableStyle: "webgrid-table",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        alternatingRowStyle: "webgrid-alternating-row",
        selectedRowStyle: "webgrid-selected-row",
        rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,
        columns:
            grid.Columns(
            grid.Column(columnName: "Name", header: "Name", format: @<text>@item.Name</text>, style: "colWidth"),
            grid.Column(columnName: "SchoolName", header: "School Name", format: @<text>@item.SchoolName</text>, style: "colWidth"),
            grid.Column(columnName: "Address", header: "Address", format: @<text>@item.Address</text>, style: "colWidth"),
            grid.Column(columnName: "City", header: "City", format: @<text>@item.City</text>, style: "colWidth"),
            grid.Column(columnName: "State", header: "State", format: @<text>@item.State</text>, style: "colWidth")
           ))
</div>
 
 <div id="Outer" >
 <div id="GridHeader"></div>
 <div id="GridBody"></div>
 <div id="GridFooter"></div>
 </div>

Complete code

Indexing and searching in Lucene.net (.NET)

Indexing and searching in Lucene.net (.NET)

Advertisements
This entry was posted in ASP.NET MVC Web Grid, css, jQuery and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s