knockout.js - kendogrid binding with an observable array -

i trying example of binding knockout observable array kendogrid, not successful.

below code have created observable array called- allusers, array of user object.

define(['kendo'], function (kendo) {      function user(userid) {         return {             userid: ko.observable(userid),         };     }      var vm = {         activate: activate,         attached: attached,         adduser: adduser,         allusers: ko.observablearray([]),         userid: ko.observable(),      };      return vm;      function activate() {         return true;     }      function attached() {          $("#grid").kendogrid({             datasource: vm.allusers,             groupable: true,             sortable: true,             height: 250,             pageable: true,             pagesize: 5,             columns: [{                 field: 'userid',                 title: 'user id',                 width: 200             },             {                 command: 'destroy',                 title: ' ',                 width: 150             }]         });          return true;     }      function adduser() {          vm.allusers.push(new user("testing"));          return true;     } }); 

the html code same:

<div id="header" class="form-horizontal form-widgets">         <fieldset>              <label for="userid" class="required" style="margin: 20px 20px 20px 20px">user id</label>             <input id="userid" style="margin-right:20px" class="k-textbox" data-bind="value: userid" required />             <button type="button" id="adduserbutton" data-bind="click: adduser" style="margin-bottom:30px">add user</button>         </fieldset>         <div id="grid"></div>     </div> 

can let me know wrong binding? on click of add user button, user should added observablearray , should reflect in grid. both not happening.

thanks in advance.

the kendogrid needs deal plain objects. so, bind against like:

datasource: ko.tojs(vm.allusers) 

this recursively unwrap observables , return plain object.

when add new item observable array, have let kendogrid know data source has changed. example, subscribe array changes on observablearray , make updates grid like:

vm.allusers.subscribe(function(changes) {    var grid = $("#grid").data("kendogrid"),        datasource = grid && grid.datasource;      if (datasource) {         //loop through changes make adds         ko.utils.arrayforeach(changes, function(change) {             if (change && change.status === "added") {                datasource.add(ko.tojs(change.value));                }         });     } }, vm, "arraychange"); 

sample: http://jsfiddle.net/rniemeyer/e8dmq/

you can explore using knockout-kendo bindings here: http://kendo-labs.github.io/knockout-kendo/, if want more integration.