Automatic km-scroll-container events

11 posts, 0 answers
  1. 100%
    100% avatar
    75 posts
    Member since:
    Apr 2013

    Posted 17 Mar 2014 Link to this post

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

    Posted 17 Mar 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. 100%
    100% avatar
    75 posts
    Member since:
    Apr 2013

    Posted 17 Mar 2014 in reply to Alexander Valchev Link to this post

    Is there some way of defining such event handlers declaratively (with html attributes)?
  5. 100%
    100% avatar
    75 posts
    Member since:
    Apr 2013

    Posted 17 Mar 2014 Link to this post

    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?
  6. 100%
    100% avatar
    75 posts
    Member since:
    Apr 2013

    Posted 17 Mar 2014 in reply to 100% Link to this post

    Oh, I see now, you have a div with data-role="scroller" inside the div with data-role="view".
  7. 100%
    100% avatar
    75 posts
    Member since:
    Apr 2013

    Posted 17 Mar 2014 Link to this post

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

    Posted 17 Mar 2014 Link to this post

    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!
     
  9. 100%
    100% avatar
    75 posts
    Member since:
    Apr 2013

    Posted 18 Mar 2014 in reply to Alexander Valchev Link to this post

    Is there some way of declaratively specify which event handlers a scroller will have that is automatically created in a view?
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Mar 2014 Link to this post

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

    Posted 07 Apr Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready