Wijmo 5 [Flexgrid TreeView]

Tree view expand and collapse on click

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="app">
        <div ng-controller="appCtrl">
            <wj-flex-grid class="custom-flex-grid"
                          items-source="treeData"
                          child-items-path="items"
                          allow-resizing="None"
                          selection-mode="Row"
                          headers-visibility="None"
                          control="flex"
                          initialized="init(s,e)"
                          selection-changed="selectionChanged(s,e)"
                          >
                <wj-flex-grid-column binding="name"
                                     width="*">
                </wj-flex-grid-column>
                <wj-flex-grid-column binding="length"
                                     width="80"
                                     align="center">
                </wj-flex-grid-column>
            </wj-flex-grid>
        </div>
    </div>

CSS

.custom-flex-grid .wj-glyph-up {
    background-image:url('http://demos.wijmo.com/5/angular/flexgridintro/flexgridintro/resources/ascending.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 1em; height: 1em;
    border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px;
    opacity: 1;
}
.custom-flex-grid .wj-glyph-down {
    background-image:url('http://demos.wijmo.com/5/angular/flexgridintro/flexgridintro/resources/descending.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 1em; height: 1em;
    border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px;
    opacity: 1;
}

.custom-flex-grid .wj-glyph-right {
    background-image:url('http://demos.wijmo.com/5/angular/flexgridintro/flexgridintro/resources/collapsed.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 1em; height: 1em;
    border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px;
}
.custom-flex-grid .wj-glyph-down-right {
    background-image:url('http://demos.wijmo.com/5/angular/flexgridintro/flexgridintro/resources/expanded.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 1em; height: 1em;
    border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px;
}

JavaScript

var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            $scope.treeData = [
                                {
                                    name: '\u266B Adriane Simione', items: [
                                      {
                                          name: '\u266A Intelligible Sky', items: [
                                            { name: 'Theories', length: '2:02' },
                                            { name: 'Giant Eyes', length: '3:29' },
                                            { name: 'Jovian Moons', length: '1:02' },
                                            { name: 'Open Minds', length: '2:41' },
                                            { name: 'Spacetronic Eyes', length: '3:41' }]
                                      }
                                    ]
                                },
                                {
                                    name: '\u266B Amy Winehouse', items: [
                                      {
                                          name: '\u266A Back to Black', items: [
                                            { name: 'Addicted', length: '1:34' },
                                            { name: 'He Can Only Hold Her', length: '2:22' },
                                            { name: 'Some Unholy War', length: '2:21' },
                                            { name: 'Wake Up Alone', length: '3:43' },
                                            { name: 'Tears Dry On Their Own', length: '1:25' }]
                                      }]
                                }];
             $scope.init = function (s, e) {
                s.collapseGroupsToLevel(0);
            }
            $scope.$watch('flex', function () {
                var flex = $scope.flex;
                if (flex) {
                    flex.hostElement.addEventListener('click', function () {
                        var row =...