how to re build a ScrollView with new data?

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

    Posted 27 Jan 2014 Link to this post

    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.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Jan 2014 Link to this post

    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.

    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
    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. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 08 Feb 2014 Link to this post

    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 !
  5. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 08 Feb 2014 in reply to Yohann Link to this post

    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 ..
  6. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 08 Feb 2014 Link to this post

    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
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 10 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 10 Feb 2014 in reply to Alexander Valchev Link to this post

    Thank you very much for your fast and accurate answers.
  9. Jerry
    Jerry avatar
    6 posts
    Member since:
    Oct 2007

    Posted 27 Feb 2014 Link to this post

    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!
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 28 Feb 2014 Link to this post

    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.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Jerry
    Jerry avatar
    6 posts
    Member since:
    Oct 2007

    Posted 28 Feb 2014 in reply to Alexander Valchev Link to this post

    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.
  12. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Mar 2014 Link to this post

    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:

    Regards,
    Alexander Valchev
    Telerik
    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