Load html content of an external file onto ScrollView

4 posts, 1 answers
  1. Antonio
    Antonio avatar
    15 posts
    Member since:
    Oct 2012

    Posted 10 Apr 2013 Link to this post

    Hi,

    Is there a way to load a content of an external file onto a ScrollView?

    Suppose I have a file named data.html with the following content:

    data.html
    <b>
    This is a sample text in data.html
    </b>


    Then I have a kendoUI page like this:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>

    <link href="css/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="css/kendo.default.min.css" rel="stylesheet" type="text/css" />
        <link href="css/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="css/TON/generic.css" rel="stylesheet" type="text/css" />

    <script src="cordova-2.5.0.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.mobile.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
        
        <body>
            <!-- This is our Main Tab -->
            <div data-role="view" id="pregnancyarticledetails" data-layout="default" data-title="Shocker" data-init="mobileListViewDataBindInitFlat">

                <div id="article_content">
                <div style="height:5px;">&nbsp;</div>
                    <div id="pregnancy_detail" data-role="scroller" class="scroller-content"></div>
                    <div style="height:76px;">&nbsp;</div>
                </div>
                </div>

     <script>
    $("#pregnancy_detail").load("data.html");
    </script>
        
        </body>
    </html> 


    The ScrollView seems to be empty. Has anyone done something like this? Any ideas you can share please? Thanks!

    Antonio
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 11 Apr 2013 Link to this post

    Hi Antonio,

    You don't have any ScrollView in your example, I'll assume you actually talk about the Scroller.

    The Kendo UI Mobile Scroller has an internal container that holds the scrolling content, check the scrollElement Scroller property which you can use to load contents in it.

    Greetings,
    Kamen Bundev
    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
  4. Answer
    Antonio
    Antonio avatar
    15 posts
    Member since:
    Oct 2012

    Posted 24 Apr 2013 Link to this post

    Thanks! I tried this out.

    It took me awhile though to figure out that it is actually the html() method within scollElement.

    var scroller = $("#babycare_detail").kendoMobileScroller();<br>scroller.data("kendoMobileScroller").scrollElement.html("<b>Blah blah blah...</b>");

    Can this be added to the documentation please? I'm sure some people have the same/similar questions like this.

    Thanks!
    Antonio
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 26 Apr 2013 Link to this post

    Hello Antonio,

    There is now a fields section in both View and Scroller articles that have examples how to replace the content.

    Greetings,
    Kamen Bundev
    the Telerik team
    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