This is a migrated thread and some comments may be shown as answers.

Cordova+KendoUI+AngularJS

7 Answers 419 Views

Apache Cordova

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Greg asked on 25 Feb 2015, 04:50 PM

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.

7 Answers, 1 is accepted

answered on 26 Feb 2015, 11:32 PM

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>

</kendo-mobile-layout>

<kendo-mobile-layout k-id="'second'">

<kendo-mobile-header>

<kendo-mobile-nav-bar>

<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>

<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>

<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>

Accepted

answered on 26 Feb 2015, 11:39 PM

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>

<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>

</kendo-mobile-layout>

<kendo-mobile-layout k-id="'second'">

<kendo-mobile-header>

<kendo-mobile-nav-bar>

<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>

<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>

<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

answered on 27 Feb 2015, 09:30 AM

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>

<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>

</kendo-mobile-layout>

<kendo-mobile-layout k-id="'second'">

<kendo-mobile-header>

<kendo-mobile-nav-bar>

<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>

<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>

<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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Cordova+KendoUI+AngularJS

7 Answers, 1 is accepted