It would be awesome if Kendo could be powered by Zepto instead of jQuery (optional of course) for mobile environments where we might not want to load all of jQuery.

Hello,

Does kendo grid (angularJS) has a directive for row created/updated events? Something like k-on-change for row selection but triggered when row has been created/updated.

If no are there any workarounds to get this event?

Thank you,

Nick

Hi,

I'd like to create an angular kendo stacked bar chart where the same key repeats multiple times.

To illustrate, I want to use the k-series and k-datasource like the following

<div kendo-chart
             k-chart-area='{background:"", height:40, width:800}'
             k-series-defaults="{ overlay: {gradient: 'none'},type: 'bar', markers: { visible: false }, stack: 'true' }"
             k-series="[
                            {name: 'App Stopped', field: 'stoppedDuration', color: '#65c178', labels: {visible: 'true', position: 'left', background: ''} },
                            {name: 'App Started', field: 'runningDuration', color: '#5da2f7', labels: {visible: 'true', position: 'left', background: ''}}
                       ]"
             k-data-source="thismonthseventdata"
             k-value-axis="{labels: { format: '{0}' }, visible: false, majorGridLines: { visible: false }, majorTicks: { visible: false, width: 0 }, axisCrossingValue:0}"
             k-category-axis="{line: { visible: false }, majorGridLines: { visible: false }, majorTicks: { visible: false, width: 0 }}"
                >
        </div>

in the scope variable thismonthseventdata, I'd like to have the same key repeat itself. i.e 

thismonthseventdata.data([{runningDuration:3, stoppedDuration:5, runningDuration:3}]);

This is however not possible since I cannot have a javascript object with duplicate keys. How can I achieve this with kendo stack charts and angular ?

I know I can do this with k-series only without a k-datasource but the data cannot bind to dynamic scope data.

Thanks,
Rajesh

Hi,


I noticed that kendoUI.all.min.js take about 10 seconds to load in my machine. Is that normal?

Because when I looked at the demos the kendo JS just take 2 secs to load.

How can I make it faster?


Thanks.

Hi,

I'm using kendo ui with angularjs,
I have a grid with row template.
I added ng-dblclick event on the row (or on the grid) in order to edit the row on double click.
on the first row I double clicked everythiong works fine, but when I click on another row I get an error which I didn't find a way to solve.

I created a similar plunker to demonstrate the problem:

http://plnkr.co/edit/w2KyuC9zl1832iemydP3?p=preview

Thanks,
Idan.

Hello,
This is also seen in the demo page:
http://demos.telerik.com/kendo-ui/treeview/angular.

If you expand a node, the text is {{dataItem.text}} and button click doesn't do any action.

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

I have a TabStrip that I initialize with an ObservableArray. Any set calls to the datasource is honoured and the changes show up on the tabstirp. However if I do the same set call after a time delay the changes are not reflected.

I have a $resource call to update the value of each tab content and the call to set the content on response never shows up on the tab.

Should I refresh the tabstip after setting the content again.

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

I am using IBM Worklight Studio, Kendo UI and Angular JS.  I want a basic mobile app with a header(nav bar), footer(tab strip) and a content area in the middle that will be populated based on the Angular JS route.

Using Kendo UI without Angular JS, everything is great.  The screen is formatted nicely, fonts are crisp and all is well.  See the 1st image attached below.

Using Kendo UI with Angular JS for routing, and things don't look as nice.  I can't get the tab bar to stay at the bottom of the screen.  It seems to be directly under the content, but is not fixed to the bottom of the visible area.  Also, the fonts and images for the data icons don't look as nice.  The app basically works ok.  I can click on a tab bar item and Angular will route the request and show me the correct view.  But it seems that the Kendo UI elements aren't displaying correctly.

Code snippets are shown below.  If you have any recommendations I'd appreciate it.  Thanks.


Sample Code - IBM Worklight and Kendo UI - index.html

Sample Code - IBM Worklight, Kendo UI and Angular JS

index.html

01.<!DOCTYPE HTML>

02.<html>

03.        <head>

04.            <meta charset="UTF-8">

05.            <title>Test App</title>

06.            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

07.            <!--

08.                <link rel="shortcut icon" href="images/favicon.png">

09.                <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

10.            -->

11.             

12.            <!-- CSS -->

13.            <link rel="stylesheet" href="css/main.css">

14.             

15.            <link href="js/libs/kendoui/styles/kendo.mobile.all.min.css" rel="stylesheet" />

16.            <link href="js/libs/kendoui/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

17.            <link href="js/libs/kendoui/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />

18.            <link href="js/libs/kendoui/styles/kendo.silver.mobile.min.css" rel="stylesheet" type="text/css" />

19.            <link href="js/libs/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

20.            <link href="js/libs/kendoui/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

21.             

22.             

23.            <!-- jQuery -->

24.            <!-- Using the jQuery in Kendo UI -->

25.            <script src="js/libs/kendoui/js/jquery.min.js"></script>

26.             

27.            <!-- Angular JS -->

28.            <script src="js/libs/angular/1.3/angular.min.js"></script>

29.            <script src="js/libs/angular/1.3/angular-route.min.js"></script>

30.             

31.            <!-- application scripts -->

32.            <script src="js/app.js"></script>

33.             

34.            <!--  Controllers -->

35.            <script src="js/controllers/login.js"></script>

36.            <script src="js/controllers/customers.js"></script>

37.             

38.<!--            <script>window.$ = window.jQuery = WLJQ;</script> -->

39.             

40.             

41.             

42.        </head>

43.        <body style="display:none;">

44.            <div>

45.                <!--application UI goes here-->

46.                 

47.                <!-- Header -->

48.                <kendo-mobile-header>

49.                    <kendo-mobile-nav-bar>

50.                        <kendo-view-title>Test App</kendo-view-title>

51.                    </kendo-mobile-nav-bar>

52.                </kendo-mobile-header>

53. 

54. 

55.                <!-- Main Content -->

56.                <div>

57.                    <div class="main" ng-view></div>

58.                </div>

59.                 

60.                <!-- Footer -->

61.                <kendo-mobile-footer>

62.                    <kendo-mobile-tab-strip>

63.                            <a href="#/" data-icon="contacts">Welcome</a>

64.                            <a href="#/customers" data-icon="home">Accounts</a>

65.                    </kendo-mobile-tab-strip>

66.                </kendo-mobile-footer>

67. 

68. 

69.            </div>

70.             

71.            <!-- Standard Worklight Stuff -->

72.            <script src="js/initOptions.js"></script>

73.            <script src="js/main.js"></script>

74.            <script src="js/messages.js"></script>

75.             

76.            <!--  Kendo UI -->

77.            <script src="js/libs/kendoui/js/kendo.all.min.js"></script>

78.             

79.            <script type="text/javascript">

80.                WL.Logger.debug("Loading main page");

81.            </script>

82.        </body>

83.</html>

main.js

1.console.log("Loading Angular");

2.    angular.element(document).ready(function() {

3.         angular.bootstrap(document, ['App']);

4.         location.hash = "/login";

5.     });

app.js

01.var app = angular.module('App', ['ngRoute','kendo.directives']);

02.app.config(['$routeProvider', function($routeProvider) {

03.     $routeProvider.when('/customers',

04.     {

05.         templateUrl:'views/customers.html',

06.         controller: 'CustomersController'

07.     }).

08.     when('/login',

09.     {

10.         templateUrl:'views/login.html',

11.             controller: 'LoginController'

12.     }).

13.     otherwise({

14.         redirectTo: '/login'

15.     });;

16.}]);

customers.js - Controller

1.app.controller('CustomersController',

2.    function($scope) {

3.        $scope.custdata = {

4.            'custno':'12345',

5.            'custname':'JK, Inc'

6.        };

7.    }

8.);

login.js - Controller

login.html - View No. 1

1.<h1>This is the login page</h1>

2.<br />

3.<br />

4.Username is {{username}}

5.<br />

6.<a href="#/customers">Go to Customers</a>

customers.html - View No. 2

1.<h1>This is the Customers page</h1>

2.        <br />

3.        <br />

4.        Customer Number: {{custdata.custno}}

5.        <br />

6.        Customer Name: {{custdata.custname}}

7.        <br />

8.        <a href="#/login">Go to Login</a>

Does the mobile listview directive support endlessScroll and pullToRefresh?  I'm attempting to use a DataSource to execute a filtered odata query to retrieve the items for the list view and I am setting the pageSize, serverPaging, serverSorting, serverFiltering, filter, and sort properties on the DataSource.  I am also setting k-endless-scroll="true" and k-pull-to-refresh="true".

The listview loads the first paged set when I don't try to implement endlessScroll or pullToRefresh.  However, when I add k-pull-to-refresh="true" the message "Cannot read property 'setOptions' of undefined" is logged in the console.  When I add k-endless-scroll="true" the message "Cannot read property 'makeVirtual' of undefined" is logged in the console.  When debugging both errors scroller is undefined.