3

I have a Kendo UI Grid and it's always starting at 0.

If I change the sort on a column then it goes to 1 and shows the other page numbers.

What am I doing wrong?

Here is my code:

$('#userGrid').kendoGrid({
                dataSource: {
                    pageSize: 5,
                    transport: {
                        read: {
                            url: ROOT+"user/user-list",
                        },
                        update: {
                            url: ROOT+"user/update-user",
                            dataType: "POST"
                        }
                    },
                    error: function(e) {
                        alert(e.responseText);
                    },
                    schema: {
                        data: "data",
                        model: {
                            id: 'id',
                            fields: {
                                username: {type: "string", editable: false},
                                type: {
                                    type: "number",
                                    editable: true,
                                    validation: {required: true}
                                },
                                level: {
                                    type: "number",
                                    editable: true,
                                    validation: {required: true}
                                },
                                firstName: {type: "string", editable: true},
                                middleName: {type: "string", editable: true},
                                lastName: {type: "string", editable: true},
                                DoB: {type: "date", editable: true},
                                dateStarted: {type: "date", editable: false},
                                enabled: {
                                    type: "number",
                                    editable: true,
                                    validation: {required: true}
                                },
                            }
                        }
                    }
                },
                toolbar: ["save", "cancel"],
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: false
                },
                editable:true,
                columns:
                [
                    {
                    field: "username",
                    width: 90,
                    title: "Username"
                    },
                    {
                    field: "type",
                    width: 50,
                    title: "Type"
                    },
                    {
                    field: "level",
                    width: 25,
                    title: "Level"
                    },
                    {
                    field: "firstName",
                    width: 50,
                    title: "First name"
                    },
                    {
                    field: "middleName",
                    width: 50,
                    title: "Middle name"
                    },
                    {
                    field: "lastName",
                    width: 50,
                    title: "Last name"
                    },
                    {
                    field: "DoB",
                    width: 40,
                    title: "DoB",
                    template: '#= kendo.toString(DoB,"dd/MM/yyyy") #'
                    },
                    {
                    field: "dateStarted",
                    width: 40,
                    title: "Started",
                    template: '#= kendo.toString(dateStarted,"dd/MM/yyyy") #'
                    },
                    {
                    field: "enabled",
                    width: 40,
                    title: "Enabled"
                    }
                ]
            })
        })
    }
) ;
})

{"data":[{"id":"1","username":"admin@eu","type":"1","level":"12","firstName":"Tom","middleName":"C","lastName":"Higgins","DoB":"0000-00-00","dateStarted":"0000-00-00","enabled":"0"},{"id":"36","username":"liam.spelman@euautomation.com","type":"4","level":"12","firstName":"Liam","middleName":"","lastName":"Spelman","DoB":"0000-00-00","dateStarted":"0000-00-00","enabled":"0"},{"id":"56","username":"adf@sadf.com","type":"4","level":"1","firstName":"asdf","middleName":"","lastName":"asdf","DoB":"1970-01-01","dateStarted":"0000-00-00","enabled":"0"},{"id":"57","username":"adf@saddf.com","type":"4","level":"1","firstName":"asdf","middleName":"","lastName":"asdf","DoB":"1970-01-01","dateStarted":"0000-00-00","enabled":"0"}], "rowcount": 4}
imperium2335
  • 23,402
  • 38
  • 111
  • 190

1 Answers1

9

Is your server returning the total number of records?

If it is, define the schema as (assuming that total_size is where the server is returning the total number of records):

schema   : {
    data: "data",
    total: "total_size",
    model: {
        ...
    }
}

If not, try adding to your schema a total function that gets it from the size of data array:

schema   : {
    data: "data",
    total: function(data) {
        return data.data.length;
    },
    model: {
        ...
    }
}
OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • Thanks, that has fixed the page number problem but I forgot to mention, I also have "NaN - NaN of 4 items", how do I fix this one? (it shows what it should when you sort the columns) – imperium2335 Jan 10 '13 at 11:55
  • Um! It should have fixed both! Does it get fixed if you click on grid refresh button? How does the received data look like? – OnaBai Jan 10 '13 at 12:16
  • I have edited in an example of the data that's coming back from the server. The Kendo UI grid documentation leaves a lot to be desired!! – imperium2335 Jan 10 '13 at 12:32
  • Also do you know how I can implement server side paging and sorting etc? Or do you know of a good reference I can read as I can't find anything on this stuff I'm trying to do :( – imperium2335 Jan 10 '13 at 12:34
  • I wrote something in my blog about data sent to the server for implementing it and how should the response look like. – OnaBai Jan 10 '13 at 13:02
  • Could you provide me a link to a page on your blog that deals with using PHP/MySQL with Kendo Grid? and I'll accept answer. – imperium2335 Jan 10 '13 at 13:06
  • :-( That post was about CouchBase and Java. – OnaBai Jan 10 '13 at 13:09
  • I think it is something to do with how Grid communicates with my PHP code. I have read that when Grid "reads" it sends a GET request, but when I try to echo or print $_GET, I get an empty array. I assume Grid is supposed to send the start and offset parameters used by LIMIT in the SQL statement? Or am I wrong? – imperium2335 Jan 10 '13 at 13:13
  • +1 for your help and answer about total_size. I discovered that it is my page router losing the query string! – imperium2335 Jan 10 '13 at 13:36
  • Yes, you are right about the limit. You get something like `{ "take": 10, "skip": 0, "page": 1, "pageSize":10, }`. Important `skip` refers to the first record to retrieve (how many to skip), `take` refers to how many you should retrieve. Take a look into [this](http://stackoverflow.com/questions/12928744/how-to-implement-server-side-paging-in-client-side-kendo-ui-grid-in-asp-net-mvc) – OnaBai Jan 10 '13 at 15:30