Mobile view + MVVM templating scrolling issue

3 posts, 1 answers
  1. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 20 Sep 2012 Link to this post

    I have a following scenario: Mobile view renders blocks of data based on view model array using MVVM and templating.
    I have also add and remove button to add and remove elements to/from array.

    To reproduce my issue:
    1. Suppose you have 3 elements that fit in your mobile view complete, so scrolling is not needed. (screenshot_1)
    2. Push "Add" button and forth element appears on mobile view, scrolling now is active, scroll down to see buttons (screenshot_2)
    3. Push "Remove" button, last element is removed from DOM, but view remains "scrolled" and the worst is - I could not scroll it up (screentshot_3)

    Is it possible somehow to scroll view back? After some clicks It goes back, but on iPad I could not do anything, it stays as "scrolled up".

    I prepared fiddle, I can this reproduce on Windows / Chrome, and iPad also, see also screenshots
    http://jsfiddle.net/KuYTL/18/ 

  2. Answer
    Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 21 Sep 2012 Link to this post

    Hello Alex,

    You can use the reset method of the view scroller. In order to obtain the scroller client object, you can use the scroller method of the mobile application. Keep in mind that those are available in our Q2 release  - the jsfiddle you have posted refers the Q1 release.

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 21 Sep 2012 Link to this post

    Thank! That was the right direction. 
    In a Splitview mobile application "scroller" function of mobile application returns "undefined", but each Pane has current view() method, and view has scroller, reset it solves issue.
    var panes = $('[data-role="pane"]');
    for(var i=0; i<panes.length; i++){
        var pane = $(panes[i]).data('kendoMobilePane');
        if(pane && pane.view() && pane.view().scroller)
            pane.view().scroller.reset();
    }

Back to Top