Passing a kendo dataSource into an Angular directive

[Rajesh]

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

[Atanas Korchev]

Hello,

We are not sure the problem is caused by or related to the Kendo UI angular directives. Could you prepare a runnable demo in the Kendo UI dojo that reproduces the error?

Regards,
Atanas Korchev
Telerik

 

 

[Rajesh]

http://dojo.telerik.com/@rtv/AsAqi/6  

is a runnable demo that produces the error.

[Atanas Korchev]

Hi,

You shouldn't use double curly braces in the k-* options. So this is invalid  k-data-source="{{resourcedata}}" whereas this is valid:  k-data-source="resourcedata".

This seems to work: http://dojo.telerik.com/@korchev/AWEVA without the js error.



Regards,
Atanas Korchev
Telerik

 

 

[Rajesh]

Thanks so much. It works fine now.