how to conditionally color background of grid cell ?

Title:

BI{code} ?

I need to "conditionally" color the background of cells in the grid. For example here is my grid code: @(Html.Awe().Grid(gridId) .Mod(o => o.PageInfo().InfiniteScroll().PageSize().ColumnsSelector()) .Url(Url.Action("GetItems", "TestData")) .Height(700) .Groupable(false) .PageSize(50) .Columns( new Column { Bind = "id", Width = 75, Hidden = true }, new Column { Bind = "Status", CssClass="Conditional"}, new Column { Bind = "TestType" }, new Column { Bind = "Engineer" }, new Column { Bind = "Stall"}, new Column { Bind = "TestDate" }, new Column { Bind = "UnitSerial"}, new Column { Bind = "Comment1"})) For each value in the "Status" column, I would like the background of each cell to reflect that. So, a status cell value of "Good", I would like the background of the corresponding cell colored green. But if the cell value for status was "Bad", i would want it red. I know you can do conditional formatting for specific numbers and elements inside the cell, but how can I manipulate the entire background color? This example below found in help documents shows how to conditionally format the text, but how can I format the back color? new Column { Bind = "Price", ClientFormatFunc = "formatPrice", Width = 100 }, function formatPrice(lunch, prop) { var color = 'navy'; var price = lunch[prop]; if (price < 20) color = 'green'; if (price > 50) color = 'red'; return "<div style='color:" + color + ";text-width:bold;'>" + price + " &pound; </div>"; } Thanks!

Save Changes Cancel

eliawesome

asked at 05 Feb 2019

Answers

• BI{code} ?

  first you need to add a new model property for the css class: Map = o => new { ... RowClass = o.Status }; use the RowClass: Grid(gridId).RowClassClientFormat(".(RowClass)") and set a css class for the column: new Column { ... CssClass = "bgstatus" } add the css: .Good .bgstatus { background: green; }

  Save Changes Cancel

  

  Omu

  answered at 06 Feb 2019

  • That solution works great! Thank you so much.
    at 06 Feb 2019 eliawesome

please Sign In to leave an answer