Post
Ask Question

ASP.Net MVC 4: Showing DATA in Nested Grid View Using jQuery

Project

My Table
Figure 1: Project Table

The following  is the script of the table:

  1. CREATE TABLE [dbo].[Project](  
  2.     [ProjectID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [ProjectName] [varchar](50) NULL,  
  4.     [ProjectLeader] [varchar](50) NULL,  
  5.  CONSTRAINT [PK_Project] PRIMARY KEY CLUSTERED   
  6. (  
  7.     [ProjectID] ASC  
  8. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  9. ) ON [PRIMARY]  
  10.   
  11. GO  
  12. SET ANSI_PADDING OFF  
  13. GO  
And the second table is Employee:

table is Employee
Figure 2: Employee Table

The script of the Employee table is:
  1. CREATE TABLE [dbo].[Employee](  
  2.     [ID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Name] [varchar](50) NULL,  
  4.     [Email] [varchar](500) NULL,  
  5.     [Country] [varchar](50) NULL,  
  6.     [ProjectID] [int] NULL,  
  7.  CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED   
  8. (  
  9.     [ID] ASC  
  10. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  11. ) ON [PRIMARY]  
  12.   
  13. GO  
  14. SET ANSI_PADDING OFF  
  15. GO  
Now create a new Visual Studio Project.

new Visual Studio Project
Figure 3: Creating a new Visual Studio project

internet application
Figure 4: Visual Studio Project

Now right-click on the Project Solution Explorer and Add New ADO.NET Entity Data Model as in the following:

add project
Figure 5: Add New ADO.NET Entity Data Model

click next
Figure 6: Choose Model Contents

clock ok
Figure 7: Connection Properties

Employee project
Figure 8: Choose your Data Connection

finish
Figure 9: Choose Database objects and settings

design
Figure 10: Tables are created

Now see the data in the tables, Project and Employee:

see Data
Figure 11: Added some data

Employee Tables
Figure 12: Employee Table

Now right-click on the Model folder inside your project's Solution Explorer and Add New Item. Now add a new class and name it EmpProject.cs.

Class
Figure 13: New class created

Write the following code snippet.

code
Figure 14: Code written
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace ShowingNestedDataDisplayInMVC4.Models  
  7. {  
  8.     public class EmpProject  
  9.     {  
  10.         public Project project { get; set; }  
  11.         public List<Employee> projectEmployee { get; set; }  
  12.     }  
  13. }  
Now right-click on Controller and Add New Controller.

new controller
Figure 15: Add New Controller

project controller
Figure 16: Added Project Controller

Write the following code in the project's Controller:


Figure 17: Code added.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using ShowingNestedDataDisplayInMVC4.Models;  
  7.   
  8. namespace ShowingNestedDataDisplayInMVC4.Controllers  
  9. {  
  10.     public class ProjectController : Controller  
  11.     {  
  12.         //  
  13.         // GET: /Project/  
  14.         public ActionResult Index()  
  15.         {  
  16.             List<EmpProject> prjEMPReport = new List<EmpProject>();  
  17.   
  18.             // here MyDatabaseEntities is our data context  
  19.             using (EmployeeProjectEntities dc = new EmployeeProjectEntities())  
  20.             {  
  21.                 var prjRecords = dc.Project.OrderByDescending(a => a.ProjectID);  
  22.                 foreach (var i in prjRecords)  
  23.                 {  
  24.                     var empPrjDTL = dc.Employee.Where(a => a.ProjectID == (i.ProjectID)).ToList();  
  25.                     prjEMPReport.Add(new EmpProject { project = i, projectEmployee = empPrjDTL });  
  26.                 }  
  27.             }  
  28.             return View(prjEMPReport);  
  29.         }  
  30.     }  
  31. }  
Now right-click on the Index Action method and select Add View.

Add View
Figure 18: Add View

In Index.cshtm write the following code:
  1. @model IEnumerable<ShowingNestedDataDisplayInMVC4.Models.EmpProject>  
  2.   
  3. @{  
  4.     ViewBag.Title = "Displaying Data In Nested Grid View In MVC4";  
  5.     WebGrid grid = new WebGrid(source: Model, canSort: false);  
  6. }  
  7.   
  8. <style>  
  9.     #gridT, #gridT tr {  
  10.         border: 1px solid #0D857B;  
  11.     }  
  12.  
  13.     #nestedT, #nestedT tr {  
  14.         border: 1px solid #f3f3f3;  
  15.     }  
  16.  
  17.     #nestedT {  
  18.         margin: 0px 0px 0px 10px;  
  19.         padding: 5px;  
  20.         width: 95%;  
  21.     }  
  22.  
  23.         #nestedT th {  
  24.             font-size: 14px;  
  25.             font-weight: bold;  
  26.             background-color: green;  
  27.         }  
  28.   
  29.     .recordHoverEffect {  
  30.         cursor: pointer;  
  31.     }  
  32.   
  33.         .recordHoverEffect:hover {  
  34.             background-color: rgb(248, 242, 242);  
  35.         }  
  36.   
  37.     .expandRecordRecord {  
  38.         background-image: url(/Images/ShowHideImage.png);  
  39.         background-position-x: -22px;  
  40.         background-repeat: no-repeat;  
  41.     }  
  42.   
  43.     .collapseRecordRecord {  
  44.         background-image: url(/Images/ShowHideImage.png);  
  45.         background-position-x: -2px;  
  46.         background-repeat: no-repeat;  
  47.     }  
  48. </style>  
  49. @section Scripts{  
  50.     <script>  
  51.         $(document).ready(function () {  
  52.             var size = $("#main #gridT > thead > tr >th").size();  
  53.             $("#main #gridT > thead > tr >th").last().remove();  
  54.             $("#main #gridT > thead > tr").prepend("<th></th>");  
  55.             $("#main #gridT > tbody > tr").each(function (i, el) {  
  56.                 $(this).prepend(  
  57.                         $("<td></td>")  
  58.                         .addClass("expandRecord")  
  59.                         .addClass("recordHoverEffect")  
  60.                         .attr('title', "Show Hide Details")  
  61.                     );  
  62.   
  63.   
  64.                 var table = $("table", this).parent().html();  
  65.   
  66.                 $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");  
  67.                 $("table", this).parent().remove();  
  68.   
  69.                 $(".recordHoverEffect", this).live("click", function () {  
  70.                     $(this).parent().closest("tr").next().slideToggle(100);  
  71.                     $(this).toggleClass("expandRecord collapseRecord");  
  72.                 });  
  73.             });  
  74.   
  75.   
  76.             $("#main #gridT > tbody > tr td.expandRecord").each(function (i, el) {  
  77.                 $(this).toggleClass("expandRecord collapseRecord");  
  78.                 $(this).parent().closest("tr").next().slideToggle(100);  
  79.             });  
  80.   
  81.         });  
  82.     </script>  
  83. }  
  84. <div id="main" style="padding: 25px; background-color: yellow;">  
  85.     @grid.GetHtml(  
  86.                 htmlAttributes: new { id = "gridT", width = "900px", style = "background-color:skyblue; color:blue; font-size:14pt; font-family:TimesNewRoman;" },  
  87.                 columns: grid.Columns(  
  88.                         grid.Column("project.ProjectID", "Project ID"),  
  89.                         grid.Column("project.ProjectName", "Project Name"),  
  90.                         grid.Column("project.ProjectLeader", "Project Leader"),  
  91.   
  92.                         grid.Column(format: (item) =>  
  93.                         {  
  94.                             WebGrid subGrid = new WebGrid(source: item.projectEmployee);  
  95.                             return subGrid.GetHtml(  
  96.                                 htmlAttributes: new { id = "nestedT", style = "background-color:red; color:white; font-size:12pt; font-family:verdana;" },  
  97.                                 columns: subGrid.Columns(  
  98.                                         subGrid.Column("ID", " Employee ID"),  
  99.                                         subGrid.Column("Name", "Name"),  
  100.                                         subGrid.Column("Email", "Email"),  
  101.                                         subGrid.Column("Country", "Country")  
  102.                                     )  
  103.                                 );  
  104.                         })  
  105.                     )  
  106.                 )  
  107. </div>  
You can set your view as start up, for this open Route.config inside App_Start Folder and make the following settings:

setting
Figure 19: RouteConfig.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.Routing;  
  7.   
  8. namespace ShowingNestedDataDisplayInMVC4  
  9. {  
  10.     public class RouteConfig  
  11.     {  
  12.         public static void RegisterRoutes(RouteCollection routes)  
  13.         {  
  14.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  15.   
  16.             routes.MapRoute(  
  17.                 name: "Default",  
  18.                 url: "{controller}/{action}/{id}",  
  19.                 defaults: new { controller = "Project", action = "Index", id = UrlParameter.Optional }  
  20.             );  
  21.         }  
  22.     }  
  23. }  
Now run your application:

output
Figure 20: Output

Now go to Project ID to expand the details of this project as in the following:

show hide detail
Figure 21: Expand the details

emp email
Figure 22: After expanding the details

project id
Figure 23: After expanding the details of Project ID 2

employee
Figure 24: Details for Project ID 3

product

Figure 25: Details for Project ID 1, 2 and 3 


Similar Articles