Server paging in Knockout-Kendo Grid bound to local (server-filled) ko.observableArray property in viewmodel

Question

I am using Knockout-Kendo.js library for my js + HTML5 SPA. In my viewmodel I have a myItems Knockout Observable Array. I have a client-side repository that is responsible for getting data from server and keeping it. I want to be able to fill myItems in my viewmodel based on a POST request to an API that sends a filter object (containing filters and paging info) to server and returns a list of filtered items.

As much as I know the Knockout-Kendo doesn't support Kendo Grid DataSource. I should set the source via its data property instesd of dataSource. Am I right? If yes, can I achieve the requirements in the question below?
How can I set grid's options so that I set the total number of results, page number, top, skip, etc. for server paging? (I should be able to set my filter object in viewmodel based on the clicked page number of Kendo Grid for example, and send it with my POST request to server.)
Also, to be able to get the total number of items for paging, should I receive JSON data from server in a format like this: {total: 675, data: {some JSON array containing items for the current page}} or there are alternatives to achieve this?

RP Niemeyer RP Niemeyer · Accepted Answer · 2013-03-09T16:25:42

You can actually use a dataSource directly if you need to in Knockout-Kendo. If you specify the data option with either false or {} and then specify the dataSource option as well, then it will use it.

For example, you could bind it like:

<div data-bind="kendoGrid: gridOptions"></div>

With a view model:

var grid = {
  data: false,
  dataSource: {
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
      model: {
        fields: {
          OrderID: {
            type: "number"
          },
          Freight: {
            type: "number"
          },
          ShipName: {
            type: "string"
          },
          OrderDate: {
            type: "date"
          },
          ShipCity: {
            type: "string"
          }
        }
      }
    },
    pageSize: 50,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
  },
  height: 250,
  sortable: true,
  pageable: true,
  columns: [{
    field: "OrderID",
    filterable: false
  },
    "Freight", {
    field: "OrderDate",
    title: "Order Date",
    width: 100,
    format: "{0:MM/dd/yyyy}"
  }, {
    field: "ShipName",
    title: "Ship Name",
    width: 200
  }, {
    field: "ShipCity",
    title: "Ship City"
  }]
};

ko.applyBindings({
  gridOptions: grid
});

Sample here: http://jsfiddle.net/rniemeyer/shwrb/

Server paging in Knockout-Kendo Grid bound to local (server-filled) ko.observableArray property in viewmodel

2 Answers