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.

Golda · Accepted Answer · 2016-03-21 07:33:08Z

1

Hope the following answer will help you

    grid.GetHtml(columns: grid.Columns(grid.Column(columnName: "DATT", header: "Date",format: @<text> @{
        if (@item.isCurrentlyBackordered)
            {                                                                                                             
            <span>Item Backordered</span>                                                                                                          
            <script>
            $("tr:contains('Item Backordered')").css("background-color", "yellow");
            </script>
            }
          }</text>)))

Also you can write this in a common JQuery too

 grid.Column("DATT", header: "Date", format: (item) => new MvcHtmlString
                   (
                           (item.isCurrentlyBackordered)
                           ?
                                   "<span>Item Backordered</span>" 
                           :
                           ""
                   )),

JQuery

<script type="text/javascript">
    $(function () {
        $("tr:contains('Item Backordered')").css("background-color", "yellow");
    })
</script>

answered Mar 21, 2016 at 7:33

Golda

3,89110 gold badges39 silver badges67 bronze badges

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

1 Comment

eaglei22 Over a year ago

Thanks for your help. I was able to come up with a solution looking at your example and with the help of another resource I found. Thanks!

eaglei22 · Accepted Answer · 2016-03-22 19:57:36Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related