Kendo Mobile - Pull to refresh

by kendomobile

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile andASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->
<div data-role="view" data-init="viewInit">

        <div id="scrollSection" data-zoom="true"
             data-role="scroller" 
            style="height: 200px;text-align: center;">
            <span id="scrollContent" 
                  style="font-size: 150px;">100            
            </span>
        </div>
    </div>

JavaScript

var app = new kendo.mobile.Application(document.body);

        function viewInit(e) {
            //get reference of the scroller 
            var scroller = $("#scrollSection")
                           .data("kendoMobileScroller");

            //set scroller options
            scroller.setOptions({
                pullToRefresh: true,
                //pull event is fired when user pulls beyond 
                //value set using pullOffset
                pull: refresh,
                //set the boundary after which the pull will
                //fire the pull event default value is 140
                pullOffset: 100,
                pullTemplate: "<i>Pull to update the number</i>",
                releaseTemplate: "Release to update the number",
                refreshTemplate: "Updating..."
            });

        }
        function refresh() {

            //create a random number between 1 and 1000
            var newNumber = Math.floor(
                            (Math.random() * 1000) + 1);
            var scroller =
                $("#scrollSection").data("kendoMobileScroller");
            //update the contents inside the scroller
            scroller.scrollElement.find('#scrollContent')
                                  .text(newNumber);

            //pullHandled method removes the contents
            //in the refresh template and postions the u
            //updated contents to the initial view
            scroller.pullHandled();
        }