Edit this page

Pull-to-Refresh Pattern

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.

Example
<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.

Example
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(),
});

This is the live example of the representation above:

JS Bin

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.

Example
$("#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.

Example
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
    }
});

This is the live example of the representation above:

JS Bin

See Also

Other articles and how-to examples on the Hybrid UI ListView:

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy