Tukukkk

Im trying to show order with certain date range, so i create webgrid to show Orders and when user push the expand button the subgrid for the detail order is show up, but it always show like this :

The last column not removed so my detail items are always shown up and the expand and collapse image not show up in the first column (so it cannot be expaned or collapsed)

My references are:

http://www.dotnetawesome.com/2014/07/nested-webgrid-with-expand-collapse-in-aspnet-mvc4.html

This is my code :
View:

@model Master.Models.Orders

@{

    ViewBag.Title = "Orders";

}



@{



<style type="text/css">

    th, td {

        padding: 5px;

    }



    th {

        background-color: rgb(248, 248, 248);

    }



    #gridT, #gridT tr {

        border: 1px solid #0D857B;

    }



    #subT, #subT tr {

        border: 1px solid #f3f3f3;

    }



    #subT {

        margin: 0px 0px 0px 10px;

        padding: 5px;

        width: 95%;

    }



        #subT th {

            font-size: 12px;

        }



    .hoverEff {

        cursor: pointer;

    }



        .hoverEff:hover {

            background-color: rgb(248, 242, 242);

        }



    .expand {

        background-image: url(/Images/plus.png);

        background-position-x: -22px;

        background-repeat: no-repeat;

    }



    .collapse1 {

        background-image: url(/Images/plus.png);

        background-position-x: -2px;

        background-repeat: no-repeat;

    }

</style>

}







@section Scripts {





<script type="text/javascript">

    $(document).ready(function () {

        $('input[type=datetime]').datepicker({

            dateFormat: "dd/M/yy",

            changeMonth: true,

            changeYear: true,

            yearRange: "-5:+5"

        });



    });



    $(document).ready(function () {

        var size = $("#main #gridT > thead > tr >th").size(); // get total column

        $("#main #gridT > thead > tr >th").last().remove(); // remove last column

        $("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column

        $("#main #gridT > 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

            $(".hoverEff", this).on("click", function () {

                $(this).parent().closest("tr").next().slideToggle(100);

                $(this).toggleClass("expand collapse1");

            });

        });



        //by default make all subgrid in collapse mode

        $("#main #gridT > tbody > tr td.expand").each(function (i, el) {

            $(this).toggleClass("expand collapse1");

            $(this).parent().closest("tr").next().slideToggle(100);

        });



    });

</script>



}





<div class="col-md-12 col-sm-12" style="background-color:whitesmoke; margin-top:10px; margin-bottom:10px;">

    <div class="col-md-1 col-sm-1"><h5>Period</h5></div>

    <div class="row">

        @using (Html.BeginForm("CustomersOrders", "Master"))

        {

            <div class="form-group row">



                <div class="col-md-3">

                    @Html.EditorFor(m => m.FirstDate, new { htmlAttributes = new { @class = "form-control", @readonly = "true" } })

                </div>



                <div class="col-md-3">

                    @Html.EditorFor(m => m.LastDate, new { htmlAttributes = new { @class = "form-control", @readonly = "true" } })

                </div>





            </div>





            <div class="form-group">

                <div class="col-md-offset-2 col-md-3">

                    <input type="submit" value="Show" class="btn btn-success" />

                </div>

            </div>

        }

    </div>







</div>

<div id="main" @*class="col-md-12 col-sm-12 tabel row"*@ style="padding:25px; background-color:white;">

    @{

        WebGrid grid = new WebGrid(Model.listData);

        @grid.GetHtml(

       htmlAttributes: new { id = "gridT" },

    tableStyle: "table table-bordered table-responsive",

     //fillEmptyRows: false,

     //headerStyle: "gvHeading",

     //alternatingRowStyle: "gvAlternateRow",

     //rowStyle: "gvRow",

     //footerStyle: "gvFooter",





     //mode: WebGridPagerModes.All,

     //firstText: "<< First",

     //previousText: "< Prev",

     //nextText: "Next >",

     //lastText: "Last >>",

     columns: grid.Columns (

         grid.Column("list.Code", header:"Code"),

         grid.Column("list.TotalValue", header:"Total"),

         grid.Column("list.Customers", header:"Customer"),



         grid.Column(format:(item)=>{

             WebGrid subGrid = new WebGrid(source: item.ListDetail);

             return subGrid.GetHtml(

                 htmlAttributes: new { id="subT" },

                 columns:subGrid.Columns(

                          subGrid.Column("Detail", header:"Detail"),

                          subGrid.Column("Item", header:"Item"),

                          subGrid.Column("Qty", header:"Qty"),

                          subGrid.Column("Value", header:"Value")

                     )

                 );

         })





            )

        )

    }

</div>

My layout :

    <!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - Produksi</title>

    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <script src="~/Scripts/modernizr-2.8.3.js"></script>

</head>

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                @Html.ActionLink("Transaction", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

            </div>

            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">

                    <li><a href="~/master/CustomersOrders">Orders</a></li></li>

                </ul>

                <ul class="nav navbar-nav navbar-right">

                    <li style="margin-top:2px; margin-right:2px; text-align:right;">

                        <p><b>@Session["UserCode"]</b></p>

                        <a href="@Url.Action("Index", "Home")" class="btn btn-link" style="margin-top:-25px;">Logout</a>

                    </li>

                </ul>

            </div>

        </div>

    </div>



    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>



        </footer>

    </div>



    <script src="~/Scripts/jquery-3.3.1.min.js"></script>

    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>





    <link href="../../Content/themes/base/datepicker.css" rel="stylesheet"

          type="text/css" />

    <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet"

          type="text/css" />



    @RenderSection("scripts", required: false)

</body>

</html>

I don't know why but when i downgrade the version jquery.js file from 3.3.1 to 1.7.1, it's worked, so I think i'll stick up with 1.7.1 for a while