how to re build a ScrollView with new data?

[Yohann]

Hello,

I'm fairly new to Kendo ( still testing it for my mobile app ) and i'm trying to display your list of friends (pulled from FB) in a scroll view with their names and pictures. It can go up to 1K + Friends and when switching from a profile to another, the list of friends has to be re populated. I can't have it work, and I'm a bit worried about performances when listing 1000+ friends on the page.

So Basically, I have a ScrollView that I'm trying to rebuild (or at least remove the old data and add new data) when a user get back to the previous page and come back again to this page. It's like a profile page. When you go there for user id = 1 you have some information and a scrollview with his friend's name and pictures, and when I go to another user (id = 2) then I want to change every information on the page, including the information bound in the scrollview.

From what I understand, one can only change the pictures of the scroll view by initiating the view. It doesn't seem to work when data-show is triggered and I have a feeling that we should re-initiate the page completely... Am I right ? Doing the scroll view methods such as SELECTOR.data("kendoMobileScrollView").setDataSource(friendsToInvite) or scrollview.refresh() doesn't seem to work.
Am I doint something wrong or should I re initialize the view everytime a user go back and forth on the different user profiles ? How can I do this ?

here is my HTML:

<!-- Event Page !!! Inherit the layout just above for footer and header -->
        <div data-role="view" data-layout="overview-layout" data-show="initEvent" id="event">
            <div data-role="content" class="content">

                <div id="eventContent"></div>

                <div>
                    <div id="friendsToInvite"></div>
                </div>
            </div>
        </div>

        <script id="friendsToInvite-template" type="text/x-kendo-template">
            <p>#= name #</p>
            <div style="width: auto; height: 180px; background: url('https://graph.facebook.com/#= fbid #/picture?type=large')  no-repeat center;"></div>
            <p><button>Invite</button><button>Dont show me again</button></p>
        </script>

and My JS:

var y = 3;

function initEvent( e )
{
    //Get the "Key" of the event, which is linked to the id somehow
    var key = e.view.params.key;

    //Retrieve the event info from the cache with the key !
    var event = Event.retrieveFromKey( key );

    // Append the template of the event upon the event info
    var template = Handlebars.compile( $( '#eventTemplate' ).html() );
    $( '#eventContent' ).prepend( template( event ) );

    //The next ones are about getting your friend list for this specific event based on the algo
    // Generate an empty kendo Scroll View
    var friendsToInvite = new kendo.data.DataSource({
            data: []
    });

    $( "#friendsToInvite" ).kendoMobileScrollView(
    {
        dataSource: friendsToInvite,
        template: $( "#friendsToInvite-template" ).html(),
        contentHeight: 300,
        enablePager: false
    });

    $.when( Event.getFriendsList( event.id ) ).done( function( friendsList )
    {

        if ( friendsList.length > 0 )
        {

            for ( var i = 0; i < y; i++ )
            {
                friendsToInvite.add( { name: friendsList[i]["name"], fbid: friendsList[i]["fbid"] } );
            };

            $( "#friendsToInvite" ).data("kendoMobileScrollView").setDataSource(friendsToInvite);

  //           y++;
  //           console.log(y);
  //           if (y > 5) {
  //               console.log("refresh");
                // console.log ( scrollview );
                // $( "#friendsToInvite" ).data("kendoMobileScrollView").setDataSource(friendsToInvite);
                // scrollview.refresh();
  // $( "#friendsToInvite" ).empty();
  //           };
  //           console.log(friendsToInvite);
  //           $( "#friendsToInvite" ).kendoMobileScrollView(
  //           {
  //               dataSource: friendsToInvite,
  //               template: $( "#friendsToInvite-template" ).html(),
  //               contentHeight: 300,
  //               enablePager: false
  //           });
        }
        else
        {
            console.log("Got to be creative on this one ...")
        }
    });
}

All that is commented is something I've tried. whithout success.Also, you'll notive that I've filled the scroll view twice: once for the "initialization" with empty data and another one with the data I want to use. The fact that the when() method delay the construction of the scroll view makes it bug. I don't know why.

[Alexander Valchev]

Hi Yohann,

The correct way to change ScrollView's dataSource is through the setDataSource method. For your convenience I prepared a small sample page which demonstrates this approach in action.

• http://jsbin.com/IZaYexac/1/edit

Could you please check it and let me know what I am missing? Is it possible to reproduce the problem you encountered in a sample jsBin page (you can use mine as a base)?
In this way I will be able to examine what exactly is going wrong and assist you further.

Regards,
Alexander Valchev
Telerik

[Yohann]

Thank you that was it, in fact, I had to put the first part of my code ( where I initialize the kendo data) in a init function and not in a show function. last small problem I get is to make the small blue bullets pagination to scale to the number of results, it's apparently not automatic ..

Thanks for your help !

[Yohann]

I got rid of the bullets, that was easy, but I've noticed I can set up the scrollView at init for some reason .. still investigating, will post my code if I can't solve it ..

[Yohann]

All right, it seems that the code you provided only works if I set ds as a global variable. Is there a way to set up in the show or init function ? I'd like to avoid having global variable.

Many Thanks

[Alexander Valchev]

Hello Yohann,

The dataSource instance which is set through the data-source attribute should be accessible through the global scope. If you want you can nest it another object (namespace) however that object should be a global variable. For example:

<div id="scrollview" data-role="scrollview" data-source="dataSources.ds" data-template="tmp"></div>

var dataSources = {
    ds: new kendo.data.DataSource({ ... })
}

Regarding the pager (small blue bullets): Pages count should be updated automatically. The behavior which you encountered is a bug which is fixed in the latest internal build. Please download it and give it a try.

Regards,
Alexander Valchev
Telerik

[Yohann]

Thank you very much for your fast and accurate answers.

[Jerry]

Due to the nature of my project I'm not able to use the json/template solution above (each page is a view/viewmodel.

Here's an example of my issue: http://jsbin.com/liyur/1/edit

Notice how the 2nd ScrollViewer (ajax data simulated w/ setTimeout) fixes itself if you resize the browser window.

Please assist!  Thank you!

[Alexander Valchev]

Hi Jerry,

Initializing Kendo Mobile widgets in the document ready event handler is not supported. All mobile widgets should be initialized via declarative syntax in the HTML or via JavaScript in the init event handler of their parent View.

In your particular case I recommend you to initialize the widgets via data-role="scrollview" in the HTML and modify their content in the init event handler through the content method. 

function onInit() {
  $("#scrollview1").getKendoMobileScrollView().content(pagesHTML);
  setTimeout(function () {
    $("#scrollview2").getKendoMobileScrollView().content(pagesHTML);
  }, 1);
}

The tricky part is that you should add an empty <div> inside the scrollview elements - thus way you will force the widget to operate with local pages (content method is not available in dataBound mode).

<div id="main" data-role="view" data-init="onInit">
  <div id="scrollview1" data-role="scrollview"><div></div></div>
  <div id="scrollview2" data-role="scrollview"><div></div></div>
</div>

Replacing (or setting) the content through the API will automatically refresh the widget.

For your convenience I updated your jsBin sample.

• http://jsbin.com/vagojoqe/2/edit

Regards,
Alexander Valchev
Telerik

[Jerry]

I gave your solution a go but unfortunately adding the html via .content() isn't an option.  In our project each page is actually a MVVM reusable object instance that gets bound as it loads (not easily illustrated in the simple jsbin example).

But I was able to get the ScrollView to work by adding one line: $("#scrollview2").getKendoMobileScrollView().content();

See edited example: http://jsbin.com/liyur/2/edit

A hack for sure but I'm not sure what else to try.

Also, using the view's init vs. document ready didn't seem to make a difference here... but I did remove the document ready from my actual project just to be safe.

[Alexander Valchev]

Hello Jerry,

Calling the content method with no arguments works because the method forces the widget to refresh and resize itself.
Anyway as you correctly noted this is a hack which works in the particular case.

Did you checked the dataBinding functionality that scrollview offers? It will allow you to render the pages as templates bound to a DataSource record. 
You can learn more about this feature in the following help topic:

• http://docs.telerik.com/kendo-ui/getting-started/mobile/scrollview#binding-to-data

Regards,
Alexander Valchev
Telerik