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

Automatic km-scroll-container events

10 Answers 368 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
100%
Top achievements
Rank 1
100% asked on 17 Mar 2014, 09:08 AM
When I have a div like this:

<div data-role="view" id="vFoo">
    <div data-role="header">
        <div data-role="navbar">
            <a class="drawer-button" data-role="button" data-rel="drawer"
                href="#my-drawer" data-align="left">
                <img src="img/menu_button.png" />
            </a>
            <span>Foo view</span>
        </div>
    </div>
    <div class="margin-box">
        The page
    </div>
</div>

the result will involve an automatic scroll container (why?)

It will wrap the margin box div I have like this

<div class="km-scroll-container" style="transform: translate3d(0px, -60px, 0px) scale(1);">
  <div class="margin-box">
     The page
  </div>
</div>

What I want is to get events from that automatically created scroller, especially the one where I scroll to far and get an elastic bounce back.

I also want to know how to get rid of the automatic creation of the scroller.

10 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 17 Mar 2014, 02:04 PM
Hello,

Your observation is correct - the framework automatically wraps View content inside a scroller. You can access that scroller through its parent mobile View client side object.
var vFooScroller = $("#vFoo").data("kendoMobileView").scroller;

Once you got a reference to the scroller you can use bind method to attach event handlers to any of its events. Alternatively you can set the event handlers and config options of the scroller via data attributes as shown in the API reference code samples.

In order to prevent the View from initializing a scroller you should set its stretch option to true.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
100%
Top achievements
Rank 1
answered on 17 Mar 2014, 02:17 PM
Is there some way of defining such event handlers declaratively (with html attributes)?
0
100%
Top achievements
Rank 1
answered on 17 Mar 2014, 02:18 PM
I regret the use of the word "define". Is there some way of declaratively specify which event handlers a scroller will have that is automatically created in a view?
0
100%
Top achievements
Rank 1
answered on 17 Mar 2014, 02:21 PM
Oh, I see now, you have a div with data-role="scroller" inside the div with data-role="view".
0
100%
Top achievements
Rank 1
answered on 17 Mar 2014, 02:30 PM
This setup:
<div data-role="view" id="vTest" data-stretch="true">
    <div data-role="header">
        <div data-role="navbar">
            <a class="drawer-button" data-role="button" data-rel="drawer"
                href="#my-drawer" data-align="left">
                <img src="img/menu_button.png" />
            </a>
            <span>test</span>
        </div>
    </div>
    <div data-role="scroller">
        <div class="margin-box-with-padding">
        some contents
        </div>
    </div>
</div>

results in a the creation of a km-scroll-container div, but it will not be scrollable, even if the "some contents" content gets tall. If i I dont use data-stretch="true" in the outermost div, I will get two scroll containers, one in another.
0
Alexander Valchev
Telerik team
answered on 17 Mar 2014, 04:02 PM
Hello,

I apologize for misleading you - adding another another div with data-role scroller will result in having scroller inside the main scroller. Actually the scenario is demonstrated in this demo page: http://demos.telerik.com/kendo-ui/mobile/scroller/index.html

In order to hook up to the events of the build-in scroller you should use the 1st approach - through the bind method. This demo demonstrates it in action: http://demos.telerik.com/kendo-ui/mobile/scroller/pull-to-refresh.html

Please pay attention to the following code in the init event handler of the View:
function initPullToRefreshScroller(e) {
    //....
 
    var scroller = e.view.scroller;
 
    scroller.setOptions({
        pullToRefresh: true,
        pull: function() {
            updateClock();
            setTimeout(function() { scroller.pullHandled(); }, 400);
        }
    })
}

I hope this information will help. Once again I apologize for the inconvenience caused.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
100%
Top achievements
Rank 1
answered on 18 Mar 2014, 10:14 AM
Is there some way of declaratively specify which event handlers a scroller will have that is automatically created in a view?
0
Alexander Valchev
Telerik team
answered on 18 Mar 2014, 11:55 AM
Hello,

This is not possible - View's scroller options cannot be set via data attributes. Please use the JavaScript approach demonstrated below.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Blake
Top achievements
Rank 1
answered on 05 Apr 2016, 07:30 PM
0
Alexander Valchev
Telerik team
answered on 07 Apr 2016, 08:25 AM
Hi Blake,

Demos location has changed. Use the following links:


Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ScrollView (Mobile)
Asked by
100%
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
100%
Top achievements
Rank 1
Blake
Top achievements
Rank 1
Share this question
or