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

var app = angular.module('myApp', ['ngRoute', 'jqwidgets']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/TreeGrid', {
templateUrl: '/GridApp/Views/TreeGridDemo.html',
controller: 'GridController'
}).otherwise({
controller: 'GridController'
});
}]);
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.
GridController.js
app.controller('GridController', function ($scope) {
//json data
$scope.employees = [
{
"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",
children: [
{ "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." },
{ "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" },
{ "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." },
{ "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." },
{
"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",
children: [
{ "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." },
{ "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" },
{ "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." }
]
}
]
}];
//create TreeGrid
$scope.treeGridSettings =
{
width: 900,
source: new $.jqx.dataAdapter({
dataType: "json",
dataFields: [
{ name: 'EmployeeID', type: 'number' },
{ name: 'FirstName', type: 'string' },
{ name: 'LastName', type: 'string' },
{ name: 'Country', type: 'string' },
{ name: 'City', type: 'string' },
{ name: 'Address', type: 'string' },
{ name: 'Title', type: 'string' },
{ name: 'HireDate', type: 'date' },
{ name: 'children', type: 'array' },
{ name: 'expanded', type: 'bool' },
{ name: 'BirthDate', type: 'date' }
],
hierarchy:
{
root: 'children'
},
id: 'EmployeeID',
localData: $scope.employees
}),
sortable: true,
columns: [
{ text: 'FirstName', dataField: 'FirstName', width: 200 },
{ text: 'LastName', dataField: 'LastName', width: 120 },
{ text: 'Title', dataField: 'Title', width: 160 },
{ text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
{ text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
{ text: 'Address', dataField: 'Address', width: 250 },
{ text: 'City', dataField: 'City', width: 120 },
{ text: 'Country', dataField: 'Country' }
]
};
})

Create HTML Page

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

TreeGridDemo.html

<!DOCTYPE html>
<html>
<head>
<title>.: TreeGrid Demo :.</title>
<meta charset="utf-8" />
</head>
<body>
<h2>Tree Grid with AngularJS</h2>
<div>
<jqx-tree-grid jqx-settings="treeGridSettings"></jqx-tree-grid>
</div>
</body>
</html>

Before running, we need to add some libraries inside index.html, as shown below.

Index.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="../../Css/jqx.base.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div ng-view> </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.js"></script>
<script src="../../scripts/jquery-1.11.1.min.js"></script>
<script src="../../scripts/jqxcore.js"></script>
<script src="../../scripts/jqxdata.js"></script>
<script src="../../scripts/jqxbuttons.js"></script>
<script src="../../scripts/jqxcheckbox.js"></script>
<script src="../../scripts/jqxgrid.js"></script>
<script src="../../scripts/jqxgrid.selection.js"></script>
<script src="../../scripts/jqxmenu.js"></script>
<script src="../../scripts/jqxscrollbar.js"></script>
<script src="../../scripts/jqxdatatable.js"></script>
<script src="../../scripts/jqxtreegrid.js"></script>
<script src="../../scripts/jqxangular.js"></script>
<script src="../../scripts/demos.js"></script>
<script src="GridApp/GridApp.js"></script>
<script src="GridApp/GridController.js"></script>
</body>
</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.