Client Side Paging Problem

[AP]

I've got a kendo grid, linked to a data source:-

<div style="width:400px; margin-top:15px; font-size:x-small;">

 

    <div id="fileTable"></div>

 

 

</div>

 

<script type="text/javascript">

 

    $(document).ready(function () {

 

        var fileData = new kendo.data.DataSource({

            transport: {

                read:{

                    url:"@Url.Content("~/Import/GetFileList")",

                    dataType:"json"

                }

            },

            schema:{

                data: "Files"

            },

            pageSize: 5,

            page:1,

            serverPaging: false

        });

 

 

        $('#fileTable').kendoGrid({

            dataSource: fileData,

            columns: [

                {

                    field: "FileName",

                    title: "File Name"

                },

                {

                    field: "FileSize",

                    title: "Size"

                },

 

                {

                    field: "FileDateText",

                    title: "Date"

                }

            ],

            pageable: {

                refresh: true,

                pageSizes: true,

                previousNext: true

            },

            scrollable: false

        });

 

    });

This displays a grid, and shows the first 5 entries, however the page number is shown as 0, and paging doesn't work (even though there are 15 records in the data source - confirmed via fiddler). If the page size is changed however, paging starts to work.

How can I get paging to work from the start?  - Note I want to use client side paging - not server side.

Thanks

[Rosen]

Hi,

Could you please verify that the data returned from the remote URL does contain the total number of records. Also you should declare the field which holds this value in the schema declaration.

For example if the response is in the following format:

{
    "Files" : [ { /*...*/}, { /*...*/} .... ],
    "Total": 100
}

DataSource schema should look similar to the following:

schema: {
    data: "Files",
    total: "Total"
}

Regards,
Rosen
the Telerik team

[AP]

Thanks, that's solved my problem.

The data did contain the number of records, I just didn't know the data source needed it.

[As]

How can I build such json-response using asp.net web.api?

[Rosen]

Hello Nick,

An example how to populate Kendo UI Grid widget via a WebApi service can be found here.

If you continue to experience difficulties please consider opening a separate support request in which to provide detailed information about the concrete issue you are facing.

Regards,
Rosen
Telerik