KendoGrid DataSource with server paging

[David]

I would like to implement server paging so I retrieve a subset of data (50 records) from the server a put it into an observable array called self.grdTableData. I then create a Kendo DataSource as follows:

                  var grdTableResults = $("#grdTableResults").data("kendoGrid");

                    var ds = new kendo.data.DataSource({                      
                        data: self.grdTableData, //observableArray
                        serverPaging: true,
                        pageSize: 50,
                        total: joOutput["TotalRecords"], // total count of all data retrieved from table
                        schema: {
                            data: "data",
                            total: "total"
                        }
                    });

                    grdTableResults.setDataSource(ds);

However, when I set the data source, my grid contains the first page of data, but has a rotating stream of circles like it is waiting for something to finish. Further investigating revealed that there was actually an "Uncaught TypeError: cannot read property length of undefined" which pointed to line 4690 of kendo.web.js v2012.3.1114. So I'm wondering what the the value "array" is (any why it's undefined) in this instance with reference to how my data source is being constructed and what, if anything, I'm missing, or misconfiguring while I'm creating the data source so that I can use server paging. Any comments, suggestions, or insights on this are greatly appreciated. Thanks!

[Petur Subev]

Hello David,

Basically 

schema: {

data: "data",
total: "total"

}

Schema.data means that the collection with items will be under a field called data. In your case it does not (maybe you need to remove it).

Same goes with total.

Live example here:

http://jsbin.com/agiloc/2/edit

Regards,
Petur Subev
the Telerik team