Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

MVC WebGrid Set Row Back Color At Run Time

Article:
Viewed:  1191 
Posted On:  4/16/2016 9:05:37 AM 
How we can set MVC WebGrid 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

1.png

Image 1.

2.png

Image 2.

Below is my Data Table.

3.png

Image 3.

Data in my table.

4.png

Image 4.

Now add ADO.NET Entity Data Model.

5.png

Image 5.

6.png

Image 6.

7.png

Image 7.

8.png

Image 8.

9.png

Image 9.

10.png

Image 10.

11.png

Image 11.

Now add a new controller.

12.png

Image 12.

13.png

Image 13.

14.png

Image 14.

Now do below code in your EmployeeController

15.png

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:

16.png

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>


17.png

Image 17.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us