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

Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set

6 Answers 310 Views

SPA

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

Dan asked on 14 Apr 2015, 02:26 PM

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

-->

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

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

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

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

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

</head>

<body style="display: none;" kendo-mobile-application k-hash-bang="true" ng-app="gcdApp">

<div data-role="view"></div>

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

<kendo-mobile-header>

<kendo-mobile-nav-bar>

<kendo-view-title></kendo-view-title>

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

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

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

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

<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

answered on 16 Apr 2015, 07:31 AM

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

http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 16 Apr 2015, 01:38 PM

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

answered on 20 Apr 2015, 07:28 AM

Hello,

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!