How to change the colour of an MVC webgrid row text depending on some condition

Question

I'm new to MVC, kindly guide me. I need to change the text color of webgrid row based on conditions. As stated I'm new to MVC so I'm not sure where to start and handle this.

Below is the View

@model  IEnumerable<GridViewMVC.Models.Employee>

@{
ViewBag.Title = "Home Page";
WebGrid grid = new WebGrid(Model);
}


<div>
@grid.GetHtml(
    tableStyle:"GridTable",
    headerStyle :"GridHeader",
    footerStyle :"GridFooter",
    alternatingRowStyle :"GridAlterRow",
    rowStyle:"gridRow",        

    columns:grid.Columns(
    grid.Column("Id","Emp Id"),
    grid.Column("Name","Name"),
    grid.Column("Age","Age"),
    grid.Column("Designation","Title"),
    grid.Column("Gender","Gender")
))

</div>

in model the properties are declared. And in controller I am passing the Employee List object to view

output comes in this way

Emp Id   Name           Age   Designation   Gender
1        Anurag         24    SE             Male
2        Mike           31    Lead           Male
3        George         41    GPM            Male

Now I want to highlight the background color of Age as per this condition. If age is in between 20 to 30, the background color should be Green. If age is in between 30 to 40, the background color should be Yellow. If age is in between 40 above, the background color of that cell should be Red.

Florian Schmidinger · Accepted Answer · 2014-11-18 18:05:02Z

7

Try to put this right under your @grid.Html()

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $('tr').each(function (index) { //iterate over all table rows
        if (index > 0) {     //skip header
            if ($(this).children('td:nth-child(3)').text() < 31)  //look for the 3rd td in each row. thats where your age is.
            {
                $(this).children('td:nth-child(3)').css("background-color","green");
            }
            else if ($(this).children('td:nth-child(3)').text() < 41)
            {
                $(this).children('td:nth-child(3)').css("background-color", "yellow");
            }
            else 
            {
                $(this).children('td:nth-child(3)').css("background-color", "red");
            }
        }
    });
</script>

since the webgrid produces nothing more than a html-table

edited Nov 18, 2014 at 18:05

answered Nov 18, 2014 at 16:30

Florian Schmidinger

4,6822 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3559349 Over a year ago

Or better $('tbody tr') (so header and footer not included) and var cell = $(this).children('td:nth-child(3)'); if(cell.text() < 31) {cell.css(...)} else if (.... (cache the element for better performance)

Lord-David Over a year ago

Thanx for the answer. I'm wondering if there is way to manipulate the webgrid without using JavaScript or JQuery. Can I access the webgrid from the controller and manipulate it from there?

Florian Schmidinger Over a year ago

Of course this is the quick n dirty way... i'm pretty sure you can try to code it in a column format... see this article msdn.microsoft.com/en-gb/magazine/hh288075.aspx

Collectives™ on Stack Overflow

How to change the colour of an MVC webgrid row text depending on some condition

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related