Post
Ask Question

MVC - WebGrid Set Row Back Color At Run Time

In this article I am going to show how we can set WebGrid row back color at run time in MVC. Here are the steps, 

Open Visual Studio, then create a New Project,

New

New

Below is my Data Table.

Table

Data in my table.

Table

Now add ADO.NET Entity Data Model.

Entity Data Model

Entity Data Model

Entity Data Model

Entity Data Model

Entity Data Model

Entity Data Model

Entity Data Model

Now add a new controller.

controller

controller

controller

Now write the following code in your EmployeeController,

code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace WebGrid_MVC_RowBackColor.Controllers  
  8. {  
  9.     public class EmployeeController : Controller  
  10.     {  
  11.         // GET: Employee  
  12.         public ActionResult Index()  
  13.         {  
  14.             var employees = new List<Emp_Information>();  
  15.             using (CompanyDBEntities db = new CompanyDBEntities())  
  16.             {  
  17.                 employees = db.Emp_Information.ToList();  
  18.             }  
  19.             return View(employees);  
  20.         }  
  21.     }  
  22. }  
Now add View Index.cshtml,
  1. @model List<WebGrid_MVC_RowBackColor.Emp_Information>  
  2. @{  
  3.     ViewBag.Title = "Employee Listing";  
  4.     var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10);  
  5.     grid.Pager(WebGridPagerModes.All);  
  6. }  
  7. @section scripts  
  8. {  
  9.     <script>  
  10.         $(document).ready(function () {  
  11.   
  12.             $("#content tbody tr").each(function (i, row) {  
  13.                 var $actualRow = $(row);  
  14.                 if ($actualRow.find('input.cityCheck[type=text]').val() == 'Banglore') {  
  15.                     $actualRow.css('background-color', '#0094ff');  
  16.                 }  
  17.   
  18.             });  
  19.         });  
  20.     </script>  
  21. }  
  22.   
  23. <style type="text/css">  
  24.     .webgrid-table {  
  25.         font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
  26.         font-size: 10pt;  
  27.         width: 100%;  
  28.         border-collapse: separate;  
  29.         border: solid 1px #ff6a00;  
  30.         background-color: white;  
  31.     }  
  32.   
  33.         .webgrid-table td, th {  
  34.             border: 1px solid #ff6a00;  
  35.             padding: 3px 7px 2px;  
  36.         }  
  37.   
  38.     .webgrid-header {  
  39.         background-color: #ff0000;  
  40.         color: #FFFFFF;  
  41.         padding-bottom: 4px;  
  42.         padding-top: 5px;  
  43.         text-align: left;  
  44.     }  
  45.   
  46.     .webgrid-footer {  
  47.     }  
  48.   
  49.     .webgrid-row-style {  
  50.         padding: 3px 7px 2px;  
  51.     }  
  52. </style>  
  53.   
  54. <div id="content">  
  55.     @grid.GetHtml(  
  56.     tableStyle: "webgrid-table",  
  57.     headerStyle: "webgrid-header",  
  58.     footerStyle: "webgrid-footer",  
  59.     alternatingRowStyle: "webgrid-alternating-row",  
  60.     rowStyle: "webgrid-row-style",  
  61.     columns: grid.Columns(  
  62.         grid.Column(header: "Employee ID", format: @<text><div>@(item.EMP_ID)</div></text>),  
  63.                                grid.Column(header: "Name", format: @<text><div>@(item.Name)</div></text>),  
  64.                      grid.Column(header: "Manager Name", format: @<text><div>@(item.ManagerName)</div></text>),  
  65.      grid.Column(header: "Project Name", format: @<text><div>@(item.ProjectName)</div></text>),  
  66.         grid.Column(header:"City", format:@<text><input type="text" class="cityCheck" value="@item.City" /></text>)  
  67.                                                                 ))  
  68. </div>  
Set you startup controller in route.config,
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.Routing;  
  7.   
  8. namespace WebGrid_MVC_RowBackColor  
  9. {  
  10.     public class RouteConfig  
  11.     {  
  12.         public static void RegisterRoutes(RouteCollection routes)  
  13.         {  
  14.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  15.   
  16.             routes.MapRoute(  
  17.                 name: "Default",  
  18.                 url: "{controller}/{action}/{id}",  
  19.                 defaults: new { controller = "Employee", action = "Index", id = UrlParameter.Optional }  
  20.             );  
  21.         }  
  22.     }  
  23. }  
Now run your application:

application

If you change your check condition in the jQuery code like below:
  1. <script>  
  2.         $(document).ready(function () {  
  3.   
  4.             $("#content tbody tr").each(function (i, row) {  
  5.                 var $actualRow = $(row);  
  6.                 if ($actualRow.find('input.cityCheck[type=text]').val() == 'Delhi') {  
  7.                     $actualRow.css('background-color', '#0094ff');  
  8.                 }  
  9.   
  10.             });  
  11.         });  
  12.     </script>  
table

Read more articles on MVC:


Similar Articles