Binding a kendo grid with knockout 3.1

Question

I'm using the latest versions pf Knockout, Kendo and the Knockout-Kendo bindings, but I'm having trouble getting this simple example to bind. I'd like to bidn the grid to the observable array. I'd also like to bind the paging parameters to the corresponding observable properties in the model. What am I missing here that's preventing the grid from binding to the data correctly? How so I bind the pager properties?

Here's the JS Fiddle

Here's the HTML code.

<div><h2>Names List</h2></div>

<div data-bind="kendoGrid: { data: names, rowTemplate: 'rowTmpl', useKOTemplates: true, paging: { pageSize: 3} }"></div>
<div id="pager"></div>

<script id="rowTmpl" type="text/html">
    <tr>
        <td data-bind="text: $data"></td>            
    </tr>
</script>

<script>
    var vm = new ViewModel();
    ko.applyBindings(vm);
</script>

and here's the Javascript

var ViewModel = function () {
    var self = this;
    self.selectedPageSize = ko.observable(3);
    self.selectedPage = ko.observable(1); 
    self.totalPages = ko.observable(); 

    self.names = ko.observableArray(["Fred", "Barney", "Wilma", "Betty", "Tom", "Dick", "Harry"]);
}

There is a typo here self.names = ko.observableArray(["Fred", "Barney", "Wilma", "Betty", "Tom". "Dick", "Harry"]); (. instead of , after "Tom") — GôTô
Thanks. I corrected the typo here and in the jsfiddle. Still have the same issues. — Steve Wash
I have 404 on your libraries in the fiddle (maybe they are private?). I'll replace them with links from cdnjs.com and check — GôTô
I moved your ko.applyBindings after your ViewModel function. Is this what you have? fiddle — GôTô
That's definitely in the direction I want to go. How do I get the paging to work? Thanks for your help. — Steve Wash

GôTô GôTô · Accepted Answer · 2014-07-07T12:31:19

I have put your ko.applyBindings after the ViewModel function.

As for the paging, the correct syntax is:

<div data-bind="kendoGrid: { data: names, 
                             rowTemplate: 'rowTmpl', 
                             useKOTemplates: true, 
                             dataSource: { pageSize: 3 }, 
                             pageable: true  }"></div>

fiddle

Binding a kendo grid with knockout 3.1

1 Answers