Calling Remote Datasource with Kendo Mobile

2 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Jul 2012

    Posted 05 Jul 2012 Link to this post

    So I'll start by saying I'm brand new to Kendo UI Mobile, and I was walking through the Kendo Mobile UI tutorial and trying to get the datasource to load data from my local RailsApp. I'm running the mobile app on an Android Simulator and the data never returns...I just get a spinning circle at the bottom of the application. I'm not sure where I'm going wrong as I've copied and pasted the code from the Android version of the tutorial and changed it to match my local URLS ( I built it myself originally, but then decided to copy and paste when I ran into issues). Any help is greatly appreciated..Thanks

    Here's my code:

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Cordova</title>
    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.mobile.min.js"></script>
    <script type="text/javascript">
     
     
     
     
        // If you want to prevent dragging, uncomment this section
        /*
        function preventBehavior(e)
        {
          e.preventDefault();
        };
        document.addEventListener("touchmove", preventBehavior, false);
        */
     
     
        /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
        for more details -jm */
        /*
        function handleOpenURL(url)
        {
            // TODO: do something with the url passed in.
        }
        */
     
     
        function onBodyLoad()
        {      
            document.addEventListener("deviceready", onDeviceReady, false);
        }
     
     
        /* When this function is called, PhoneGap has been initialized and is ready to roll */
        /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
        for more details -jm */
        function onDeviceReady()
        {
            // do your thing!
        }
         
        </script>
    </head>
    <body onload= "onBodyLoad()">
    <div data-role="view" data-init="getInfo" data-layout="app" data-title="info" id="info">
        <div id="news">News Goes Here</div>
    </div>
    <div data-role="view" data-layout="app" data-init="getSessions" data-title="scheudle" id="scheudle">
        Schedule Goes Here
        <ul id="sessions"></ul>
    </div>
     
     
    <div data-role="layout" data-id="app">
        <header data-role="header">
            <div data-role="navbar">Conference Tracker</div>
        </header>
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a href="#info" data-icon="info">Info</a>
                <a href="#scheudle" data-icon="recents">Schedule</a>
            </div>
        </footer>
    </div>
     
     
    <script type="text/x-kendo-template" id="sessionsTemplate">
        <div class="left">
                <div class="time"> ${formatted_time }</div>
                <div class="speaker">${speaker}</div>
        </div>
     
     
        <div class="title">${title}</div>
     
     
    </script>
     
     
     <script>
     
     
            // creates the application UI
            var application = new kendo.mobile.Application($(document).body, { transition: "slide" });
     
     
            var infosUrl = "/infos.json"; //also tried full path here as well.
            var sessionsUrl = "/sessions.json";
     
     
            var getInfo = function() {
                // read from the remote data source
                $.get(infosUrl, function(data) {
                    $.each(data, function() {
                        $("#news").append("<p class='info'>" + this.content + "</p>");
                    });
                });
            }
     
     
            var getSessions = function() {
                $("#sessions").kendoMobileListView({
                    dataSource: kendo.data.DataSource.create({
                        transport: {
                            read: sessionsUrl
                        },
                        group: "day"
                    }),
                    template: $("#sessionsTemplate").html()
                });
            }
     
     
        </script>
    </body>
    </html>
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 11 Jul 2012 Link to this post

    Hello David,

     
    I believe that you will need to instantiate the Application in the onDeviceReady callback:

    function onDeviceReady() {
         application = new kendo.mobile.Application($(document).body, { transition: "slide" });
    }
    Thus you will guarantee that the init and show events of the View will be raised correctly.

    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top