Cordova+KendoUI+AngularJS

8 posts, 1 answers
  1. Greg
    Greg avatar
    3 posts
    Member since:
    Feb 2011

    Posted 25 Feb 2015 Link to this post

    Hello.

    I am trying to implement angularjs + kendo ui mobile in my cordova application.
    I've followed your tutorial(http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial) but without success.

    When I use the following code:
    <!DOCTYPE html>
    <html >
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
        <title>TestApp.Mobile</title>
        <link href="css/kendoui/kendo.mobile.all.min.css" rel="stylesheet">
        <link href="css/index.css" rel="stylesheet" />       
             
    </head>
    <body kendo-mobile-application ng-app="testApp">
     
        <kendo-mobile-view id="index" ng-controller="indexController">
            Home View
        </kendo-mobile-view>
        <!--<div data-role="view" id="index" ng-controller="indexController">
            Index View
            <p>{{ testString }}</p>
        </div>-->
     
        <script src="cordova.js"></script>
        <script src="scripts/fw/kendoui/jquery.min.js"></script>
        <script src="scripts/fw/angular/angular.min.js"></script>
        <script src="scripts/fw/kendoui/kendo.all.js"></script>
        <script>
            angular.module('testApp', ['kendo.directives'])
            .controller('indexController', ['$scope', function ($scope) {
                $scope.testString = "Test";
            }]);
     
     
            document.addEventListener("deviceready", function () {
     
            }, false);
        </script>
    </body>
    </html>

    I always get the following error:
    Uncaught TypeError: Cannot call method 'triggerBeforeShow' of undefined

    When I use the following code:
    <!DOCTYPE html>
    <html >
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
        <title>TestApp.Mobile</title>
        <link href="css/kendoui/kendo.mobile.all.min.css" rel="stylesheet">
        <link href="css/index.css" rel="stylesheet" />       
             
    </head>
    <body kendo-mobile-application ng-app="testApp">
     
        <!--<kendo-mobile-view id="index" ng-controller="indexController">
            Home View
        </kendo-mobile-view>-->
        <div data-role="view" id="index" ng-controller="indexController">
            Index View
            <p>{{ testString }}</p>
        </div>
     
        <script src="cordova.js"></script>
        <script src="scripts/fw/kendoui/jquery.min.js"></script>
        <script src="scripts/fw/angular/angular.min.js"></script>
        <script src="scripts/fw/kendoui/kendo.all.js"></script>
        <script>
            angular.module('testApp', ['kendo.directives'])
            .controller('indexController', ['$scope', function ($scope) {
                $scope.testString = "Test";
            }]);
     
     
            document.addEventListener("deviceready", function () {
     
            }, false);
        </script>
    </body>
    </html>

    I get the following:
    Uncaught Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.

    Could you please suggest some solution?

    Thank you.
  2. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 26 Feb 2015 in reply to Greg Link to this post

    get rid of this bit (this is more for kendo mvvm) :
    <div data-role="view" id="index" ng-controller="indexController">
            Index View
            <p>{{ testString }}</p>
     </div>

    Your commented out part should be more correct:
    <kendo-mobile-view id="index" ng-controller="indexController">
            Home View
    </kendo-mobile-view>
    and add more scope parts within the kendo-mobile-view

    if you are putting it on a device ... you will find that ng-app="testApp" is not quite good enough and you will need to bootstrap the angular and js together in the device ready method.

    Here is the index of one of my demo projects if i missed anything else that is obvious ;)

    Best of luck
    Matt

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="x-ua-compatible" content="IE=EmulateIE10"/>
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="scripts/angular/angular.min.js"></script>
        <script src="scripts/angular/angular-animate.js"></script>
        <script src="kendo/js/kendo.all.min.js"></script>
     
        <script src="scripts/app.js"></script>
         
    </head>
    <body kendo-mobile-application id="BasicApp" k-layout="'main'" k-skin="'ios7'" k-initial="'home'" >
     
        <kendo-mobile-view id="home" k-title="'Home'" k-layout="'main'">
            <a class="km-button" href="#views/sample-demo.html">Sample's listview</a>
     
            <a class="km-button" href="#views/home-simple.html">
                listview no links - doesnt work
            </a>
            <br />
            <a class="km-button" href="#views/home-i-kill.html">
                I normally make things break.
            </a>
            <br />
            <a class="km-button" href="#views/home-i-ngrepeat.html">
                I work with ng-repeat
            </a>
            <br />
            <a class="km-button" href="#views/home-i-work.html">
                I work with mvvm template mixed in.
            </a>
     
        </kendo-mobile-view>
     
     
        <kendo-mobile-layout k-id="'main'">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                    <a kendo-mobile-button="" k-align="'left'" href="#right-drawer" k-rel="'drawer'" data-role="button" class="km-widget km-button" data-rel="drawer" data-align="left"><span class="km-text"><i class="icon ion-navicon-round"></i> Menu</span></a>
                    <kendo-view-title></kendo-view-title>
                    <kendo-mobile-back-button id="back-button" k-align="'right'">Back</kendo-mobile-back-button>
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
     
            <!-- application views will be rendered here -->
     
        </kendo-mobile-layout>
     
        <kendo-mobile-layout k-id="'second'">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                    <a kendo-mobile-button="" k-align="'left'" href="#right-drawer" k-rel="'drawer'" data-role="button" class="km-widget km-button" data-rel="drawer" data-align="left"><span class="km-text"><i class="icon ion-navicon-round"></i> Menu</span></a>
                    <kendo-view-title></kendo-view-title>
                    <kendo-mobile-back-button id="back-button" k-align="'right'">Back</kendo-mobile-back-button>
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
     
            <!-- application views will be rendered here -->
     
     
            <kendo-mobile-footer>
                <kendo-mobile-tab-strip>
                    <a class="km-button" href="#views/home-i-kill.html" data-icon="contacts">
                        angularjs - kills
                    </a>
                    <a class="km-button" href="#views/home-i-ngrepeat.html" data-icon="club">
                        ng-repeat - works
                    </a>
                    <a class="km-button" href="#views/home-i-work.html" data-icon="trophy">
                        mvvvm - works
                    </a>
                </kendo-mobile-tab-strip>
            </kendo-mobile-footer>
        </kendo-mobile-layout>
     
        <!-- application drawer and contents -->
        <kendo-mobile-drawer id="right-drawer" style="width: 270px" k-title="'Navigation'">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                    <kendo-view-title></kendo-view-title>
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
     
            <ul kendo-mobile-list-view>
                <li>
                    <a href="#home">
                        Home
                    </a>
                </li>
                <li>
                    <a href="#views/home-i-kill.html">
                        I just kill
                    </a>
                </li>
                <li>
                    <a href="#views/home-i-ngrepeat.html">
                        I work with ng-repeat
                    </a>
                </li>
                <li>
                    <a href="#views/home-i-work.html">
                        I work with mvvm template mixed in.
                    </a>
                </li>
                <li>
                    <a href="#views/contacts2.html">straight to alert</a>
                </li>
            </ul>
        </kendo-mobile-drawer>
     
    </body>
    </html>
  3. Answer
    Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 26 Feb 2015 in reply to Greg Link to this post

    My first reply crashed... here is a more basic second.

    Uncomment the "kendo-mobile-view" element section and you have a angular mobile view.

    Take out the 'div data-role="view"' element section - this is for kendo mobile mvvm and not angular.

    You may want to define the initial view to load, but my memory suggests it picks the first view anyway.

    Here is one of my index.html test pages that work:
    I load angular using bootstrap as well, as ng-app on the device wont work, due to the device ready event


    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="x-ua-compatible" content="IE=EmulateIE10"/>
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="scripts/angular/angular.min.js"></script>
        <script src="scripts/angular/angular-animate.js"></script>
        <script src="kendo/js/kendo.all.min.js"></script>
     
        <script src="scripts/app.js"></script>
         
    </head>
    <body kendo-mobile-application id="BasicApp" k-layout="'main'" k-skin="'ios7'" k-initial="'home'" >
     
        <kendo-mobile-view id="home" k-title="'Home'" k-layout="'main'">
            <a class="km-button" href="#views/sample-demo.html">Sample's listview</a>
     
            <a class="km-button" href="#views/home-simple.html">
                listview no links - doesnt work
            </a>
            <br />
            <a class="km-button" href="#views/home-i-kill.html">
                I normally make things break.
            </a>
            <br />
            <a class="km-button" href="#views/home-i-ngrepeat.html">
                I work with ng-repeat
            </a>
            <br />
            <a class="km-button" href="#views/home-i-work.html">
                I work with mvvm template mixed in.
            </a>
     
        </kendo-mobile-view>
     
     
        <kendo-mobile-layout k-id="'main'">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                    <a kendo-mobile-button="" k-align="'left'" href="#right-drawer" k-rel="'drawer'" data-role="button" class="km-widget km-button" data-rel="drawer" data-align="left"><span class="km-text"><i class="icon ion-navicon-round"></i> Menu</span></a>
                    <kendo-view-title></kendo-view-title>
                    <kendo-mobile-back-button id="back-button" k-align="'right'">Back</kendo-mobile-back-button>
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
     
            <!-- application views will be rendered here -->
     
        </kendo-mobile-layout>
     
        <kendo-mobile-layout k-id="'second'">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                    <a kendo-mobile-button="" k-align="'left'" href="#right-drawer" k-rel="'drawer'" data-role="button" class="km-widget km-button" data-rel="drawer" data-align="left"><span class="km-text"><i class="icon ion-navicon-round"></i> Menu</span></a>
                    <kendo-view-title></kendo-view-title>
                    <kendo-mobile-back-button id="back-button" k-align="'right'">Back</kendo-mobile-back-button>
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
     
            <!-- application views will be rendered here -->
     
     
            <kendo-mobile-footer>
                <kendo-mobile-tab-strip>
                    <a class="km-button" href="#views/home-i-kill.html" data-icon="contacts">
                        angularjs - kills
                    </a>
                    <a class="km-button" href="#views/home-i-ngrepeat.html" data-icon="club">
                        ng-repeat - works
                    </a>
                    <a class="km-button" href="#views/home-i-work.html" data-icon="trophy">
                        mvvvm - works
                    </a>
                </kendo-mobile-tab-strip>
            </kendo-mobile-footer>
        </kendo-mobile-layout>
     
        <!-- application drawer and contents -->
        <kendo-mobile-drawer id="right-drawer" style="width: 270px" k-title="'Navigation'">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                    <kendo-view-title></kendo-view-title>
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
     
            <ul kendo-mobile-list-view>
                <li>
                    <a href="#home">
                        Home
                    </a>
                </li>
                <li>
                    <a href="#views/home-i-kill.html">
                        I just kill
                    </a>
                </li>
                <li>
                    <a href="#views/home-i-ngrepeat.html">
                        I work with ng-repeat
                    </a>
                </li>
                <li>
                    <a href="#views/home-i-work.html">
                        I work with mvvm template mixed in.
                    </a>
                </li>
                <li>
                    <a href="#views/contacts2.html">straight to alert</a>
                </li>
            </ul>
        </kendo-mobile-drawer>
     
    </body>
    </html>

    Best of luck, Matt
  4. Greg
    Greg avatar
    3 posts
    Member since:
    Feb 2011

    Posted 27 Feb 2015 in reply to Matt Link to this post

    Matt, thank you for your replay.
    I've made all suggested changes and here is my code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
        <title>TestApp.Mobile</title>
        <link href="css/kendoui/kendo.mobile.all.min.css" rel="stylesheet">
        <link href="css/index.css" rel="stylesheet" />     
         
        <script src="cordova.js"></script>
        <script src="scripts/fw/kendoui/jquery.min.js"></script>
        <script src="scripts/fw/angular/angular.min.js"></script>
        <script src="scripts/fw/kendoui/kendo.all.js"></script>
             
    </head>
    <body kendo-mobile-application id="BasicApp" k-layout="'main'" k-skin="'ios7'" k-initial="'home'">
     
        <kendo-mobile-view id="home" k-title="'Home'" k-layout="'main'">
            <a class="km-button" href="#views/sample-demo.html">Sample's listview</a>
     
            <a class="km-button" href="#views/home-simple.html">
                listview no links - doesnt work
            </a>
            <br />
            <a class="km-button" href="#views/home-i-kill.html">
                I normally make things break.
            </a>
            <br />
            <a class="km-button" href="#views/home-i-ngrepeat.html">
                I work with ng-repeat
            </a>
            <br />
            <a class="km-button" href="#views/home-i-work.html">
                I work with mvvm template mixed in.
            </a>
     
        </kendo-mobile-view>
     
     
        <kendo-mobile-layout k-id="'main'">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                    <a kendo-mobile-button="" k-align="'left'" href="#right-drawer" k-rel="'drawer'" data-role="button" class="km-widget km-button" data-rel="drawer" data-align="left"><span class="km-text"><i class="icon ion-navicon-round"></i> Menu</span></a>
                    <kendo-view-title></kendo-view-title>
                    <kendo-mobile-back-button id="back-button" k-align="'right'">Back</kendo-mobile-back-button>
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
     
            <!-- application views will be rendered here -->
     
        </kendo-mobile-layout>
     
        <kendo-mobile-layout k-id="'second'">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                    <a kendo-mobile-button="" k-align="'left'" href="#right-drawer" k-rel="'drawer'" data-role="button" class="km-widget km-button" data-rel="drawer" data-align="left"><span class="km-text"><i class="icon ion-navicon-round"></i> Menu</span></a>
                    <kendo-view-title></kendo-view-title>
                    <kendo-mobile-back-button id="back-button" k-align="'right'">Back</kendo-mobile-back-button>
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
     
            <!-- application views will be rendered here -->
     
     
            <kendo-mobile-footer>
                <kendo-mobile-tab-strip>
                    <a class="km-button" href="#views/home-i-kill.html" data-icon="contacts">
                        angularjs - kills
                    </a>
                    <a class="km-button" href="#views/home-i-ngrepeat.html" data-icon="club">
                        ng-repeat - works
                    </a>
                    <a class="km-button" href="#views/home-i-work.html" data-icon="trophy">
                        mvvvm - works
                    </a>
                </kendo-mobile-tab-strip>
            </kendo-mobile-footer>
        </kendo-mobile-layout>
     
        <!-- application drawer and contents -->
        <kendo-mobile-drawer id="right-drawer" style="width: 270px" k-title="'Navigation'">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                    <kendo-view-title></kendo-view-title>
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
     
            <ul kendo-mobile-list-view>
                <li>
                    <a href="#home">
                        Home
                    </a>
                </li>
                <li>
                    <a href="#views/home-i-kill.html">
                        I just kill
                    </a>
                </li>
                <li>
                    <a href="#views/home-i-ngrepeat.html">
                        I work with ng-repeat
                    </a>
                </li>
                <li>
                    <a href="#views/home-i-work.html">
                        I work with mvvm template mixed in.
                    </a>
                </li>
                <li>
                    <a href="#views/contacts2.html">straight to alert</a>
                </li>
            </ul>
        </kendo-mobile-drawer>
     
        <script type="text/javascript">
            document.addEventListener("deviceready", function () {
     
                angular.module('testApp', ['kendo.directives'])
                  .controller('MyController', ['$scope', function ($scope) {
                      $scope.greetMe = 'World';
                  }]);
     
                angular.element().ready(function () {
                    angular.bootstrap(document, ['testApp']);
                });
     
            }, false);
        </script>
     
    </body>
    </html>

    Now it gives me the following error:
    Uncaught TypeError: Cannot read property 'options' of undefined
    File: kendo.all.js, Line: 49072, Column: 0

    I've made a brief review of kendo ui library and it seems that it cannot to create instance of "layout" widget.
    The error occurs during angular element compilation.

    Thanks for any help on this.
  5. Greg
    Greg avatar
    3 posts
    Member since:
    Feb 2011

    Posted 27 Feb 2015 Link to this post

    Matt, finally I've found a reason of the issue.
    I have been using the wrong version of angularjs library.
    Now, your code works well.

    Thank you.
  6. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 02 Mar 2015 in reply to Greg Link to this post

    No problem and well spotted with the angular js version.

    I did finally manage to get a app release with Angular JS, Kendo UI and mobile on IOS, Android and WP. So it is quite possible to get everything working. WP being the most troubling of the three.

    There were quite a few quirks that I had to jump through but it did work in the end. Version 2 im moving to ionic (even more fun on the windows phone)... but im still using kendo ui in it ... just less mobile.

    If you run into any more problems I may be able to help ;-)


    Thanks, Matt
  7. Cordova
    Cordova avatar
    1 posts
    Member since:
    Apr 2015

    Posted 24 Apr 2015 Link to this post

    hello there !

     

    There is a website who having free tutorials on Cordova/phonegap just try it out now  : Cordova from Bortskytv

  8. vlas
    vlas avatar
    2 posts
    Member since:
    Sep 2014

    Posted 10 Feb Link to this post

    i am using Kendo Mobile Angular js,i am unable get the mobile Device ID and Device Platform in angular,how to achieve it..?
Back to Top