Pull-to-Refresh Pattern

Starting with the R2 2023 release, Kendo UI will no longer ship Hybrid UI components. This means that the R2 2023 will be the last release to include Kendo Hybrid in the Kendo UI package. See full announcement in Kendo jQuery blog post. The last stable version that we recommend to use for Kendo Hybrid components is R3 2022 SP1.

What's New in Kendo UI R2 2023

The Hybrid UI ListView widget is used to display flat or grouped lists of items. It can be either used in the unbound mode by enhancing an HTML ul element, or bound to a DataSource instance.

The Pull-to-refresh pattern solves the issue that occurs when you have to display data of dynamic character.

Getting Started

Create ListViews with Pull-to-Refresh

Step 1 Define a target HTML element such as a list.

<ul id="localListView"></ul>

<script id="pull-to-refresh-template" type="text/x-kendo-template">
    <div class="tweet">
        <img class="pullImage" src="#= profile_image_url #" alt="#= from_user #" />#= text #
        <div class="metadata">
            <a class="sublink" target="_blank" href="http://twitter.com/\\#!/#= from_user #/status/#= id_str #" rel="nofollow">#= kendo.toString(new Date(Date.parse(created_at)), "dd MMM HH:mm") #</a>
            |
            <a class="sublink" href="http://twitter.com/#= from_user #" rel="nofollow">#= from_user #</a>
        </div>
    </div>
</script>

Step 2 Initialize the ListView by referring the template and a result set from the Twitter API to be displayed.

var dataSource = new kendo.data.DataSource({
    serverPaging: true,
    pageSize: 10,
    transport: {
        read: {
            url: "http://search.twitter.com/search.json", // the remove service url
            dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
        },
        parameterMap: function(options) {
            return {
                q: "javascript",
                page: options.page,
                rpp: options.pageSize
            };
        }
    },
    schema: { // describe the result format
        data: "results" // the data which the data source will be bound to is in the "results" field
    }
});

$("#pull-to-refresh-listview").kendoMobileListView({
    dataSource: dataSource,
    pullToRefresh: true,
    appendOnRefresh: true,
    template: $("#pull-to-refresh-template").text(),
});

Send Additional Parameters

The Hybrid UI ListView provides a way to define the pullParameters function, which will add its result to the data that is sent to the server. This data will be available in the DataSource's parameterMap function.

Step 1 Modify the above example to send an additional parameter to the Twitter service.

$("#pull-to-refresh-listview").kendoMobileListView({
    dataSource: dataSource,
    pullToRefresh: true,
    appendOnRefresh: true,
    template: $("#pull-to-refresh-template").text(),
    pullParameters: function(item) {
        //item is the first data item in the ListView
        return {
            since_id: item.id_str,
            page: 1
        };
    }
});

Step 2 Use this additional parameter in the parameterMap function of the DataSource.

var dataSource = new kendo.data.DataSource({
    serverPaging: true,
    pageSize: 10,
    transport: {
        read: {
            url: "http://search.twitter.com/search.json", // the remove service url
            dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
        },
        parameterMap: function(options) {
            return {
                q: "javascript",
                page: options.page,
                rpp: options.pageSize,
                since_id: options.since_id //additional parameters sent to the remote service
            };
        }
    },
    schema: { // describe the result format
        data: "results" // the data which the data source will be bound to is in the "results" field
    }
});

See Also

• Hybrid UI ListView JavaScript API Reference
• Overview of the Hybrid UI ListView
• Endless Scrolling Feature

For how-to examples on the Kendo UI hybrid ListView, browse its How To documentation folder.