Kendo Grid paging not working

Question

I'm doing data paging via an AJAX POST, and returning a json structure like:

{
    Total: 6,
    Data: {
        {id:1,field2:'xx'},
        {id:2,field2:'xx2'},
    }
}

The grid data source is configured on the following way:

 grid.dataSource = new kendo.data.DataSource({
                serverPaging: true,
                pageSize: 2,
                schema: {
                    data: "Data",

                    // using function for testing purposes, it goes into after data.success is set and returns 6 
                total: function(r) {
                    return r.Total;
                },
                transport: {
                    read: function(data) {
                        var token = $('[name=__RequestVerificationToken]').val();
                        var headers = {};
                        headers["__RequestVerificationToken"] = token;

                        $.ajax({
                            url: listUrl,
                            headers: headers,
                            contentType: 'application/json',
                            data: self.getFilterData(),
                            type: 'POST',
                            async: false,
                            success: function(result) {
                                data.success(result);
                            }
                        });
                    },
                }

The data is successfully binded, yet, the pager is not working and does not appear. What's missing here?

Thanks

Answer 1

The pager also needs to be bound to the data source:

$("#pager").kendoPager({
    autoBind: false,
    dataSource: grid.dataSource
});