I have a sub Webgrid nested inside another webgrid that displays users per record...
<div id="grid">
@grid.GetHtml(
tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
columns: grid.Columns( grid.Column("BlogBlogId", "BlogId ",style: "BlogBlogId"),
grid.Column("Domain", "Domain",style: "Domain"),
grid.Column("Path", "Path",style: "Path"),
grid.Column("BlogUsers", "Blog Users", style: "BlogUsers", format : (item) =>
{
string temp = "<div style='text-align:left;height:100%;" + "width: 100%; overflow: auto; overflow-x:hidden;'>";
var sub = new WebGrid(item.BlogUsers,
canPage: false,
ajaxUpdateContainerId: "sub",
ajaxUpdateCallback: "jQueryTableStyling",
defaultSort: "BlogBlogId",
rowsPerPage: 100);
temp += sub.GetHtml(htmlAttributes: new { id = "tblsubWebGrid" },
columns:sub.Columns(
sub.Column("UserLogon", "Logon"),
sub.Column("Adstatus", "AdStatus")
)
);
temp += "</div>";
return new HtmlString(temp);
}),
grid.Column("Archived", "Archived",style: "Archived"),
grid.Column("Deleted", "Deleted",style: "Deleted"),
grid.Column("Allusersvalid", "All Users Valid?",style: "User IP")
)
)
</div>
A change in text color is applied based on the status of the user...
<script>
function styleGrid() {
$("#tblsubWebGrid tr:not(:first)").each(function () {
var aptStatus = $(this).find("td:nth-child(2)").html();
if (aptStatus == 'User Exists') {
$(this).find("td:nth-child(2)").addClass("clsGreen");
} else {
$(this).find("td:nth-child(2)").addClass("clsRed");
}
});
}
$(document).ready(function() {
styleGrid();
});
</script>
ISSUE: The classes are only being applied to the first grid record with sub webgrid....
Query... 1. Is my issue due to multiple instances of table id="tblsubWebGrid"? 2. Does my jQuery script need to be modified so that it applies to all instances of these sub webgrids?