Unable to get KnockoutJS to work correctly with KendoUI ListView & KendoPager

Question

I'm trying to do pagination with a KendoUI ListView and KendoUI Pager with KnockoutJS. The creating of the ListView works just fine. The problem is trying to get the Pager to work.

I'm using the knockout-kendo.js bindings.

Here's the HTML code:

<div data-bind="kendoListView: {  dataSource: { data:fruits ,pageSize:2 }, data: fruits, 
template: template, pageable:true, selectable:'single', change: function(evt){ selectedId
(evt.sender.dataSource.view()[evt.sender.select().index()].id) } }" ></div>

<div id="pager" class="k-pager-wrap" data-bind="kendoPager: { dataSource: {  
data:fruits ,pageSize:2 } }"> </div>
<hr/>
<hr/>
Selected Id: <strong data-bind="text: selectedId"> </strong>
<hr/>

Here's the javascript code:

var ViewModel = function () {
    var self = this;
    self.template = '<div>#= name #</div>';
    self.fruits = ko.observableArray([
    { id: "1", name: "apple", },
    { id: "2", name: "orange",},
    { id: "3", name: "banana",},
    { id: "4", name: "pear",}
]);

    // this kinda of works by showing the navigation bar, but navigation doesn't work
    //$("#pager").kendoPager({
    //    dataSource: self.fruits()
    //});

    self.selectedId = ko.observable();
    self.selectedChoice = ko.computed(function () {
        var id = self.selectedId();
        if (id) {
            return ko.utils.arrayFirst(self.fruits(), function (fruit) {
                return fruit.id == id;
            });
        }
    }, this);
};

ko.applyBindings(new ViewModel());

I've searched low & high, but have not been able to find anything about trying to get these two widgets to work together using knockoutjs. Any help is appreciated.

Here is the jsfiddle link: http://jsfiddle.net/camde/WN57W/2/

Answer 1

Note: First of all, you have to add the following binding to the knockout-kendo.js file

createBinding({
 name: "kendoPager",
 defaultOption: DATA,
 watch: {
    data: function(value, options) {
        ko.kendo.setDataSource(this, value, options);
    }
 }
});

Create a kendo datasource as below in your viewmodel,

var mediaDataSource = new kendo.data.DataSource({
            data: fruits ,
            pageSize: 2
});

And Provide datasource details to pager and the list view. eg below:

<div id="mediaList" data-bind="kendoListView: {
    data: fruits,
    dataSource: yourdatasource,
    pageable: true, 
    selectable: 'single'
    }"></div>
<div id="pager" class="k-pager-wrap" data-bind="kendoPager: { data: fruits, dataSource: yourdatasource}">