I am trying to work around the issue of Kendo Panel Bars not working with ng-repeat by defining a custom angular directive that I will invoke for every element of an array.
<div class="row resourceUsages" ng-show="device.apps.length !== 0">
<div class="row">
<div class="col-lg-12">
<div class="k-content devices-panel appnamesBar">
<ul kendo-panel-bar k-options="panelBarOptions">
<!-- Following code is a workaround to the issue of kendo panel bars not working with ng-repeats as well
http://stackoverflow.com/questions/20929999/ng-repeat-with-ng-include-not-working for more context -->
<li class="k-state-active" ng-show="device.apps[0]" > App Name: {{device.apps[0].name}}
<div>
<div class="appdetailContainer clearfix">
<my-device-app-detail app='device.apps[0]'
downtime='deviceMetadata.downTimeKSeries'
selectedindex='deviceMetadata.selectedIndex'
resourcedata='deviceMetadata.appCpuAndEventsDataSource'
>
</my-device-app-detail>
</div>
</div>
</li>
<li ng-show="device.apps[1]" > App Name: {{device.apps[1].name}}
<div>
<div class="appdetailContainer clearfix">
<my-device-app-detail app='device.apps[1]' ></my-device-app-detail>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
with a angular directive that looks like this
app.directive('myDeviceAppDetail', function() {
return {
restrict: "E",
scope: {
app: '=',
downtime: '=',
selectedindex: '=',
resourcedata: '='
},
templateUrl: "/views/appDetailTemplate.html"
}
});
and an angular template that has amongst other things this content
<div class="col-lg-12 frchart">
<div class="col-lg-3 text-center">
<p>CPU Consumption</p>
<div kendo-chart="appMetadata.resourceUsageChart"
k-title="{ text: 'CPU consumption', visible: false }"
k-legend="{ visible: false }"
k-chart-area="{ background: '', height:200, width:250 }"
k-series="[
{ type: 'scatterLine', yField: 'cpu', name: 'CPU', xField: 'Date',
tooltip: {
visible: true,
format: '{0}',
template: ' #= dataItem.cpu #%'
}
},
{ type: 'scatter', yField: 'messageVal', name: 'event', xField: 'Date',
tooltip: {
visible: true,
format: '{0}',
template: '#=dataItem.message#',
background: 'green'
}
}
]"
k-category-axis="{ baseUnit: 'fit', labels: { step: 2} }"
k-data-source="{{resourcedata}}"
k-transitions="false"
>
</div>
</div>
The dataSource is itself defined as
$scope.deviceMetadata.appCpuAndEventsData = [{
"Date":new Date(1280638800000),
"cpu": 16,
"memory": 20,
"disk": 198,
"bandwidth": 24,
"message": ''
},
{
"Date":new Date(1285909200000),
"cpu": 16,
"memory": 20,
"disk": 197,
"bandwidth": 25,
"message": ''
},
{
"Date":new Date(1283317200000),
"messageVal" : 1,
"message": "App Started"
},
{
"Date": new Date(1288587600000),
"messageVal" : 1,
"message": "App: CovacsisApp started using: restapi"
}
];
$scope.deviceMetadata.appCpuAndEventsDataSource = new kendo.data.DataSource();
$scope.deviceMetadata.appCpuAndEventsDataSource.data($scope.deviceMetadata.appCpuAndEventsData);
in the controller.
I however keep running into an exception that says
TypeError: Cannot read property 'data' of undefined
at dt.extend.setup (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:9938)
at dt.extend.read (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:9652)
at http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:17462
at ct.extend._queueRequest (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:19054)
at ct.extend.read (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:17347)
at ct.extend.query (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:21601)
at ct.extend._query (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:22094)
at Object.<anonymous> (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:22040)
at Function.b.extend.Deferred (http://10.78.106.106/bower_components/jquery/jquery1.9.1.min.js:3:9722)
at ct.extend.fetch (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:21905)
What am I doing wrong ?
-Rajesh
<div class="row resourceUsages" ng-show="device.apps.length !== 0">
<div class="row">
<div class="col-lg-12">
<div class="k-content devices-panel appnamesBar">
<ul kendo-panel-bar k-options="panelBarOptions">
<!-- Following code is a workaround to the issue of kendo panel bars not working with ng-repeats as well
http://stackoverflow.com/questions/20929999/ng-repeat-with-ng-include-not-working for more context -->
<li class="k-state-active" ng-show="device.apps[0]" > App Name: {{device.apps[0].name}}
<div>
<div class="appdetailContainer clearfix">
<my-device-app-detail app='device.apps[0]'
downtime='deviceMetadata.downTimeKSeries'
selectedindex='deviceMetadata.selectedIndex'
resourcedata='deviceMetadata.appCpuAndEventsDataSource'
>
</my-device-app-detail>
</div>
</div>
</li>
<li ng-show="device.apps[1]" > App Name: {{device.apps[1].name}}
<div>
<div class="appdetailContainer clearfix">
<my-device-app-detail app='device.apps[1]' ></my-device-app-detail>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
with a angular directive that looks like this
app.directive('myDeviceAppDetail', function() {
return {
restrict: "E",
scope: {
app: '=',
downtime: '=',
selectedindex: '=',
resourcedata: '='
},
templateUrl: "/views/appDetailTemplate.html"
}
});
and an angular template that has amongst other things this content
<div class="col-lg-12 frchart">
<div class="col-lg-3 text-center">
<p>CPU Consumption</p>
<div kendo-chart="appMetadata.resourceUsageChart"
k-title="{ text: 'CPU consumption', visible: false }"
k-legend="{ visible: false }"
k-chart-area="{ background: '', height:200, width:250 }"
k-series="[
{ type: 'scatterLine', yField: 'cpu', name: 'CPU', xField: 'Date',
tooltip: {
visible: true,
format: '{0}',
template: ' #= dataItem.cpu #%'
}
},
{ type: 'scatter', yField: 'messageVal', name: 'event', xField: 'Date',
tooltip: {
visible: true,
format: '{0}',
template: '#=dataItem.message#',
background: 'green'
}
}
]"
k-category-axis="{ baseUnit: 'fit', labels: { step: 2} }"
k-data-source="{{resourcedata}}"
k-transitions="false"
>
</div>
</div>
The dataSource is itself defined as
$scope.deviceMetadata.appCpuAndEventsData = [{
"Date":new Date(1280638800000),
"cpu": 16,
"memory": 20,
"disk": 198,
"bandwidth": 24,
"message": ''
},
{
"Date":new Date(1285909200000),
"cpu": 16,
"memory": 20,
"disk": 197,
"bandwidth": 25,
"message": ''
},
{
"Date":new Date(1283317200000),
"messageVal" : 1,
"message": "App Started"
},
{
"Date": new Date(1288587600000),
"messageVal" : 1,
"message": "App: CovacsisApp started using: restapi"
}
];
$scope.deviceMetadata.appCpuAndEventsDataSource = new kendo.data.DataSource();
$scope.deviceMetadata.appCpuAndEventsDataSource.data($scope.deviceMetadata.appCpuAndEventsData);
in the controller.
I however keep running into an exception that says
TypeError: Cannot read property 'data' of undefined
at dt.extend.setup (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:9938)
at dt.extend.read (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:9652)
at http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:17462
at ct.extend._queueRequest (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:19054)
at ct.extend.read (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:17347)
at ct.extend.query (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:21601)
at ct.extend._query (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:22094)
at Object.<anonymous> (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:22040)
at Function.b.extend.Deferred (http://10.78.106.106/bower_components/jquery/jquery1.9.1.min.js:3:9722)
at ct.extend.fetch (http://10.78.106.106/bower_components/kendoUI/js/kendo.all.min.js:11:21905)
What am I doing wrong ?
-Rajesh