How to Create Nested WebGrid with Expand/Collapse in ASP.NET MVC4

Expandable tables or sometime called nested table are a common requirement in situations where you have related entities like Sales order with Order Item Details. Here in this example I am going to explain How to Create Nested WebGrid with Expand/Collapse in ASP.NET MVC4 . 
Here In this example, I have shown Sales Order List in a Expandable table where Sales summary Record shown in the master table and sales item details shown in details(sub) table. 

Prerequisite

I used followings:
  1.   .Net framework 4.0
  2.   Entity Framework
  3.   Jquery
  4.   Sql Server 2008

The following scenario is used in this example:

  1.  Created a ViewModel for stored Order & Order Items in a single entity.
  2.  Fetch data from database and stored in the ViewModel
  3.  Added a nested webgrid in the view (webgrid inside another webgrid)  
  4.  Added Some css code for looks webgrid better.
  5.  Added some Jquery code for Make Nested webgrid collapsible
             5.1. An additional column is added to the Master Webgrid, containing the expand/collapse buttons that enable the user to expand the selected table row
     5.2. Get sub webgrid html from the each row and added a new row with the sub webgrid html just after the current row.
             5.3. Add click event to the expand/collapse buttons for make the webgrid collapsible.

Orders
Order ID Order Date Customer Name Address
4 20-07-2014 Jonny Dev 34, H.T. Street, WS
Product Quantity Rate Amount
Rebook T-Shirt 2 1000.00 2000.00
Shirt 2 1500.00 3000.00
San Glass S1234567 1 2000.00 2000.00
Casic Watch 1 1421.00 1421.00
3 25-10-2013 Tony Decosta 17 V.A.N, Canada
Product Quantity Rate Amount
4Gb Ram - E1102032 2 2500.00 5000.00
1TB Hard-disk Sanddisk 1 2458.00 2458.00
2 24-10-2013 Ronny Decosta 1/A S.N. Road, CA
Product Quantity Rate Amount
Motorola e-2210 1 5000.00 5000.00
B. Handset 2 711.50 1423.00
1 12-09-2013 Sourav Mondal Kolkata - 700056, WB
Product Quantity Rate Amount
ASP.NET Ebook 1 2000.00 2000.00
SQL Server 2012 v.1.0 1 3000.00 3000.00
Telerik Ajax Webform 1 423.00 423.00
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>


Posted By :
How to Create Nested WebGrid with Expand/Collapse in ASP.NET MVC4