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

7 posts, 0 answers
  1. Dan
    Dan avatar
    16 posts
    Member since:
    Aug 2014

    Posted 14 Apr 2015 Link to this post

    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

     

  2. Dan
    Dan avatar
    16 posts
    Member since:
    Aug 2014

    Posted 14 Apr 2015 in reply to Dan Link to this post

    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

  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 16 Apr 2015 Link to this post

    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:
    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!
     
  5. Dan
    Dan avatar
    16 posts
    Member since:
    Aug 2014

    Posted 16 Apr 2015 in reply to Alexander Valchev Link to this post

    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

  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 20 Apr 2015 Link to this post

    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!
     
  7. Dan
    Dan avatar
    16 posts
    Member since:
    Aug 2014

    Posted 20 Apr 2015 in reply to Petyo Link to this post

    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 again ---- please let me know if I am on the right track...

    Thanks!
    Dan

     

     

  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 22 Apr 2015 Link to this post

    Hello,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready