Cannot Get Paging to Work

[AP]

I've finally managed to get a datasource working, and bound to a grid. However, whatever I try, I cannot get paging to work, it always displays the complete dataset.

The code is:-

<table id="Table1" style="height: 450px">

                <thead>

                    <tr>

                        <th data-field="surName">Surname</th>

                        <th data-field="foreName">Forename</th>

                        <th data-field="dOB">DoB</th>

 

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>Smith</td><td>John</td><td>21/5/2001</td>

                    </tr>

</tbody>

</table>

 

<script type="text/javascript">

 

    var s = new GetPats();

 

    var result = s.getpatlist('Benz');

 

    //Data source

 

    var localDataSource = new kendo.data.DataSource({ data: result, pagesize: 10, page:1 });

 

    $("#Table1").kendoGrid({

 

        columns: [{ field: "surName", title: "Surname" }, { field: "foreName", title: "Forename" }, { field: "dOB", title: "Date of Birth", template: '#= kendo.toString(dOB,"dd MMMM yyyy") #'}],         

 

        dataSource: localDataSource,

        groupable: true,

        scrollable: false,

        sortable: true,

        pageable: true,

        height: 450,

        selectable: true

    });

 

</script>

Whilst the data is fetched from a remote source, as far as the kendo datasource is concerned, it's using a locally held array. Sorting and group work well, but no matter waht I try, paging doesn't work, and the date re-formatting also doesn't work.

Thanks

[Atanas Korchev]

Hello Ap,

 You have a typo in your datasource declaration:

var localDataSource = new kendo.data.DataSource({ data: result, pagesize: 10, page:1 });

Should be:
var localDataSource = new kendo.data.DataSource({ data: result, pageSize: 10, page:1 });

I have created a live demo which is available here.

Regards,
Atanas Korchev
the Telerik team

[Rahul]

Hi,

I am facing the same issue. just cannot get paging to work: below is the code : 
var dataSource = new kendo.data.DataSource({
        
        transport: {
            read: {url:"topics.json",
                      dataType:"json"}
        },
       schema: {
            model: {
                id: "topic_id",
                fields: {
                    TopicID: { type: "string" },                    
                    name: { type: "string" },
parent_topic_name: { type: "string" },
                    owner_name: { type: "string" },
description: {type: "string"},

                }
            }
        },

        pageSize: 8,
        serverPaging: true,
        serverFiltering: true,

    });


$("#grid").kendoGrid({
    dataSource: dataSource,   
    pageable: true,
    selectable: true,
toolbar: kendo.template($("#template").html()),
    columns: ["topic_id", "name","parent_topic_name","owner_name","description"],
    change: function() {
        var row = this.select();
        var id = row.data("id");

data is loading properly, but cannot get the paging to work. Anything i am missing ?

Rahul

[Atanas Korchev]

Hi,

 Why have you enabled server paging? Data should be paged server side if server paging is enabled.

Regards,
Atanas Korchev
the Telerik team

[Rahul]

hey. thanks that fixed it.

[Guy]

My problem is that the paging navigation doesn't show up on initial page load - it just shows the page 1 link. 
After I sort the grid, the other page links appear.
How can I get all paging navigation links to appear from the start?

<div id="grid"></div>

 

<script>

 

    $(document).ready(function () {

 

        var source = new kendo.data.DataSource({

            transport: {

                read: { url: "/Admin/Client/GridData" },

                update: {

                    url: "/Admin/Client/Edit",

                    type: "POST"

                },

                destroy: { url: "/Admin/Client/Delete", type: "POST" },

                create: { url: "/Admin/Client/Insert", type: "POST" },

                parameterMap: function (options, operation) {

                    if (operation !== "read" && options.models) {

                        return { models: kendo.stringify(options.models) };

                    }

                }

            },

            batch: true,

            pageSize: 5,

            schema: {

                data: "data",

                model: {

                    id: "ID",

                    fields: {

                        ID: { editable: false, type: "number", defaultValue: 0 },

                        Name: { editable: true, validation: { required: true } },

                        Email: { editable: true, type: "email", validation: { required: true} },

                        Agent: { editable: false },

                        IsActivated: { editable: false }

                    }

                }

            }

        });

 

        $("#grid").kendoGrid({

            dataSource: source,

            navigatable: true,

            scrollable: true,

            sortable: true,

            pageable: true,

            columns: [

                { field: "Name", template: '<strong>#= Name #</strong>' },

                { field: "Email", title: "Email address", width: "50ex", template: '<a href="mailto:#= Email #">#= Email #</a>' },

                { field: "Agent", template: kendo.template($("#agent-template").html()) },

                { field: "IsActivated", title: "Activated", template: '<input type="checkbox" #= IsActivated ? "checked=checked" : "" # disabled="disabled" ></input>', width: "15ex" },

                { template: '<a href="Client/Edit/#= ID #" class="Button">Edit</a>', width: "12ex" },

                { template: '<a href="Users/Security/#= IdentityUniqueIdentifer #" class="Button">Security</a>', width: "15ex" }

                ],

            editable: false

 

        });

    });

 

</script>

Many thanks

[Alexander Valchev]

Hello Guy,

Could you please try to define the total function of the schema: total: "data.total" or check if the total number of records is returned by the service and pass it?
If that does not help, it would be best if you provide a sample runnable project or at least the Json response send back from the server.

All the best,
Alexander Valchev
the Telerik team

[Guy]

Hello Alexander,

Thank you - problem solved.
data.total didn't work, but I added the total as a separate value alongside data and used total: "total"

Guy

[Jean-Yves Vinet]

data.length is working

schema: { data: "data", total:"data.length"}