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.

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.