I am receiving this error when attempting to use Kendo UI Mobile /SPA features:
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
I have one index.html page:
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>Global Client Dashboard</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"><!--<link rel="shortcut icon" href="images/favicon.png"><link rel="apple-touch-icon" href="images/apple-touch-icon.png"> --><!-- CSS --><link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="css/login.css"><link rel="stylesheet" href="js/libs/kendoui/styles/kendo.mobile.all.min.css"><!-- jQuery --><!-- Using the jQuery in Kendo UI --><script src="js/libs/kendoui/js/jquery.min.js"></script><!-- Angular JS --><script src="js/libs/kendoui/js/angular.min.js"></script><!-- Kendo UI --><script src="js/libs/kendoui/js/kendo.all.min.js"></script><!-- application scripts --><script src="js/app.js"></script></head><body style="display: none;" kendo-mobile-application k-hash-bang="true" ng-app="gcdApp"> <!-- Default View - needed for routing --> <div data-role="view"></div> <!-- Header and Footer --> <kendo-mobile-layout k-id="'default'"> <kendo-mobile-header> <kendo-mobile-nav-bar> <kendo-view-title></kendo-view-title> <!-- <kendo-mobile-button class="about-button" k-align="'right'" href="views/about.html">About</kendo-mobile-button> --> </kendo-mobile-nav-bar> </kendo-mobile-header> <kendo-mobile-footer> <kendo-mobile-tab-strip> <a href="views/accounts.html" data-icon="home">Home</a> <a href="views/about.html" data-icon="info">About</a> <a href="views/more.html" data-icon="more">More</a> </kendo-mobile-tab-strip> </kendo-mobile-footer> </kendo-mobile-layout> <script> new kendo.mobile.Application($(document.body), { initial: "views/login.html" }); </script> <!-- Standard Worklight Stuff --> <script src="js/initOptions.js"></script> <script src="js/main.js"></script> <script src="js/messages.js"></script> <!-- Controllers --> <script src="js/controllers/controllers.js"></script> <script src="js/controllers/accounts.js"></script> <script src="js/controllers/metrics.js"></script></body></html>I followed this tutorial to get this page up and running:
http://blogs.telerik.com/kendoui/posts/13-08-01/kendo-ui-mobile-remote-views-and-separate-html-files
I found this post in the forum, however, I am not sure how to plug into my index.html to get to work:
http://www.telerik.com/forums/problems-getting-kendo-to-work
I was hoping to get some help to get this to work correctly.
Thanks!
Dan
6 Answers, 1 is accepted
Rank 1
I am now receiving this error that occurs before the error listed above:
Error: kendoMobileApplication attribute used but expression in it is not assignable: kendo-mobile-application
I am not sure where this is happening -- either in the body tag or the script tag at the bottom of the index.html shown above... Any ideas would be great...
Thanks!
Dan
You are using a mixture of different syntax which is not supported. At first lets clear what type of application you would like to build - Kendo Mobile Application or Kendo Angular Mobile Application?
In case you want to build Kendo Angular Mobile Application please check this tutorial:
My recommendation is to start developing in a single file as it will be easier to understand the basics. When you have two or three working mobile Views start creating the project structure and divide the application in separate files.
Regards,
Alexander Valchev
Telerik
Rank 1
What is the mixture of different syntax that I am using? The application is based off the sushi tutorial so I am guessing a Kendo Angular Mobile Application. This application was handed to me and I am trying to add a Login page as well as making this a SPA application.
I guess my question is -- what I am doing wrong and what can and cannot be used to get this to work? Is there a way you can show me sample code on how to get this to work?
I follow these links and read the information, but still come out with questions and coding incorrectly. I am hoping that someone can edit my code to show where I am incorrect.
The application was on one page and my task is to break out to separate files. The login.html opens up first, but I get the error listed in the first post every time. How do I fix that error?
I really could use some help, not just links to other pages -- I learn better by seeing my mistakes and how those mistakes are fixed.
My last question -- in your opinion, should we be using Kendo as the framework with IBM Worklight and Angular?
Thanks!
Dan
the snippet you have posted uses both the kendo-mobile-application AngularJS directive and the regular new kendo.mobile.Application() instantiation. In case you are going to use AngularJS, you should stick to the directive syntax and remove the other one.
regarding your other question - Kendo UI is the first choice for UI toolkits according to the AngularJS docs. We are not familiar with the IBM Worklight project, but as long as it exposes REST/JSON service endpoints, you should be able to integrate it without much hassle.
Regards,
Petyo
Telerik
Rank 1
Petyo,
Thanks for the response -- I see what to do now.
To set up the initial page to load (the login.html page), how do I do that using kendo-mobile-application in the <body> tag?
Something like this?:
<body style="display: none;" kendo-mobile-application k-initial="views/login.html" k-hash-bang="true" ng-app="gcdApp">Thanks!
Dan
you need to pass this option as a string. Please review this part of the AngularJS documentation. The rest of the article is worth checking, too, as it outlines the basics of the Kendo UI/AngularJS integration.
Regards,
Petyo
Telerik