serverPaging with pager not working

3 posts, 0 answers
  1. Morten
    Morten avatar
    352 posts
    Member since:
    Jul 2012

    Posted 05 Sep 2018 Link to this post

    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. Morten
    Morten avatar
    352 posts
    Member since:
    Jul 2012

    Posted 05 Sep 2018 in reply to Morten Link to this post

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

     

     

  3. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 07 Sep 2018 Link to this post

    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.
Back to Top