This is a migrated thread and some comments may be shown as answers.

Cannot Get Paging to Work

8 Answers 224 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Veteran
AP asked on 23 Nov 2011, 04:50 PM
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

8 Answers, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 24 Nov 2011, 08:47 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rahul
Top achievements
Rank 1
answered on 30 Dec 2011, 09:29 AM
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
0
Atanas Korchev
Telerik team
answered on 30 Dec 2011, 09:44 AM
Hi,

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

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rahul
Top achievements
Rank 1
answered on 30 Dec 2011, 09:46 AM
hey. thanks that fixed it.
0
Guy
Top achievements
Rank 1
answered on 20 Apr 2012, 09:46 AM
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
0
Alexander Valchev
Telerik team
answered on 21 Apr 2012, 02:04 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Guy
Top achievements
Rank 1
answered on 23 Apr 2012, 09:48 AM
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
0
Jean-Yves Vinet
Top achievements
Rank 1
answered on 24 Mar 2013, 01:29 AM
data.length is working

schema: { data: "data", total:"data.length"}
Tags
Grid
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Atanas Korchev
Telerik team
Rahul
Top achievements
Rank 1
Guy
Top achievements
Rank 1
Alexander Valchev
Telerik team
Jean-Yves Vinet
Top achievements
Rank 1
Share this question
or