MVC - WebGrid Set Row Back Color At Run Time

Rahul Kumar Saxena

10y42.5k15100Article

MVC WebGridSet Row Back Color

15 Comments

Join the conversation! Your thoughts help the community grow.

Delpin Susai Raj10y ago
Nice
Subash10y ago
Good
Bhuvanesh Mohankumar10y ago
Good to read...
Vivek Kumar10y ago
Good one
Bhavik Patel10y ago
good share
Atul Rawat10y ago
nice article sir
Jaipal Reddy10y ago
Nice. .
Vignesh Mani10y ago
good one
Ankur Mistry10y ago
Helpful, thanks for sharing
Rahul Kumar Saxena10y ago
Thanks Rupali Shinde
Rahul Kumar Saxena10y ago
Thanks Gowtham Rajamanickam
Rupali Shinde10y ago
nice share sir
Gowtham Rajamanickam10y ago
nice article
Rahul Kumar Saxena10y ago
Thanks Pankaj
Pankaj Kumar Choudhary10y ago
Nice Article Sir........

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

Below is my Data Table.

Table

Data in my table.

Table

Now add ADO.NET Entity Data Model.

Now add a new controller.

Now write the following code in your EmployeeController,

code

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 startup 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:

If you change your check condition in the 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>