Hierarchical FlexGrid cell templates

by c1alexi

HTML

<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.input.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="http://prerelease.componentone.com/wijmo5/latest/styles/wijmo.min.css">
<script src="http://prerelease.componentone.com/wijmo5/latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
                <div >
                        <input type="checkbox" ng-model="customCell" /> Cell
                        <br />
                        <input type="checkbox" ng-model="customGroupHeader" /> GroupHeader
                        <br />
                        <input type="checkbox" ng-model="customGroup" /> Group
                        <br />
                </div>
    
                <wj-flex-grid items-source="treeData" 
                    child-items-path="items" 
                    allow-resizing="None"
                    selection-mode="ListBox"
                    headers-visibility="None"
                    style="height:300px;margin-top:20px"
                    control="hierGrid">
                    <wj-flex-grid-column binding="title" width="300">

                        <wj-flex-grid-cell-template cell-type="Cell" ng-if="customCell">
                            <span style="color:red">Cell1:</span> {{$item.title}}
                        </wj-flex-grid-cell-template>

                        <wj-flex-grid-cell-template cell-type="GroupHeader" ng-if="customGroupHeader">
                            GroupHeader1: {{$item.title}} 
                        </wj-flex-grid-cell-template>

                        <wj-flex-grid-cell-template cell-type="Group" ng-if="customGroup">
                            Group1:...

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

        // hierarchical data
        $scope.treeData = [
            {
                title: '\u266B Adriane Simione', items: [
                  {
                      title: '\u266A Intelligible Sky', length: '15:12', items: [
                        { title: 'Theories', length: '2:02' },
                        { title: 'Giant Eyes', length: '3:29' },
                        { title: 'Jovian Moons', length: '1:02' },
                        { title: 'Open Minds', length: '2:41' },
                        { title: 'Spacetronic Eyes', length: '3:41' }]
                  }
                ]
            },
            {
                title: '\u266B Amy Winehouse', items: [
                  {
                      title: '\u266A Back to Black', length: '25:12', items: [
                        { title: 'Addicted', length: '1:34' },
                        { title: 'He Can Only Hold Her', length: '2:22' },
                        { title: 'Some Unholy War', length: '2:21' },
                        { title: 'Wake Up Alone', length: '3:43' },
                        { title: 'Tears Dry On Their Own', length: '1:25' }]
                  },
                  {
                      title: '\u266A Live in Paradiso', length: '35:12', items: [
                        { title: "You Know That I'm No Good", length: '2:32' },
                        { title: 'Wake Up Alone', length: '1:04' },
                        { title: 'Valerie', length: '1:22' },
                        { title: 'Tears Dry On Their Own', length: '3:15' },
                        { title: 'Rehab', length: '3:40' }]
                  }]
            },
            {
                title: '\u266B Black Sabbath', items: [
                  {
                      title: '\u266A Heaven and Hell', length: '45:12', items: [
                        { title: 'Neon...