How to Dynamically set row background color in a webgrid using MVC razor view

In this tutorial we have How to Dynamically set row background color in a webgrid using MVC razor view

Step – 1: Create New Project

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step-2: Add a Database

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add

Step-3: Create table for getting data.

database

Step 4 : Now you can add controller, and action method

public ActionResult gettable()
{
return View();
}

public JsonResult GetUser()
{
List<tbl_user> D = new List<tbl_user>();
using (Database1Entities2 dc = new Database1Entities2())
{
D = dc.tbl_user.ToList();
}
return new JsonResult { Data = D, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

Step 4 :  Now you can bind the html table using the ajax you can call the controller and bind the in simple html table and  see how to compare two collumn data and get deference between them and change background color.

@section Scripts{

<script>
$(document).ready(function () {
$(“#btnUser”).click(function () {
$.ajax({
url: ‘@Url.Action(“GetUser”,”ABC”)’,
data: “”,
type: “GET”,
dataType: “json”,
success: function (data) {
loadData(data);
},
error: function () {
alert(“Failed! Please try again.”);
}
});
});
function loadData(data) {
var tab = $(‘<table id=”myTable”></table>’);
var thead = $(‘<thead></thead>’);
thead.append(‘<th> ID</th>’);
thead.append(‘<th>Name</th>’);
thead.append(‘<th>City</th>’);
// thead.append(‘<th>Education </th>’);
tab.append(thead);
$.each(data, function (i, val) {
var trow = $(‘<tr></tr>’);
trow.append(‘<td>’ + val.Id + ‘</td>’);
trow.append(‘<td>’ + val.Name + ‘</td>’);
trow.append(‘<td>’ + val.City + ‘</td>’);
trow.append(‘<td>’ + val.Education + ‘</td>’);
tab.append(trow);

});
$(‘thead tr:nth-child(4)’).hide();
//$(“tr:odd”, tab).css(‘background-color’, ‘#C4C4C4’);

$(“tr”, tab).each(function () {
var cell3 = parseInt($(this).find(“td:nth-child(3)”).text());
var cell4 = parseInt($(this).find(“td:nth-child(4)”).text());
// $(this).find(“td:nth-child(4)”).hide();
// var deff = cell3 – cell4;
if (cell3 > cell4) {
$(this).find(“td:nth-child(3)”).css({ “background-color”: “yellow” });
}
else if (cell3 < cell4) {
$(this).find(“td:nth-child(3)”).css({ “background-color”: “red” });
}
else if (cell3 == cell4) {
$(this).find(“td:nth-child(3)”).css({ “background-color”: “green” });
}
else {
$(this).find(“td:nth-child(3)”).css({“background-color”:”white”})
}
});
$(“#DivId”).html(tab);
};
});
</script>
}
<table>
<tr>
<td>
<input type=”button” value=”Get User” id=”btnUser” />
</td>
</tr>
<tr>
<td>
<div id=”DivId”>
</div>
</td>
</tr>
</table>

Here,    $(this).find(“td:nth-child(n)”     // use to find nth cell of the table column

and   $(“tr”, tab).each(function ()  // can iterate the loop through row and find nth number of column

 

How to Dynamically set row background color in a webgrid using MVC razor view

SEE MORE

1 Comment

  1. I am extremely impressed with your writing skills as well as with the layout on your weblog.
    Is this a paid theme or did you customize it yourself?
    Either way keep up the excellent quality writing, it’s rare to see a great blog like
    this one nowadays.

Leave a Reply

Your email address will not be published. Required fields are marked *