Why is my ScrollView not initializing ?

[Yohann]

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.

[Martin Yankov]

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