Client Side Paging Problem

Thread is closed for posting
5 posts, 1 answers
  1. AP
    AP avatar
    245 posts
    Member since:
    Apr 2010

    Posted 13 Dec 2012 Link to this post

    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
  2.
  3. Answer
    Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 13 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. AP
    AP avatar
    245 posts
    Member since:
    Apr 2010

    Posted 13 Dec 2012 Link to this post

    Thanks, that's solved my problem.

    The data did contain the number of records, I just didn't know the data source needed it.
  7. As
    As avatar
    1 posts
    Member since:
    Apr 2013

    Posted 18 Mar 2016 in reply to Rosen Link to this post

    How can I build such json-response using asp.net web.api?
  8.
  9. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 21 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top