Kendo Grid页脚未在页面加载时初始化

Question

I am using Kendo UI Grid to display results consumed from a WCF service. The version of Kendo that I am using is .web.2013.2.716.open-source. I am having an issue that when the page loads the footer has not been initialized. It is showing 0 pages and no items to display. There grid is being populated and does contain valid rows. If I perform any kind of action on the grid such as a sort or change the number of rows to display per page the footer then contains valid information. Here is a copy of the JavaScript code:

<script>
    $(document).ready(function () {
        $("#customerGrid").kendoGrid({
            autoBind:true,
            dataSource: {
                change: function (results) {
                    console.log("Successful");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus)
                },
                transport: {
                    read: "/Services/SalesCRM_DBServices.svc/getCustomers",
                    dataType: "json"
                },
                schema: {
                    data: function (response) {
                        return response.d;
                    },
                    total:"total",
                    model: {
                        fields: {
                            AccountNumber: { type: "string" },
                            Name: { type: "string" },
                            ContactName: { type: "string" }
                        }
                    }
                },
            },
            height:325,
            filterable: true,
            sortable: true,
            serverPaging:true,
            pageable: {
                refresh: false,
                info: true,
                input: true,
                numeric: true,
                pageSize:5,
                pageSizes: true,
                previousNext: true
            },
            columns: [{
                field: "AccountNumber",
                title: "Account Number",
                width: "125px",
                filterable: false
            },
            {
                field: "Name",
                title: "Name",
                width: "200px",
                filterable: false
            },
            {
                field: "ContactName",
                title: "Contact Name",
                width: "200px",
                filterable: false
            },
            {
                command: [{ text: "SELECT" }],
                width: "50px"
            },
            ],
        });

    });
</script>

Also, here is the tag of the element being used for the grid:

<div id="customerGrid"></div>

Again, grid is being populated, footer is showing at bottom of the grid, but there are 0 pages and the footer indicates that "No items to display". But, when I sort the grid or change the number of rows to display, the footer then shows 2 pages and "1 - 5 of 9 items".

Any, assistance that anyone could provide concerning this issue would be greatly appreciated.

I have looked at the post titled "Grid paging not working on page load." on the Kendo UI Premium Forum and it was not really any help.

Answer 1

Very likely you are not returning "total" in the response.

Since you define in the model definition that there is a field called total that contains the total you have to define it.

Example of invalid response from the server producing what you say:

{
    "d"    : [
        { "AccountNumber": 1, "Name": "John", "ContactName": "Jack" },
        { "AccountNumber": 2, "Name": "Jane", "ContactName": "Jack" },
        { "AccountNumber": 3, "Name": "Joe", "ContactName": "Jack" }
    ]
}

While this is a valid response:

{
    "total": 3,
    "d"    : [
        { "AccountNumber": 1, "Name": "John", "ContactName": "Jack" },
        { "AccountNumber": 2, "Name": "Jane", "ContactName": "Jack" },
        { "AccountNumber": 3, "Name": "Joe", "ContactName": "Jack" }
    ]
}

If you are actually not willing to send the total then define the Model as:

schema   : {
    data : function (response) {
        return response.d;
    },
    total: function (response) {
        return response.d.length;
    },
    model: {
        fields: {
            AccountNumber: { type: "string" },
            Name         : { type: "string" },
            ContactName  : { type: "string" }
        }
    }
}

or trickier but simpler:

schema   : {
    data : "d",
    total: "d.length",
    model: {
        fields: {
            AccountNumber: { type: "string" },
            Name         : { type: "string" },
            ContactName  : { type: "string" }
        }
    }
}