Change WebGrid row color conditionally without Jquery/javascript ASP.NET MVC 4

Question

I know this has been asked before but I wanted to ask it in my own way with more clarification. I am trying to conditionally set the background of a td that is created using a webGrid in ASP.NET MVC. I don't see a good way to do this.

So far what I have come up with is this:

 grid.Column("DATT", header: "Date", format: (item) => new MvcHtmlString
                   (
                           (item.isCurrentlyBackordered)
                           ?
                                   "<div style=\"background-color: red\">Item Backordered</div>" 
                           :
                           ""
                   )),

This is an okay solution but I would like a more clean look because the webgrid default has a small padding in the table cell so the div won't expand completely to the size of the cell either.

Is there a way to edit the td in any way? I know I can change the background and other style attributes using jquery or javascript but I don't like the idea of having doing duplicate work to first build the table on the server, then on the client side iterate over it again conditionally changing the colors when this should have been completed with the first iteration.

Answer 1

With the help of Golda's response and here I was able to create an elegant solution. This solution uses JavaScript/JQuery, as it doesn't seem possible to do it without it but using (to me) a cleaner solution than what I had came across. What I did in the model class (type for List<>()) was add a property that refers to itself and returns an instance cast to its interface like so:

    public iTrans This
    {
        get
        {
            return this;
        }
    }

I did this because the webGrid seems to only allow access to the properties and not methods; regardless of access level.

Then in that same model I have a method which will conditionally attach markup for a hidden input field to the data string and return it as an MvcHtmlString object:

    public MvcHtmlString htmlColorWrapper(string cellStr, string hexColor = "#ccc")
    {
        if (isOnBackorder)
        {
            cellStr = cellStr + "<input type='hidden' class='color' value='" + hexColor + "'/>";
        }

        return new MvcHtmlString(cellStr);
    }

And in the markup (partial view) I make my grid.Column call:

grid.Column("Date", header: "Date", format: (item) => item.This.htmlColorWrapper(item.Date.ToString("MM/dd/yyy"))),

Then I create the JavaScript function(s):

 window.onload = function () {
     SetFeaturedRow();
 };

 function SetFeaturedRow() {
     $('.color').each(function (index, element) {
         $(element).parent().parent().css('background-color', $(element).val());
     });
 }

The window.onload is needed to point to the SetFeaturedRow() function to set the row colors at page load, the function name, "SetFeaturedRow" is stored in the ajaxUpdateCallback property through the webgrid constructor arguments: new WebGrid(Model ..... ajaxUpdateCallback: "SetFeaturedRow"); Or it can be set through the WebGrid reference, ref.ajaxUpdateCallback = "SetFeatureRow"

This will be used during any ajax call the WebGrid class will make. So for example if there are multiple pages to the webgrid each selection is an ajax call and the row colors will need to be re-updated.

Hopefully this helps someone.