This is a migrated thread and some comments may be shown as answers.

serverPaging with pager not working

2 Answers 417 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Morten asked on 05 Sep 2018, 08:38 PM

I have hooked up a datasouce (with serverPaging: true) to both a listview and a pager.

The server returns the correct number of records (and an int indicating the total number of records) from the initial db query, however the pager's navigation buttons are disabled, as if the pager doesn't recognise the datasource.schema.total.

 

Is the combination datasource with serverPaging:true, listview and pager possible?

 

var ds = new window.kendo.data.DataSource({
    transport: {
        read: {
            type: "POST",
            url: url,
            data: function () {
                return {
                    country: 1
                };
            },
            dataType: "json",
            contentType: "application/json; charset=utf-8"
        },
        parameterMap: function (data) {
            return JSON.stringify(data);
        }
    },
    serverPaging: true,
    schema: {
        model: {
            id: "id",
            fields: {
                id: { type: "number" },
                field1: { type: "string" },
                field2: { type: "string" }
            }
        },
        total: 'total'
    },
    pageSize: 50
});

$("#list").kendoListView({
    dataSource: ds,
    template: window.kendo.template($("#tmpl").html())
});

$("#pictures-pager").kendoPager({
    dataSource: ds,
    numeric: false,
    refresh: true,
    messages: {
        display: "{0}-{1} / {2}",
        empty: "",
        itemsPerPage: ""
    },
    pageSizes: [10, 50, "all"]
});

 

2 Answers, 1 is accepted

Sort by
0
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 05 Sep 2018, 08:55 PM

I figured it out.

I changed the server response to:

var result = new { total = totalRecords, data = data };

return Json(result);

...and the datasource to:

var ds = new window.kendo.data.DataSource({
    transport: {
        read: {
            type: "POST",
            url: url,
            data: function () {
                return {
                    country: 1
                };
            },
            dataType: "json",
            contentType: "application/json; charset=utf-8"
        },
        parameterMap: function (data) {
            return JSON.stringify(data);
        }
    },
    serverPaging: true,
    schema: {
        model: {
            id: "id",
            fields: {
                id: { type: "number" },
                field1: { type: "string" },
                field2: { type: "string" }
            }
        },
        total: 'total',
        data: 'data'

    },
    pageSize: 50
});

 

 

0
Preslav
Telerik team
answered on 07 Sep 2018, 08:02 AM
Hello Morten,

Thank you for sharing the correct solution with the community.

I would like to add the following resource on the serverPaging:

Regards,
Preslav
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ListView
Asked by
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Preslav
Telerik team
Share this question
or