Angular

TreeGrid With AngularJS

Introduction

In this article, we will learn about TreeGrid control by using jQWidgets Framework with AngularJS. I hope you will like this.

What’s jQWidgets Framework?

jQWidgets represents a framework based on jQuery for building web-based applications that run on PC, Touch, and mobile devices. jQWidgets includes more than 60 UI widgets. jQWidgets is not a modified version of the jQuery UI toolkit. All widgets are designed from the ground-up and based on a powerful common core. The framework core provides fundamental capabilities like support for widget extensions and inheritance, widget settings, internal event handling and routing, property change notifications, device and browser compatibility detection and adjustments.
You can download zip file from here jQWidgets.



Create your Application

Open Visual Studio and select File >> New Project.

The "New Project" window will pop up. Select ASP.NET Web Application (.NET Framework), name your project, and click OK.



Next, new window will pop up for selecting the template. Choose Empty and click OK.



Angular Part

Here, we need to create new folder which includes two JavaScript files respectively, GridApp.js and GridController.js.



In order to create new JS files, right click on GridApp folder > Add > JavaScript File.





GridApp.js

  1. var app = angular.module('myApp', ['ngRoute', 'jqwidgets']);  
  2.   
  3. app.config(['$routeProvider', function ($routeProvider) {  
  4.   
  5.     $routeProvider.when('/TreeGrid', {  
  6.   
  7.         templateUrl: '/GridApp/Views/TreeGridDemo.html',  
  8.         controller: 'GridController'  
  9.   
  10.     }).otherwise({  
  11.         controller: 'GridController'  
  12.     });  
  13.   
  14. }]);  
  15. Here, we have defined AngularJS module (in our case myApp), and injecting ngRoute module which allow us to use routing then jqwidgets module for using TreeGrid control.  
  16. GridController.js  
  17. app.controller('GridController', function ($scope) {  
  18.   
  19.      //json data  
  20.     $scope.employees = [  
  21.           {  
  22.               "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",  
  23.               children: [  
  24.               { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },  
  25.               { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },  
  26.               { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },  
  27.               { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },  
  28.               {  
  29.                   "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",  
  30.                   children: [  
  31.                          { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },  
  32.                          { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },  
  33.                          { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }  
  34.                   ]  
  35.               }  
  36.               ]  
  37.           }];  
  38.   
  39.        //create TreeGrid  
  40.         $scope.treeGridSettings =  
  41.         {  
  42.             width: 900,  
  43.             source: new $.jqx.dataAdapter({  
  44.                 dataType: "json",  
  45.                 dataFields: [  
  46.                     { name: 'EmployeeID', type: 'number' },  
  47.                     { name: 'FirstName', type: 'string' },  
  48.                     { name: 'LastName', type: 'string' },  
  49.                     { name: 'Country', type: 'string' },  
  50.                     { name: 'City', type: 'string' },  
  51.                     { name: 'Address', type: 'string' },  
  52.                     { name: 'Title', type: 'string' },  
  53.                     { name: 'HireDate', type: 'date' },  
  54.                     { name: 'children', type: 'array' },  
  55.                     { name: 'expanded', type: 'bool' },  
  56.                     { name: 'BirthDate', type: 'date' }  
  57.                 ],  
  58.                 hierarchy:  
  59.                 {  
  60.                     root: 'children'  
  61.                 },  
  62.                 id: 'EmployeeID',  
  63.                 localData: $scope.employees  
  64.             }),  
  65.             sortable: true,  
  66.             columns: [  
  67.               { text: 'FirstName', dataField: 'FirstName', width: 200 },  
  68.               { text: 'LastName', dataField: 'LastName', width: 120 },  
  69.               { text: 'Title', dataField: 'Title', width: 160 },  
  70.               { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },  
  71.               { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },  
  72.               { text: 'Address', dataField: 'Address', width: 250 },  
  73.               { text: 'City', dataField: 'City', width: 120 },  
  74.               { text: 'Country', dataField: 'Country' }  
  75.             ]  
  76.         };  
  77.   
  78. })  
Create HTML Page

For doing this, right click on Views folder > Add > HTML Page.



TreeGridDemo.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>.: TreeGrid Demo :.</title>  
  5.     <meta charset="utf-8" />  
  6.   
  7.      
  8.   
  9. </head>  
  10. <body>  
  11.   
  12.     <h2>Tree Grid with AngularJS</h2>  
  13.     <div>  
  14.         <jqx-tree-grid jqx-settings="treeGridSettings"></jqx-tree-grid>  
  15.     </div>  
  16.   
  17. </body>  
  18. </html>  
Before running, we need to add some libraries inside index.html, as shown below.

Index.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <!-- CSS -->  
  7.     <link href="../../Css/jqx.base.css" rel="stylesheet" />  
  8.   
  9. </head>  
  10. <body ng-app="myApp">  
  11.   
  12.     <div ng-view> </div>  
  13.   
  14.   
  15.     <!-- AngularJS libraries-->  
  16.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>  
  17.     <script src="https://code.angularjs.org/1.4.7/angular-route.js"></script>  
  18.   
  19.     <!--JS libraries-->  
  20.     <script src="../../scripts/jquery-1.11.1.min.js"></script>  
  21.     <script src="../../scripts/jqxcore.js"></script>  
  22.     <script src="../../scripts/jqxdata.js"></script>  
  23.     <script src="../../scripts/jqxbuttons.js"></script>  
  24.     <script src="../../scripts/jqxcheckbox.js"></script>  
  25.     <script src="../../scripts/jqxgrid.js"></script>  
  26.     <script src="../../scripts/jqxgrid.selection.js"></script>  
  27.     <script src="../../scripts/jqxmenu.js"></script>  
  28.     <script src="../../scripts/jqxscrollbar.js"></script>  
  29.     <script src="../../scripts/jqxdatatable.js"></script>  
  30.     <script src="../../scripts/jqxtreegrid.js"></script>  
  31.     <script src="../../scripts/jqxangular.js"></script>  
  32.     <script src="../../scripts/demos.js"></script>  
  33.   
  34.     <!-- GridApp.js-->  
  35.     <script src="GridApp/GridApp.js"></script>  
  36.     <!-- GridController.js-->  
  37.     <script src="GridApp/GridController.js"></script>  
  38.   
  39. </body>  
  40. </html>  
Output - To run your demo, press F5 and change URL address as follows: http://localhost:50398/#/TreeGrid


That’s all. Please send your feedback and queries in comments box. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs