Problems getting Kendo to work

[Matt]

I can not get Kendo to load am an using coding from a demo but I get an error in the Javascript console.
Here is the error:
"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. kendo.all.min.js:32k.extend.initkendo.all.min.js:32s.extend.initkendo.all.min.js:33(anonymous function)kendo.all.min.js:33cjquery.min.js:3p.fireWithjquery.min.js:3b.extend.readyjquery.min.js:3H"

Any help would be great.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_main" Runat="Server">
<link href="./includes/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="./includes/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
<link href="./includes/Kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="./includes/Kendo/js/jquery.min.js"></script>
<script src="./includes/Kendo/js/kendo.all.min.js"></script>

     <div data-role="view" data-title="Views">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Sources
            <ul>
                <li><a href="#secondview">Local View</a></li>
                <li><a href="../../content/mobile/view/remoteview.html">Remote View</a></li>
            </ul>
        </li>
    </ul>

    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Types
            <ul>
                <li><a href="#stretchview">Stretched View</a></li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="view" id="secondview" data-layout="mobile-view" data-title="Local View">
    <div style="background: url(../../content/shared/images/patterns/pattern7.png); color: #fff; padding: 50px 0; text-align: center;"><p>Hi, I'm a local view.</p></div>
</div>

<div data-role="view" id="stretchview" data-layout="mobile-view" data-title="Stretched View" data-stretch="true">
    <div style="background: url(../../content/shared/images/patterns/pattern7.png); color: #fff; padding-top: 50px; text-align: center;"><p>Hi, I'm a stretched view.</p><p>Use me for full screen content that doesn't need scrolling.</p></div>
</div>

<div data-role="layout" data-id="mobile-view">
    <header data-role="header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</asp:Content>

[Alexander Valchev]

Hello Matt,

You are receiving the error because the application container (in your case that is the document.body) does not contain <div> element with data-role="view" as immediate child. You can verify this by checking the source code of the page.
I assume that the ASP.NET framework which you use, wraps the content in an element. One possible solution is to use standard HTML pages. Another is to select the appropriate application container.

var app = new kendo.mobile.Application(<your jQuery selector>);

Regards,
Alexander Valchev
the Telerik team

[Matt]

I do not know what you mean by <your jQuery selector>; ?

[Alexander Valchev]

Hello Matt,

I will try to illustrate this with an example:

The following code will cause an error:

<div id="main">
    <div id="foo" data-role="view">
        foo
    </div>
</div>
<script>
    var app = new kendo.mobile.Application();
</script>

Because the <div> element with data-role="view" is not a direct child of the document.body element.
You can test it here: http://jsbin.com/uvepic/2/edit

The following code will not cause an error:

<div id="main">
    <div id="foo" data-role="view">
        foo
    </div>
</div>
<script>
    var app = new kendo.mobile.Application($("#main"));
</script>

Because the <div> element with data-role="view" is a direct child of the application container (#main).
You can test it here: http://jsbin.com/uvepic/4/edit

<your jQuery selector> is the mobile application container.

Kind regards,
Alexander Valchev
the Telerik team

[Bach]

Hi Alexander Valchev,

I encountered the same issue, I made a simple page using Kendo Mobile as below then the screen return blank:

01.<body>
02.
03.    <div id="mobileContainer">
04.        <div id="home" data-role="view" data-layout="default">
05.            My first app
06.        </div>
07.
08.        <div data-id="default" data-role="layout">
09.            <div data-role="header">
10.                <div data-role="navbar">My First Web App</div>
11.            </div>
12.            <div data-role="footer">
13.                <div data-role="tabstrip">
14.                    <a href="#home">Home</a>
15.                </div>
16.            </div>
17.        </div>
18.    </div>
19.    <script type="text/javascript">
20.        var sampleApp = new kendo.mobile.Application($("#mobileContainer"),{
21.            platform: 'ios'
22.        });
23.    </script>
24.
25.</body>

If I remove the "mobileContainer" div and replace "$('#mobileContainer')" by "document.body" the screen rendered correctly.

Thanks & Regards,

[Alexander Valchev]

Hello Bach,

This happens because the div#mobileContainer element does not have height. To fix the issue please use the following CSS:

html, body, #mobileContainer { height: 100%; }
body { margin: 0; padding: 0; }

For your convenience I prepared a small sample: http://jsbin.com/amuvep/2/edit

Regards,
Alexander Valchev
Telerik

[Bach]

Thanks Alexander, it works great.