Why is my ScrollView not initializing ?

2 posts, 0 answers
  1. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 24 Oct 2014 Link to this post

    Hello,

    I am trying to append a scroll view that will load once I know the height ( I want it to be adapted to the phone screen )

    So in my Html, I am doing :

    <div data-role="view" data-title="Login" id="loginView" data-init="showLoginSlider">
        <header data-role="header">
            <div class="iOS7" style="height:20px"></div>
        </header>
     
        <div data-role="content" class="login" id="loginContent">
             
            <div id="loginScroller"></div>
     
            <div style="height: 160px; overflow: hidden;">
                <div id="fbconnect"> <!-- Sign up with FB instead of Login -->
                    <a href="#" id="loginbutton" ><img src="content/buttons/facebook-login.png" alt="facebook login button"></a>
                </div>
     
                <div id="privacyPolicy">
                        We will never interact on Facebook without your permission
                    <br>
                        Your personal data is removed upon deleting your profile
                    <br>
                        We will never post on your wall
                    <br>
                    <span id="boring">Read our <a href="views/termsandconditions.html">Terms & Conditions</a> and our <a href="views/privacypolicy.html">Privacy Policy</a>.</span>
                </div>
            </div>
        </div>
        <div id="fb-root"></div>
    </div>
     
    <!-- Template for the events -->
    <script id="loginScroller-template" type="text/x-kendo-template"><div class="login-scrollV" id="page1" data-role="page">
        </div><div class="login-scrollV" id="page2" data-role="page">
        </div><div class="login-scrollV" id="page3" data-role="page">
        </div></script>


    And in my Javascript (this is done after Cordova and Kendo UI initialization) :


    function showLoginSlider ()
     {
        alert("kendoReady");
        //Remove previous content
        var scrollView = $( "#loginScroller" ).data( "kendoMobileScrollView" );
        if ( typeof scrollView !== typeof undefined )
        {
            scrollView.destroy();
            $( "#loginScroller" ).empty();
        };
     
        var maxHeight = $( "#loginContent" ).height();
     
        alert( maxHeight );
     
        var loginScrollerHeight = maxHeight - 200;
        var slidesHeight = loginScrollerHeight - 25;
     
        $( "#loginScroller" ).height( loginScrollerHeight );
        $( ".login-scrollV" ).height( slidesHeight );
     
        alert(loginScrollerHeight);
        alert(slidesHeight);
     
        var template = kendo.template( $( '#loginScroller-template' ).html(), {useWithBlock:false} );
     
        $( "#loginScroller" ).kendoMobileScrollView({
            template : template,
            enablePager: true,
            contentHeight: loginScrollerHeight
        });
     };


    But nothing is appended. Why ?
    isn;t it a better way to do it ? But I still need to get my height with Javascript.

    Many thanks.
  2. Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 29 Oct 2014 Link to this post

    Hi Yohann,

    The reason you are not seeing any items/pages in your ScrollView is that it has no data source. You have to assign it a data source that holds the items that the control needs to render on each page. Here is a simple example with your code:
    $("#loginScroller").kendoMobileScrollView({
        dataSource: ["facebook", "google+", "twitter"],
        template: template,
        enablePager: true,
        contentHeight: loginScrollerHeight
    });

    I think you also misunderstood how to use the template. I think you tried to add the data you need to show in the template, which is wrong. There are two types of ScrollView templates as you can see here. Using a template for a single item, your template would look like this:
    <script id="loginScroller-template" type="text/x-kendo-template">
        <div class=".login-scrollV">#= data #</div>
    </script>

    Of course, in a real scenario you will need a dataSource with JS objects instead of strings. Again, you can refer to the ScrollView templates article to see how you can access the objects and properties.

    I hope this information was helpful. Let me know if you still have questions.

    Regards,
    Martin Yankov
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top