Available in the Full Version

Tree Grid - AngularJS

This sample demonstrates how AngularJS directives are used with the Tree Grid Control.
IDTasksStartFinishDurationProgress
0Project Plan6/2/20148/22/201460d32%
1Planning6/2/20146/4/20143d100%
2Write a specification6/5/20146/6/20142d100%
3Create a demo application6/9/20146/11/20143d100%
4Collect a feedback6/12/20146/12/20141d100%
5Design6/13/20146/19/20145d60%
8Conceptual Design6/13/20146/16/20142d100%
9Preliminary Design6/17/20146/18/20142d65%
10Final Design6/19/20146/19/20141d15%
6Development6/20/20148/20/201444d5%
11Implementation6/20/20147/17/201420d5%
12Testing7/18/20147/31/201410d0%
13Bug fixing8/1/20148/14/201410d0%
14Documenting8/15/20148/20/20144d0%
7Project Complete8/21/20148/22/20142d0%

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script src="/js/angular.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/igniteui-angularjs.js"></script>

    <script type="text/javascript">
        var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
        sampleApp.controller('treeGridController', function ($scope) {
            $scope.tasks = [
                {
                    "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
                        { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
                        { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
                        { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
                        { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
                        {
                            "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
                                { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
                                { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
                                { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
                            ]
                        },
                        {
                            "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [
                                { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
                                { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
                                { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
                                { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
                            ]
                        },
                        { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
                    ]
                }
            ];
        });
    </script>
</head>
<body class="container">
    <div ng-app="sampleApp" ng-controller="treeGridController">
        <ig-tree-grid id="grid1"
                        data-source="tasks"
                        width="100%"
                        height="450px"
                        primary-key="id"
                        auto-commit="true"
                        auto-generate-columns="false"
                        child-data-key="products"
                        render-expand-column="true">
            <columns>
                <column key="id" header-text="ID" width="100px" data-type="number"></column>
                <column key="tasks" header-text="Tasks" width="250px" data-type="string"></column>
                <column key="start" header-text="Start" width="100px" data-type="date"></column>
                <column key="finish" header-text="Finish" width="100px" data-type="date"></column>
                <column key="duration" header-text="Duration" width="100px" data-type="date"></column>
                <column key="progress" header-text="Progress" width="100px" data-type="percent"></column>
            </columns>
        </ig-tree-grid>
    </div>
</body>   
</html>