Nested WebGrid expand collapse not working in ASP.Net MVC

Hi,

I have successfully implemented Parent/Child grid in mvc, using below url

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

but I am unable to get UI properly (just getting 2 grids one below the other, like parent child). Bydefault child has to be Collapse mode, if we click on + image, child grid have to open. Can somebody go through my MVC controller and view code and help where I am doing mistake (may be list of mistakes).

public class EnquiryDetailsController : Controller
    {

        #region Global Variable Declaration

        ResponseBO ObjResponseBO = new ResponseBO();
        HttpResponseMessage response;
        private string _ServiceURL_Parent_Get = ServiceMethods.ReadServiceMethod(ServiceMethods.AdminSeviceMethods.Admin_ParentEnquiry_Get);
        private string _ServiceURL_Child_Get = ServiceMethods.ReadServiceMethod(ServiceMethods.AdminSeviceMethods.Admin_ChildEnquiry_Get);

        #endregion

        // GET: Enquiry/EnquiryDetails
        public ActionResult Index()
        {
            return View();
        }

        [Route("~/EnquiryDetails/Index")]
        [Authentication]
        public ActionResult EnquiryDetails()
        {
            //All Enquiry Details
            List<EnquiryAllModelBO> objEnEnquiryAllModelBOList = new List<EnquiryAllModelBO>(); ;
            EnquiryAllModelBO objEnquiryAllModelBO = null;

            List<ParentEnquiryModelBO> objParentEnquiryModelBOList = GetParentEnquiryDetails();

            for (int i = 0; i < objParentEnquiryModelBOList.Count; i++)
            {
                objEnquiryAllModelBO=new EnquiryAllModelBO();
                objEnquiryAllModelBO.ParentEnquiryList = objParentEnquiryModelBOList[i];
                objEnquiryAllModelBO.ChildEnquiryList = GetChildEnquiryDetails(objParentEnquiryModelBOList[i].ProductEnquiryID);
                objEnEnquiryAllModelBOList.Add(objEnquiryAllModelBO);
            }            
            return View(objEnEnquiryAllModelBOList);

        }


        private List<ParentEnquiryModelBO> GetParentEnquiryDetails()
        {
            List<ParentEnquiryModelBO> objParentEnquiryModelBOList = new List<ParentEnquiryModelBO>();

            string stringData = string.Empty;
            //ViewBag.UserName = _Username;
            using (var client = new HttpClient())
            {
                //Calling WebAPI, later need to read from Web.Config
                //response = client.GetAsync("http://localhost:64297/Admin/Enquiry/GetParentEnquiry/").Result;
                response = client.GetAsync(_ServiceURL_Parent_Get).Result;

                if (response.IsSuccessStatusCode)
                {
                    stringData = response.Content.ReadAsStringAsync().Result;

                    objParentEnquiryModelBOList = JsonConvert.DeserializeObject<List<ParentEnquiryModelBO>>(stringData);

                }
                else //web api sent error response 
                {
                    //log response status here..                
                    ModelState.AddModelError(string.Empty, "Server error. Please contact administrator.");
                }
            }

            return objParentEnquiryModelBOList;
        }

        private List<ChildEnquiryModelBO> GetChildEnquiryDetails(int ProductEnquiryID)
        {
            List<ChildEnquiryModelBO> objChildEnquiryModelBOList = new List<ChildEnquiryModelBO>();

            string stringData = string.Empty;
            //ViewBag.UserName = _Username;
            using (var client = new HttpClient())
            {
                //Calling WebAPI, later need to read from Web.Config
                //response = client.GetAsync("http://localhost:64297/Admin/Enquiry/GetChildEnquiry/"+ ProductEnquiryID).Result;
                response = client.GetAsync(_ServiceURL_Child_Get + ProductEnquiryID).Result;

                if (response.IsSuccessStatusCode)
                {
                    stringData = response.Content.ReadAsStringAsync().Result;

                    objChildEnquiryModelBOList = JsonConvert.DeserializeObject<List<ChildEnquiryModelBO>>(stringData);

                }
                else //web api sent error response 
                {
                    //log response status here..                
                    ModelState.AddModelError(string.Empty, "Server error. Please contact administrator.");
                }
            }

            return objChildEnquiryModelBOList;
        }




    }

@model  IEnumerable<Dell.GDO.Lite.BusinessObjects.Admin.Enquiry.EnquiryAllModelBO>


@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    string status = "";
    string CSSType = "";
}

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

<!DOCTYPE html>


<style>
    /*Here I will write some css for looks good*/

    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("ParentEnquiryList.ProductEnquiryID", "ProductEnquiryID"),
            grid.Column(header: "Enquiry Date", format: (item) => string.Format("{0:dd-MM-yyyy}", item.ParentEnquiryList.EnquiryDate)),
            grid.Column("ParentEnquiryList.CustomerName", "Customer Name"),
            grid.Column("ParentEnquiryList.Email", "Email"),
            grid.Column("ParentEnquiryList.PhoneNumber", "PhoneNumber"),

            grid.Column(format: (item) =>
            {
                WebGrid subGrid = new WebGrid(source: item.ChildEnquiryList);
                return subGrid.GetHtml(
                    htmlAttributes: new { id = "subT" },
                    columns: subGrid.Columns(
                            subGrid.Column("ProductLineID", "ProductLineID"),
                            subGrid.Column("ProductLineID", "ProductLineID"),
                            subGrid.Column("InventoryConfigID", "InventoryConfigID"),
                            subGrid.Column("Qty", "Qty")
                        )
                    );
            })
        )
    )
</div>

@* Here I will add some jquery code for make this nested grid collapsible *@

@section Scripts{
    <script>
        $(document).ready(function () {
            alert("onload");
            debugger;
            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>
}