Category / Section
How to render TreeGrid using AngularJS
1 min read
The below code snippet explains rendering TreeGrid using AngularJS. You can also find the complete user guide documentation for TreeGrid here.
Code snippets:
JS
<html lang="en" ng-app="listCtrl"> <head> <meta charset="utf-8" /> <!-- style sheet for default theme(flat azure) --> <link href="http://cdn.syncfusion.com/15.1.0.33/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet"> <!--script reference--> <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script> <script src="http://cdn.syncfusion.com/15.1.0.33/js/web/ej.web.all.min.js" type="text/javascript"></script> </head> <body ng-controller="TreeGridCtrl"> <div ej-treegrid e-datasource="data" e-selectedrowindex="selectedRow" e-treecolumnindex="1" e-columns="columns" e-childmapping="subtasks" e-enablevirtualization="true" id="treegrid"> </div> //... <script type="text/javascript"> var projectData = [ { taskID: 1, taskName: "Planning", startDate: "02/03/2014", endDate: "02/07/2014", progress: 100, duration:5, subtasks: [ { taskID: 2, taskName: "Plan timeline", startDate: "02/03/2014", endDate: "02/07/2014", duration: 5, progress: 100 }, ] }, //... }]; var columns = [ { field: "taskID", headerText: "Task Id", width: "60"}, { field: "taskName", headerText: "Task Name"}, { field: "startDate", headerText: "Start Date"}, { field: "endDate", headerText: "End Date"}, { field: "progress", headerText: "Progress"} ]; angular.module('listCtrl', ['ejangular']) .controller('TreeGridCtrl', function ($scope) { $scope.selectedRow = 1; $scope.data = projectData; $scope.columns = columns; }); </script> </body> </html>
Sample link
A sample to render TreeGrid with AngularJS is available in the following link, Sample