MVC 4 Razor: Frozen Rows and Columns Webgrid Using jQuery Like Excel Sheet

Hi friends,in this article I will explain about How to make Frozen Rows and Columns Webgrid Using jQuery Like Excel Sheet in MVC 4 Razor 
I already explained in the previous articles about MVC 4 Razor: Bind jQuery DatePicker Calendar in MVC WebGrid Using ASP.NET MVC, C#.Net, MVC4 Razor: Handling multiple submit buttons on the same View and MVC 4 Razor: Create Nested WebGrid with Expand/Collapse in ASP.NET MVC4

So for this article first we will create a new ASP.NET MVC 4 application. After creating this application add the model class in you project and add the below code.

Model(UserModel.cs):

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcFrozenWebGrid.Models {     public class UserModel     {         public List<User> userList { get; set; }     }     public class User     {         public int UserID { get; set; }         public string FirstName { get; set; }         public string LastName { get; set; }         public string Mobile { get; set; }         public string City { get; set; }         public string State { get; set; }     } }

Controller(UserController.cs):

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcFrozenWebGrid.Models; namespace MvcFrozenWebGrid.Controllers {     public class UserController : Controller     {         public ActionResult Index()         {             UserModel objUserModel = new UserModel();             objUserModel.userList = GetUserList();             return View(objUserModel);         }         public List<User> GetUserList()         {             List<User> objUser = new List<User>();             objUser.Add(new User { UserID = 1, FirstName = "Kishore", LastName = "P", Mobile = "9999999999", City = "XXXXX", State = "XXXXXX" });             objUser.Add(new User { UserID = 2, FastName = "Satya", LastName = "P", Mobile = "9999999999", City = "XXXXX", State = "XXXXXX" });             objUser.Add(new User { UserID = 3, FirstName = "Raghav", LastName = "P", Mobile = "9999999999", City = "XXXXX", State = "XXXXXX" });             objUser.Add(new User { UserID = 4, FirstName = "Nag", LastName = "P", Mobile = "9999999999", City = "XXXXX", State = "XXXXXX" });             objUser.Add(new User { UserID = 5, FirstName = "SaiR", LastName = "P", Mobile = "9999999999", City = "XXXXX", State = "XXXXXX" });             objUser.Add(new User { UserID = 6, FirstName = "Satyam", LastName = "S", Mobile = "9999999999", City = "XXXXX", State = "XXXXXX" });             objUser.Add(new User { UserID = 7, FirstName = "Anil", LastName = "S", Mobile = "9999999999", City = "XXXXX", State = "XXXXXX" });             objUser.Add(new User { UserID = 8, FirstName = "Madhu", LastName = "P", Mobile = "9999999999", City = "XXXXX", State = "XXXXXX" });             return objUser;         }     } }

View(Index.cshtml):

@model MvcFrozenWebGrid.Models.UserModel @{     ViewBag.Title = "Frozen Rows and Columns in Mvc 4 Razor Webgrid Using jQuery Like Excel"; } <script src="../../Scripts/jquery.js" type="text/javascript"></script> <script src="../../Scripts/jquery.dataTables.js" type="text/javascript"></script> <script src="../../Scripts/FixedColumns.js" type="text/javascript"></script> <script type="text/javascript">     $(document).ready(function () {         var oTable = $('#userGrid').dataTable({             "sScrollX": "0",             "sScrollY": "100px",             "sScrollXInner": "120%",             "bPaginate": true,             "bLengthChange": false,             "bFilter": true,             "bSort": false,             "bInfo": true,             "bAutoWidth": true         });         new FixedColumns(oTable, {             "iLeftColumns": 2,             "iLeftWidth": 150,             "iRightWidth": 850         });     });       </script> <style type="text/css">     table     {         margin: 4px;         border-collapse: collapse;         width: 500px;         font-family: Tahoma;         font-size: small;     }     th     {         background-color: #990000;         font-weight: bold;         color: White !important;     }     table th a     {         color: White;         text-decoration: none;     }     table th, table td     {         border: 1px solid black;         padding: 5px;     } </style> @{     var grid = new WebGrid(source: Model.userList,       rowsPerPage: 10);     @grid.GetHtml(         tableStyle: "webGrid",         headerStyle: "grid-header",         rowStyle: "gridRow",         alternatingRowStyle: "alt",         mode: WebGridPagerModes.All,         firstText: "<< First",         previousText: " < Previous",         nextText: "Next >",         lastText: "Last >>",         htmlAttributes: new { id = "userGrid" },         columns: grid.Columns(                                 grid.Column("UserID", "UserID"),                                 grid.Column("FirstName", "FirstName"),                                 grid.Column("LastName", "LastName"),                                 grid.Column("Mobile", "Mobile"),                                 grid.Column("City", "City"),                                 grid.Column("State", "State"))                     )                }

In above code first we have added the below js references for frozen rows.

<script src="../../Scripts/jquery.js" type="text/javascript"></script> <script src="../../Scripts/jquery.dataTables.js" type="text/javascript"></script> <script src="../../Scripts/FixedColumns.js" type="text/javascript"></script>

The output of the above code as shown in the below figure.First two columns UserID and Firstname are fixed and remaining columns are can be scroll.

You can download the code by clicking on below image.