Search code examples
kendo-uikendo-asp.net-mvckendo-datasourcekendo-listview

How to pass page number to kendo datasource, so it could load data of page 2?


Following code builds my kendo DataSource:

 var dataSource = new kendo.data.DataSource({
                serverPaging: true,
                schema: {
                    data: "ListMediaSummary",
                    total: "RowCount",
                },
                transport: {
                    read: {
                        url: gAppBaseURL + "UniversalSearch/SearchData?searchText=" + searchText + "&pageNumber=" + page,
                        type: "POST",
                        dataType: "json",
                    }
                },
                parameterMap: function (data, type) {
                    if (type == "read") {
                        return {
                            $top: data.take,
                            $skip: data.skip
                        }
                    }
                },
                page: 1,
                pageSize: 25,
            });

And from here I am passing the parameter "searchText" and "PageNumber" from the transport.read method to the Action method in my asp.net controller, after which the search results gets rendered into kendo listView. The action method gets the "searchText" value but it dosent gets the pageNumber? Although in the post it does passes the Page number(checked in firebug) but what I want is to pass the page number to the transport.read method in my function. How could I achieve this?


Solution

  • To enable server paging, you should configure data source to enable serverPaging. Then the data source will leave the data item paging implementation to the remote service. By default the data source performs paging client-side.

    <script>
    var dataSource = new kendo.data.DataSource({
      transport: {
        /* transport configuration */
      },
      serverPaging: true,
      schema: {
        total: "total" // total is returned in the "total" field of the response
      }
    });
    </script>
    

    Don't forget to set schema.total if you set serverPaging to true.

    The following options are sent to the server when server paging is enabled:

    • page - the page of data item to return (1 means the first page)
    • pageSize - the number of items to return
    • skip - how many data items to skip
    • take - the number of data items to return (the same as pageSize)

    Therefore you should change your controller action method to something like this:

    public ActionResult GetData(int page, int pageSize, int skip, int take){
        // do some magic operation
    }