Geek asks and answers

MVC: How can I change the color of an Html.Grid row based on a value?

I was wondering how to change the color of a row in Html.Grid if the "Completed" boolean property is true. Here is a grid example:

@Html.Grid(Model.ExampleList).Columns(c =>
        {
            c.For(a => string.Format("{0:dd/MM/yyyy}", a.DateRequested)).Named("Date Requested");
            c.For(a => a.Comment).Named("Comment");
            c.For(a => a.Completed).Named("Completed");
        })

Any help would be greatly appreciated.

Thank.

+3
source share
2 answers

I assume that you are referring to a background color change of a given row in the grid based on a given value of a model property. If so, you can use the method RowAttributes:

@Html.Grid(Model.ExampleList)
     .RowAttributes(row => new Hash(@class => row.Item.IsFoo ? "redclass" : "normalclass"))
     .Columns(c =>
     {
         ...        
     })
+5
source

Try the following example, assuming you have a property that you want to highlight, for example:

public bool IsImportant { get; set; }

Go to your view using the grid, and then add this to the end:

@Html.Grid(Model).Columns(columns =>
           {

//all your coloumn stuff

           }).WithPaging(10).SetRowCssClasses(item => item.IsImportant ? "important" : string.Empty)

, - :

tr.important {
    background-color:rgba(205, 92, 92, 0.5) !important;   //indian red with opacity set to 50%
}

, !important .

, , .RowAttributes

+1

More articles:


All Articles