JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.90/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20152.90/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20152.90/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.90/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
<!-- this is the grid -->
<wj-flex-grid items-source="treeData" child-items-path="items" allow-resizing="None" selection-mode="ListBox" control="flex">
<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>
<input type="button" value="Refresh" ng-click="Refresh()" />
</div>
JavaScript
var ecarr = [];
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' }]
},
{
name: '\u266A Live in Paradiso', items: [
{ name: "You Know That I'm No Good", length: '2:32' },
{ name: 'Wake Up Alone', length: '1:04' },
{ name: 'Valerie', length: '1:22' },
{ name: 'Tears Dry On Their Own', length: '3:15' },
{ name: 'Rehab', length: '3:40' }]
}]
},
{
name: '\u266B Black Sabbath', items: [
{
name: '\u266A Heaven and Hell', items: [
{ name: 'Neon Knights', length: '3:03' },
{ name:...