How to set webgrid row style inline

Question

I am using a WebGrid to display a List of Items, some items in the list are disabled, so I would like to make it dimmed in the grid, to do that I must set the row class to be dimmed if the item is disabled, I do not know how to set the row class according to a condition

This is my sample code

  var grid = new WebGrid(Model, canPage: true, rowsPerPage: 20);
                @grid.GetHtml(tableStyle: "grid",
                                rowStyle: "gridrow",
                                alternatingRowStyle: "gridrow_alternate",
                                mode: WebGridPagerModes.All,
                                numericLinksCount: 10,
                                columns: grid.Columns(
                                    grid.Column("Name", "Name", item => (item.LocationData[0].Name), canSort: true, style: "width:60%"),
                                    grid.Column("Url", "Url", canSort: true, style: "width:60%"),
                                    grid.Column("Edit", "", @<a href='../VenHome/Edit/@item.ID' ><img src='/content/icons/edit.png'
                                        alt='Edit' />
                                    </a>, style: "width:150px"),
                                    grid.Column("Delete", "", @<a href='#' id='Delete' itemId='@item.ID' title='@item.LocationData[0].Name'><img
                                        src='/content/icons/delete.png' alt='Delete' />
                                    </a>, style: "width:150px"),
                                    grid.Column("Details", "", @<a href="../VenHome/Details/@item.Id" title="Details">
                                        <img src="../../Content/Icons/Details.png" alt="Details" /></a>)
                                    ));

            }

Solution 1

I found a solution for this problem using JQuery, I added a CSS class attribute for a grid column inner HTML This is the previous Code with added attribute

---

 @{
        var grid = new WebGrid(Model, canPage: true, rowsPerPage: 20);
                @grid.GetHtml(tableStyle: "grid",
                                rowStyle: "gridrow",
                                alternatingRowStyle: "gridrow_alternate",
                                mode: WebGridPagerModes.All,
                                numericLinksCount: 10,
                                columns: grid.Columns(
                                    grid.Column("Name", "Name", item => (item.LocationData[0].Name), canSort: true, style: "width:60%"),
                                    grid.Column("Url", "Url", canSort: false, style: "width:60%"),
                                    grid.Column("Edit", "", @<a href='../VenHome/Edit/@item.ID' ><img src='/content/icons/edit.png' alt='Edit' /></a>, style: "width:150px"),
                                    grid.Column("Delete", "", @<a href='#' id='Delete' class="temp" removed="@item.Removed" itemId='@item.ID' title='@item.LocationData[0].Name'><img src='/content/icons/delete.png' alt='Delete'  /></a>, style: "width:150px"),
                                    grid.Column("Details", "", @<a href="../VenHome/Details/@item.Id" title="Details">
                                        <img src="../../Content/Icons/Details.png" alt="Details" /></a>)
                                    ));

            }

---

This is the code modified

  grid.Column("Delete", "", @<a href='#' id='Delete' class="temp" removed="@item.Removed" itemId='@item.ID' title='@item.LocationData[0].Name'><img src='/content/icons/delete.png' alt='Delete'  /></a>, style: "width:150px"),

I added a class "temp" to the delete link and also add an attribute "removed" has the condition value, and I added the following JQuery code

 $(".temp").each(function (index, element) {
            if (($(element).attr("removed")) == "False") {
                $(element).parent().parent().attr("class", "deleted");

                $(element).find("img").attr("src", "../../content/icons/deleted.png");
            }
        });

Note: if the item is removed then displays the row as dimmed

Solution 2

I am disabling a link defined as a column in a WebGrid and this should work for you as well. I set the color to grey and the onclick to return false when the condition is disabled. Otherwise color is black and onclick returns true like this:

@{
    bool enableLink = false;
    var link = "false";
    var color = "grey";
    if (enableLink) { link="true"; color="black"; }         
}

            <div>@grid.GetHtml( tableStyle: "grid",
              headerStyle: "head",
              alternatingRowStyle: "alt",
              columns: grid.Columns(                
              grid.Column(format: @<a href="http://www.whereverYouLinkTo.com" style="color:@color" onclick="return @link">Edit</a>), 
              grid.Column("FirstName", header:"First"),
              grid.Column("LastName", header:"Last")))

</div>

I hope this helps!