This is a migrated thread and some comments may be shown as answers.

Mobile view + MVVM templating scrolling issue

2 Answers 72 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 20 Sep 2012, 10:46 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Petyo
Telerik team
answered on 21 Sep 2012, 06:37 AM
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!
0
Alex
Top achievements
Rank 1
answered on 21 Sep 2012, 09:39 AM
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();
}

Tags
General Discussions
Asked by
Alex
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Alex
Top achievements
Rank 1
Share this question
or