In this
article I am going to show how we can set WebGrid row back color at run time in
MVC.
Open Visual
Studio -> New Project

Image 1.

Image 2.
Below is my
Data Table.

Image 3.
Data in my
table.

Image 4.
Now add
ADO.NET Entity Data Model.

Image 5.

Image 6.

Image 7.

Image 8.

Image 9.

Image 10.

Image 11.
Now add a new
controller.

Image 12.

Image 13.

Image 14.
Now do below
code in your EmployeeController

Image 15.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace
WebGrid_MVC_RowBackColor.Controllers
{
public class EmployeeController : Controller
{
// GET: Employee
public ActionResult Index()
{
var employees = new List<Emp_Information>();
using (CompanyDBEntities db = new CompanyDBEntities())
{
employees =
db.Emp_Information.ToList();
}
return View(employees);
}
}
}
Now add View Index.cshtml
@model List<WebGrid_MVC_RowBackColor.Emp_Information>
@{
ViewBag.Title = "Employee
Listing";
var grid = new WebGrid(source: Model,
canPage: true, rowsPerPage: 10);
grid.Pager(WebGridPagerModes.All);
}
@section scripts
{
<script>
$(document).ready(function () {
$("#content tbody
tr").each(function (i, row) {
var $actualRow =
$(row);
if ($actualRow.find('input.cityCheck[type=text]').val() == 'Banglore') {
$actualRow.css('background-color', '#0094ff');
}
});
});
</script>
}
<style type="text/css">
.webgrid-table {
font-family: "Trebuchet
MS",
Arial, Helvetica, sans-serif;
font-size: 10pt;
width: 100%;
border-collapse: separate;
border: solid 1px #ff6a00;
background-color: white;
}
.webgrid-table td, th {
border: 1px solid #ff6a00;
padding: 3px 7px 2px;
}
.webgrid-header {
background-color: #ff0000;
color: #FFFFFF;
padding-bottom: 4px;
padding-top: 5px;
text-align: left;
}
.webgrid-footer {
}
.webgrid-row-style {
padding: 3px 7px 2px;
}
</style>
<div id="content">
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
columns: grid.Columns(
grid.Column(header: "Employee
ID",
format: @<text><div>@(item.EMP_ID)</div></text>),
grid.Column(header: "Name", format: @<text><div>@(item.Name)</div></text>),
grid.Column(header: "Manager
Name",
format: @<text><div>@(item.ManagerName)</div></text>),
grid.Column(header: "Project
Name",
format: @<text><div>@(item.ProjectName)</div></text>),
grid.Column(header:"City", format:@<text><input type="text" class="cityCheck" value="@item.City" /></text>)
))
</div>
Set you stratup controller in
route.config
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace
WebGrid_MVC_RowBackColor
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Employee", action = "Index", id = UrlParameter.Optional }
);
}
}
}
Now run your application:

Image 16.
If you change your check condition
in you jQuery code like below:
<script>
$(document).ready(function () {
$("#content tbody
tr").each(function (i, row) {
var $actualRow =
$(row);
if ($actualRow.find('input.cityCheck[type=text]').val() == 'Delhi') {
$actualRow.css('background-color', '#0094ff');
}
});
});
</script>

Image 17.