How to render TreeGrid using AngularJS
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
