Automatic km-scroll-container events

[100%]

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.

[Alexander Valchev]

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

 

 

[100%]

Is there some way of defining such event handlers declaratively (with html attributes)?

[100%]

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?

[100%]

Oh, I see now, you have a div with data-role="scroller" inside the div with data-role="view".

[100%]

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.

[Alexander Valchev]

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

 

 

[100%]

Is there some way of declaratively specify which event handlers a scroller will have that is automatically created in a view?

[Alexander Valchev]

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

 

 

[Blake]

Your links return 404 error:

http://demos.telerik.com/kendo-ui/mobile/scroller/index.html

http://demos.telerik.com/kendo-ui/mobile/scroller/pull-to-refresh.html

[Alexander Valchev]

Hi Blake,

Demos location has changed. Use the following links:

• http://demos.telerik.com/kendo-ui/m/index#scroller/index

• http://demos.telerik.com/kendo-ui/m/index#scroller/pull-to-refresh

Regards,
Alexander Valchev
Telerik