Introduction

In this post, I will show you how to use JQXTreeview Plugin with ASP.NET MVC 4, using C# and Entity framework, JSON.

What is JqxTree?

jqxTree represents a highly configurable jQuery Tree widget, which displays the hierarchical data, such as a table of contents in a tree structure.

jqxTree can be generated from the lists and standard anchor tags, which are properly recognized by the search engines. As a result, all the content accessible through this widget will be automatically indexed and ranked with no extra effort required from the Web developer.

Before starting, we need to download the following libraries from jqwidgets.

  1. <link href="~/Content/jqx.base.css" rel="stylesheet" />
  2. <script src="~/Scripts/jquery-1.7.1.min.js"></script>
  3. <script src="~/Scripts/demos.js"></script>
  4. <script src="~/Scripts/jqxcore.js"></script>
  5. <script src="~/Scripts/jqxdata.js"></script>
  6. <script src="~/Scripts/jqxbuttons.js"></script>
  7. <script src="~/Scripts/jqxscrollbar.js"></script>
  8. <script src="~/Scripts/jqxpanel.js"></script>
  9. <script src="~/Scripts/jqxtree.js"></script>
SQL Database part

Create Table

You will find the table, given below, used in our Application:

application

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

table

Create your MVC application

Open Visual Studio. Click on File > New > Project and name your project, as shown below:

MVC application

MVC application

Creating ADO.NET Entity Data Model

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

ADO.NET Entity Data Model

After clicking Next button, the dialog box will be displayed, as shown below. You need to choose your Server name and select your database.

properties

Finally, we see that EDMX model generates TreeViewData class.

EDMX model

Create a controller

Now, we proceed to create a controller. Right click on controller folder > Add > Controller > Enter Controller name (‘Home Controller’).

controller

HomeController.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. namespace JQXTreeViewMVC4.Controllers
  7. {
  8. public class HomeController: Controller {
  9. //DbContext
  10. private DbPersonnesEntities db = new DbPersonnesEntities();
  11. //
  12. // GET: /Home/
  13. public ActionResult Index() {
  14. return View();
  15. }
  16. public JsonResult GetDataTreeView() {
  17. var DbResult = from d in db.TreeViewData
  18. select new {
  19. d.id,
  20. d.parentId,
  21. d.text,
  22. d.value
  23. };
  24. return Json(DbResult, JsonRequestBehavior.AllowGet);
  25. }
  26. }
  27. }
As you can see, I am creating GetDataTreeView () action to retrieve the data from TreeViewData table as json format.

Creating a strongly typed view

We are going to create a strongly typed view.

strongly typed view

Index.cshtml
  1. @model JQXTreeViewMVC4.TreeViewData
  3. @{
  4. Layout = null;
  5. }
  8. <!DOCTYPE html>
  9. <html>
  10. <head>
  11. <meta name="viewport" content="width=device-width" />
  12. <title>Index</title>
  13. <link href="~/Content/jqx.base.css" rel="stylesheet" />
  14. <script src="~/Scripts/jquery-1.7.1.min.js"></script>
  15. <script src="~/Scripts/demos.js"></script>
  16. <script src="~/Scripts/jqxcore.js"></script>
  17. <script src="~/Scripts/jqxdata.js"></script>
  18. <script src="~/Scripts/jqxbuttons.js"></script>
  19. <script src="~/Scripts/jqxscrollbar.js"></script>
  20. <script src="~/Scripts/jqxpanel.js"></script>
  21. <script src="~/Scripts/jqxtree.js"></script>
  22. </head>
  23. <body>
  24. <div id='content'>
  25. <script type="text/javascript">
  26. $(document).ready(function () {
  28. // prepare the data
  29. var source =
  30. {
  31. datatype: "json",
  32. datafields: [
  33. { name: 'id' },
  34. { name: 'parentId' },
  35. { name: 'text'},
  36. { name: 'value'}
  37. ],
  39. id: 'id',
  40. url: 'Home/GetDataTreeView',
  41. async: false
  43. };
  45. // create data adapter.
  46. var dataAdapter = new $.jqx.dataAdapter(source);
  48. // perform Data Binding.
  49. dataAdapter.dataBind();
  54. // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
  55. // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
  56. // specifies the mapping between the 'text' and 'label' fields.
  58. var records = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'text', map: 'label' }]);
  60. $('#jqxWidget').jqxTree({ source: records, width: '300px' });
  61. });
  62. </script>
  63. <div id='jqxWidget'></div>
  64. </div>
  65. </body>
  66. </html>
Output

Output