嵌套的WebGrid，MVC5

Question

Good day, I'm working with MVC 5, trying to create a nested WebGrid , following the tutorial did not work ( http://dotnetawesome.com/mvc/Nested-WebGrid-With-Expand-Collapse-in-MVC4 ) I managed to "update" the jquery code , however when I click on a row , it does not expand , it vanishes . Follow my code:

Controller : Just select on a table and return shipping to the view.

VIEW: Jquery:

$(document).ready(function () {
        var size = $("#DivGrid #result > thead > tr >th").size(); // get total column
        $("#DivGrid #result > thead > tr >th").last().remove(); // remove last column
        $("#DivGrid #result > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
        $("#DivGrid #result > tbody > tr").each(function (i, el) {
            $(this).prepend(
                    $("<td></td>")
                    .addClass("expand")
                    .addClass("hoverEff")
                    .attr('title',"click for show/hide")
                );

            //Now get sub table from last column and add this to the next new added row
            var table = $("table", this).parent().html();
            //add new row with this subtable
            $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
            $("table", this).parent().remove();
            // ADD CLICK EVENT FOR MAKE COLLAPSIBLE
            $("#DivGrid").on("click", "#result tbody tr", function () {
                console.log("HOVEREFF");
                $(this).parent().closest("tr").next().slideToggle(100);
                $(this).toggleClass("expand collapse");
            });
        });

        //by default make all subgrid in collapse mode
        $("#DivGrid #result > tbody > tr td.expand").each(function (i, el) {
            $(this).toggleClass("expand collapse");
            $(this).parent().closest("tr").next().slideToggle(100);
        });


HTML

 <div id="WebGrid">
            @{
                WebGrid grid = new WebGrid(Model, rowsPerPage: 100, ajaxUpdateContainerId: "result");
            }
            <div id="HeadTabela">
                <table class="tHead">
                    <tr>
                        <td class="Col2P">
                            <label>COD UNIDADE</label>
                        </td>
                        <td class="Col2P">
                            <label>COD GRUPO</label>
                        </td>
                        <td class="Col6P">
                            <label>DES GRUPO</label>
                        </td>
                        <td class="Col2P">
                            <label>ATIVO</label>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="DivGrid">
                @grid.GetHtml(
                        htmlAttributes: new { id = "result" },
                        tableStyle: "grid",
                        headerStyle: "head",
                        alternatingRowStyle: "alt",
                    columns: new[] {
                            grid.Column("DESCRIÇÃO GRUPO", canSort: false, format:
                            @<text>  <span>
                                         <label id="lblCodigo">@item.DES_ASSUNTO</label>
                                         <label id="lblGrupo">@item.COD_USUARIO_REMETENTE</label>
                                    <label id="lblDesGrupo">@item.COD_USUARIO_DESTINATARIO</label>
                                </span></text>, style: "Col6P"),
                            grid.Column(format:(a)=>{
                            WebGrid subGrid = new WebGrid(source: Model);
                            return subGrid.GetHtml(
                                htmlAttributes: new { id="subT" },
                                columns:subGrid.Columns(
                                        subGrid.Column("DESCRIÇÃO GRUPO", canSort: false, format:
                            @<text>  <span>
                                    <label id="lblDesGrupo">@a.DES_MENSAGEM</label>
                                </span></text>, style: "Col6P")
                                    )                    
                                );
                        })}
                    )
            </div>
        </div>

Answer 1

// ADD CLICK EVENT FOR MAKE COLLAPSIBLE
            $("#DivGrid").on("click", "#result tbody tr", function () {
                console.log("HOVEREFF");
                $(this).parent().closest("tr").next().slideToggle(100);

                $(this).toggleClass("expand collapse"); // Change name of style class "collapse", its being used by default css file.
            });
        });

        //by default make all subgrid in collapse mode
        $("#DivGrid #result > tbody > tr td.expand").each(function (i, el) {
            //$(this).toggleClass("expand collapse"); // Change name of style class "collapse", its being used by default css file.
            $(this).parent().closest("tr").next().slideToggle(100);
        });



Change name of style class "collapse", its being used by default css file.

Regards, Naveed.

Answer 2

Hi are you sure that the subGrid have data? you are using the same Model for the main grid and subgrid. That seems a little odd to me. Please post the rendered HTML that you have as result, to see if I can help you to find the error.