ASP.NET  

Using TreeGrid With ASP.NET MVC 4

Introduction

Today, we have numerous Grid Controls used in MVC applications. Here, in this article, I will share with you a new control named jqxTreeGrid that allow us to create Nested Grid with the data provided from the database.

Create Table

You will find the table used in our application, here.

Table

After creating the table, you can fill it using data, as shown below:

Table

Create your MVC application

First, open Visual Studio. Then, click on file > New > project and name your project, as follows:

MVC application

MVC application

Creating ADO.NET Entity Data Model

You need to follow the necessary steps, as described below, for having the same result.

Right click on project name. Then, click Add > Add New Item. In the dialog box displayed, select Data > click on Add button.

ADO.NET Entity Data Model

ADO.NET Entity Data Model

Click on next button. You will have the dialog box, as shown below. You need to choose your server name and select your database. Finally, click on OK.

server name

server name

Here, we select the table (in our case, Employees) that we have created and click on finish button.

Finally, we see that the EDMX model will generate Employees class.

Employees

Create a controller

Now, we proceed to create a Controller. Right click on Controller folder > Add > Controller > Enter Controller name (in our case ‘HomeController’).

HomeController.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace TreeGridMVC4.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         // DbContext  
  12.         private Db_PersonEntities db = new Db_PersonEntities();  
  13.   
  14.         //  
  15.         // GET: /Home/  
  16.   
  17.         public ActionResult Index()  
  18.         {  
  19.             return View();  
  20.         }  
  21.   
  22.     
  23.         public JsonResult GetEmployees()  
  24.         {  
  25.             var employees = db.Employees.ToList();  
  26.          
  27.             return Json(employees, JsonRequestBehavior.AllowGet);  
  28.         }  
  29.   
  30.     }  
  31. }  
As you can see, I am creating GetEmployees() action that should be used to retrieve the data from Employees table, and return output as json format.

Create a strongly typed view

Now, we are going to create a strongly typed view.

view

When our view has been created, we need to add some references, first, as shown below:
  1. <!-- CSS Link -->  
  2.   
  3.     <link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />  
  4.   
  5.     <!-- Js Scripts -->  
  6.   
  7.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>  
  8.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>  
  9.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>  
  10.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>  
  11.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>  
  12.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatatable.js"></script>  
  13.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtreegrid.js"></script>  
  14.   
  15. jqxTreeGrid implementation   
  16. <script type="text/javascript">  
  17.         $(document).ready(function () {  
  18.              
  19.             var source =  
  20.             {  
  21.                 dataType: "json",  
  22.                 dataFields: [  
  23.                     { name: 'EmployeeID', type: 'number' },  
  24.                     { name: 'FirstName', type: 'string' },  
  25.                     { name: 'LastName', type: 'string' },  
  26.                     { name: 'Title', type: 'string' },  
  27.                     { name: 'ReportTo', type: 'number' },  
  28.                     { name: 'Country', type: 'string' },  
  29.                     { name: 'City', type: 'string' }  
  30.                    
  31.                 ],  
  32.                 hierarchy:  
  33.                 {  
  34.                     keyDataField: { name: 'EmployeeID' },  
  35.                     parentDataField: { name: 'ReportTo' }  
  36.                 },  
  37.                 id: 'EmployeeID',  
  38.                 url: "Home/GetEmployees"  
  39.             };  
  40.             var dataAdapter = new $.jqx.dataAdapter(source);  
  41.           
  42.             // call jqxTreeGrid  
  43.             $("#treeGrid").jqxTreeGrid(  
  44.             {  
  45.                 width: 700,  
  46.                 source: dataAdapter,  
  47.                 pageable: true,  
  48.                 sortable: true,  
  49.                 ready: function () {  
  50.                     $("#treeGrid").jqxTreeGrid('expandRow', '2');  
  51.                 },  
  52.                 //choose the columns you wish to display on screen   
  53.                 columns: [  
  54.                   { text: 'First Name', dataField: 'FirstName', width: 150 },  
  55.                   { text: 'Last Name', dataField: 'LastName', width: 150 },  
  56.                   { text: 'Title', dataField: 'Title', width: 200 },  
  57.                   { text: 'Country', dataField: 'Country', width: 200 }  
  58.                 ]  
  59.             });  
  60.         });  
  61.     </script>   
In the source part, we need to prepare 4 things:
  • Data type: json - to use the data received from action as json format.
  • Data Fields: specify all fields that are involved.
  • Hierarchy: is an object that has two members’ keyDataField and parentDataField.
  • URL: call your action method (Home/GetEmployees).
    Note: Set the "keyDataField" and "parentDataField" to point to the data fields in the data source that contain information about the parent-child relationships.

Index.cshtml

  1. @model  IEnumerable<TreeGridMVC4.Employees>  
  2.   
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6.   
  7. @section scripts {  
  8.   
  9.     <!-- CSS Link -->  
  10.   
  11.     <link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />  
  12.   
  13.     <!-- Js Scripts -->  
  14.   
  15.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>  
  16.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>  
  17.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>  
  18.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>  
  19.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>  
  20.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatatable.js"></script>  
  21.     <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtreegrid.js"></script>  
  22.      
  23.   
  24.     <script type="text/javascript">  
  25.         $(document).ready(function () {  
  26.              
  27.             var source =  
  28.             {  
  29.                 dataType: "json",  
  30.                 dataFields: [  
  31.                     { name: 'EmployeeID', type: 'number' },  
  32.                     { name: 'FirstName', type: 'string' },  
  33.                     { name: 'LastName', type: 'string' },  
  34.                     { name: 'Title', type: 'string' },  
  35.                     { name: 'ReportTo', type: 'number' },  
  36.                     { name: 'Country', type: 'string' },  
  37.                     { name: 'City', type: 'string' }  
  38.                    
  39.                 ],  
  40.                 hierarchy:  
  41.                 {  
  42.                     keyDataField: { name: 'EmployeeID' },  
  43.                     parentDataField: { name: 'ReportTo' }  
  44.                 },  
  45.                 id: 'EmployeeID',  
  46.                 url: "Home/GetEmployees"  
  47.             };  
  48.             var dataAdapter = new $.jqx.dataAdapter(source);  
  49.           
  50.             // call jqxTreeGrid  
  51.             $("#treeGrid").jqxTreeGrid(  
  52.             {  
  53.                 width: 700,  
  54.                 source: dataAdapter,  
  55.                 pageable: true,  
  56.                 sortable: true,  
  57.                 ready: function () {  
  58.                     $("#treeGrid").jqxTreeGrid('expandRow', '2');  
  59.                 },  
  60.                 //choose the columns you wish to display on screen   
  61.                 columns: [  
  62.                   { text: 'First Name', dataField: 'FirstName', width: 150 },  
  63.                   { text: 'Last Name', dataField: 'LastName', width: 150 },  
  64.                   { text: 'Title', dataField: 'Title', width: 200 },  
  65.                   { text: 'Country', dataField: 'Country', width: 200 }  
  66.                 ]  
  67.             });  
  68.         });  
  69.     </script>  
  70. }  
  71. <h2>TreeGrid - MVC 4</h2>  
  72. <div id="treeGrid"></div>  
Output

Output

 

Membership not found