Question

I am trying Kendo UI out and I am using the examples provided for studying purpose. Let’s suppose I am using a large data source of several hundreds of thousand elements. If I’m using paging and the page size is 10, I would really like to be able to get only 10 elements from the web-page and if Kendo UI was able to know that in reality the number of elements is much bigger, but we are showing only 10.

This is what I currently have:

        var initGrid = true;
        var grid2Data;

        function getDataSource()
        {
            return grid2Data.Data;
        }

        var grid;
        function getPageIndex()
        {
            if (!(grid)) {
                return 0;
            }
            return grid.pager.page() - 1;
        }

        function getPageSize() {
            if (!(grid)) {
                return 10;
            }
            return grid.pager.pageSize();
        }

        function getFilters() {
            if (!(grid)) {
                return "";
            }
            return grid.dataSource.filter();
        }

        function getSorts() {
            if (!(grid)) {
                return "";
            }
            return grid.dataSource.sort();
        }

        function getParams() {
            return getPageSize();
        }

        function postTest() {
            if (initGrid) {
                $.post('myurl' + getParams(), function (data) {
                    grid2Data = data;
                    $("#grid").kendoGrid({
                        dataBound: onDataBound,
                        dataSource: {
                            data: getDataSource(),
                            schema: {
                                model: {
                                    fields: {
                                        Email: { type: "string" },
                                        FullName: { type: "string" },
                                        LogCreateDate: { type: "date" },
                                        RoleName: { type: "string" },
                                        UserName: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 10
                        },
                        height: 300,
                        scrollable: false,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                        {
                            field: "Email",
                            title: "Email",
                            width: 100
                        },
                        {
                            field: "FullName",
                            title: "Full Name",
                            width: 100
                        },
                        {
                            field: "LogCreateDate",
                            title: "Created",
                            template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
                        },
                        {
                            field: "RoleName",
                            title: "Role",
                            width: 50
                        },
                        {
                            field: "UserName",
                            width: 100
                        }
                    ]
                    });
                    grid = $("#grid").data("kendoGrid");
                });
            }
            else {
            }
            initGrid = false;
        }

        $(document).ready(function () {
            postTest();
        });

My problem is that the grid is showing that this is element 1-10 from 10 and it’s the first page. I would like the grid to show me a page index and item count given by me. How can I set the number of elements and the page index of the grid? Is this possible? Thanks.

Answer 1

When you choose serverPaging in the DataSource by setting it to true. You receiver in the server information about the page number (page), the page size (pageSize), number of records to skip (skip)… (look for serverPaging in http://docs.kendoui.com/api/framework/datasource) and in exchange you should return not only the array with the data of that page but also the total number of rows. Then you implement in schema.total the function for accessing the number of records. I.e. Lets assume that you return as result the following object:

{
    rows: [ 
        { id: 1, col1: "col1.1", col2: "col1.2" },
        { id: 2, col1: "col2.1", col2: "col2.2" },
        { id: 3, col1: "col3.1", col2: "col3.2" }
    ],
    totalRows : 1000
}

Then you might implement schema.total as:

schema: {
    total: function (response) {
        return response.totalRows;
    }
}

Where response is the object received from the server.

NOTE: Actually in this case would be enough defining the schema as:

schema: {
    total: "totalRows";
    }
}

Since total is directly stored in totalRows field.

Check http://demos.kendoui.com/web/grid/remote-data.html for an example.