How to set webgrid inline row style

Question

I use WebGrid to display a list of elements, some elements in the list are disabled, so I would like to make it darkened in the grid, to do this, I have to set the row class will be darkened, if the element is disabled, I don’t know how to set the row class to according to the 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>) )); } 

Answer 1

I found a solution to this problem using jQuery, I added a CSS class attribute for the internal HTML grid column. This is the previous code with the attribute added

---

  @{ 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 a 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 the "temp" class to the delete link, and also adding the "remove" attribute has a 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 deleted, the line is displayed as darkened.

Answer 2

I will disable the link defined as a column in WebGrid, and this should work for you too. I set the color to gray and onclick will return false when the condition is disabled. Otherwise, the color is black, and onclick returns true as follows:

 @{ 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> 

Hope this helps!