InLine Edit with nested Grid in MVC4

InLine Edit with nested Grid in MVC4

@model IEnumerable<NestedGridMVC4.ViewModel.RequestVM>

@{
    ViewBag.Title = "Request List";
    WebGrid grid = new WebGrid(source: Model, canSort: false);
}

<h2>List</h2>

<style>
    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/pm.png);
        background-position-x: -22px;
        background-repeat: no-repeat;
    }

    .collapse {
        background-image: url(/Images/pm.png);
        background-position-x: -2px;
        background-repeat: no-repeat;
    }
</style>



<div id="main" style="padding:25px; background-color:white;">
    @grid.GetHtml(

                htmlAttributes: new { id = "gridT", width = "700px" },
                columns: grid.Columns(
                         grid.Column("request.RequestId", "Request Id"),
                         grid.Column("request.Status", "Status"),
                         grid.Column("request.Priority", "Priority"),
                         grid.Column(header: "Created Date", format: (item) => string.Format("{0:dd-MM-yyyy}", item.request.CreatedDate)),
                         grid.Column("request.Requestor", "Requestor"),
                         grid.Column("request.Name", "Name"),
                         grid.Column("request.Description", "Description"),

                        grid.Column(format: (items) =>
                        {
                            WebGrid subGrid = new WebGrid(source: items.tickets);
                            return subGrid.GetHtml(
                                htmlAttributes: new { id = "subT" },
                                columns: subGrid.Columns(
                                //  subGrid.Column("TicketNo", "TicketNo"),

                                        subGrid.Column("TicketNo", "TicketNo", format: @<text>  <span class="display-mode"> @Html.ActionLink("test", "test") <label id="lblTicketNo">@item.TicketNo</label> </span> <input type="text" id="TicketNo" value="@item.TicketNo" class="edit-mode" /></text>, style: "col2Width"),
                                        subGrid.Column("GroupId", "GroupId", format: @<text>  <span class="display-mode"> <label id="lblGroupId">@item.GroupId</label> </span> <input type="text" id="GroupId" value="@item.GroupId" class="edit-mode" /></text>, style: "col2Width"),
                                        subGrid.Column("TicketStatus", "TicketStatus", format: @<text>  <span class="display-mode"> <label id="lblTicketStatus">@item.TicketStatus</label> </span> <input type="text" id="TicketStatus" value="@item.TicketStatus" class="edit-mode" /></text>, style: "col2Width"),
                                        subGrid.Column("LInkType", "LInkType", format: @<text>  <span class="display-mode"> <label id="lblLInkType">@item.LInkType</label> </span> <input type="text" id="LInkType" value="@item.LInkType" class="edit-mode" /></text>, style: "col2Width"),

                                    //    subGrid.Column("GroupId", "GroupId"),
                                       // subGrid.Column("TicketStatus", "TicketStatus"),
                                      //  subGrid.Column("LInkType", "LInkType"),
                                         subGrid.Column("Action", format: @<text>
                                        <button class="edit-user display-mode">Edit</button>
                                        <button class="save-user edit-mode">Save</button>
                                        <button class="cancel-user edit-mode">Cancel</button>
                                        </text>, style: "col3Width", canSort: false)
                                    )
                                );
                        })
                                    )
                                )
</div>

@section Scripts{
    <script>
        $(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).live("click", function () {
                    $(this).parent().closest("tr").next().slideToggle(100);
                    $(this).toggleClass("expand collapse");
                });
            });

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

        });
    </script>

    <script type="text/javascript">
        $(function () {
            $('.edit-mode').hide();
            $('.edit-user, .cancel-user').on('click', function () {
                var tr = $(this).parents('tr:first');
                tr.find('.edit-mode, .display-mode').toggle();
            });

            $('.save-user').on('click', function () {
                var tr = $(this).parents('tr:first');
                var TicketNo = tr.find("#TicketNo").val();
                var GroupId = tr.find("#GroupId").val();
                var TicketStatus = tr.find("#TicketStatus").val();
                var LInkType = tr.find("#LInkType").val();

                tr.find("#lblTicketNo").text(TicketNo);
                tr.find("#lblGroupId").text(GroupId);
                tr.find("#lblTicketStatus").text(TicketStatus);
                tr.find("#lblLInkType").text(LInkType);
                tr.find('.edit-mode, .display-mode').toggle();
                var Ticket =
                {
                    "TicketNo": TicketNo,
                    "GroupId": GroupId,
                    "TicketStatus": TicketStatus,
                    "LInkType": LInkType
                };
                $.ajax({
                    url: '/Request/UpdateTicket/',
                    data: JSON.stringify(Ticket),
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        alert(data);
                    },
                    error: function() {
                    alert('Error occured during save.');
                });

            });
        })
    </script>
}