MVC - WebGrid Set Row Back Color At Run Time

Rahul Saxena
8y
11.8k
0
2

100

Article

WebGridMVCRowBackColor.zip

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>