jube-fork/Jube.App/wwwroot/kendo/examples/mobile-listview/pull-to-refresh.html

<div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="left" data-icon="add" data-role="button"  data-rel="modalview" href="#modalview-add"></a>
            <span data-role="view-title"></span>
            <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
            <a data-align="right" data-role="button" class="nav-button" data-icon="home" href="#/"></a>
        </div>
    </header>

    <ul id="pull-to-refresh-listview"></ul>
</div>

<div data-role="modalview" id="modalview-add" style="width: 95%;">
    <div data-role="header">
        <div data-role="navbar">
            <span>Add Product</span>
            <a data-click="closeModalViewAdd" data-role="button" data-align="right">Cancel</a>
        </div>
    </div>

    <ul data-role="listview" data-style="inset">
        <li><label for="username" class="km-label-above">Product Name <input type="text" id="name" /></label></li>
        <li><i></i> <a data-role="button" data-click="addNew" class="km-justified km-primary" type="button" data-align="right">Add New Product</a></li>
    </ul>
    
</div>

<script type="text/x-kendo-tmpl" id="pull-to-refresh-template">
    <div class="product-item">        
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
    </div>
</script>

<script>
    function mobileListViewPullToRefresh(e) {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Products/Read",
                    dataType: "jsonp"
                }
            },
            schema: {
                total: function () { return 77; }
            },            
            serverPaging: true,
            pageSize: 40
        });

        $("#pull-to-refresh-listview").kendoMobileListView({
            dataSource: dataSource,
            pullToRefresh: true,            
            template: $("#pull-to-refresh-template").text()            
        });
    }
    
    function closeModalViewAdd() {
        $("#modalview-add").kendoMobileModalView("close");
    }

    function addNew() {
        addProductDataSource.add({
            ProductName: $("#name").val(),
            UnitPrice: Math.floor((Math.random() * 10) + 1)
        });

        closeModalViewAdd();
    }

    var addProductDataSource = new kendo.data.DataSource({
        transport: {
            create: {
                url: "https://demos.telerik.com/kendo-ui/service/Products/Create",
                dataType: "jsonp"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
            }
        },
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { type: "string" }
                }
            }
        },
        autoSync: true,
        batch: true,
        requestEnd: function () {
            $("#name").val("");
        }
    });
</script>

<style>
    .product-item {
        font-size: 1.2;
    }
    .product-item h3 {
        float: left;
        margin: 0;
        padding: 0;
        height: 1.3em;
        overflow: hidden;
    }
    .product-item p {
        float: right;
        margin: 0;
        padding: 0;
    }
    .pullImage {
        width: 64px;
        height: 64px;
        border-radius: 3px;
        float: left;
        margin-right: 10px;
    }
</style>