How to handle embedded webgrid styling

Question

I've got a sub Webgrid inside a webgrid that returns 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>

I apply a text color change dependent upon 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>

PROBLEM: The classes are only applied to the first grid record with sub webgrid....

enter image description here

Question... 1. Is my problem because multiple instance of table id="tblsubWebGrid"? 2. Does my jquery script need to change so that it applies to all instances of these sub webgrids?

score 0 · Answer 1 · answered Jun 30 '14 at 17:55

UPDATE: Changed my Jquery a little bit, removed the ":not(:first)" from after the "tblsubWebGrid tr" and it started appending the CSS class references for me..

<script>
    function styleGrid() {
        $("#tblsubWebGrid tr").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>

How to handle embedded webgrid styling

1 Answers1