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.
I used followings:
- .Net framework 4.0
- Entity Framework
- Sql Server 2008
The following scenario is used in this example:
- Created a ViewModel for stored Order & Order Items in a single entity.
- Fetch data from database and stored in the ViewModel
- Added a nested webgrid in the view (webgrid inside another webgrid)
- Added Some css code for looks webgrid better.
- 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.