Knockout-Kendo Grid with batch editing doesn't

Question

I don't know what is wrong with my implementation but I can't get my viewmodel updated if I'm using editable KendoUI Grid with Knockout-Kendo. If I change some particular table field and log the viewmodel it will not get any update.

<button data-bind="click: log">Log ViewModel</button>
<div id="gr" data-bind="kendoGrid: options"></div>

var pStyleHeader_ViewModel = function() {
this.options = {
    data: ko.observableArray([{ StyleNo : ko.observable("1BA0012"),
                                Description : ko.observable(""),
                            StyleType : ko.observable("10"),
                            DueDate : ko.observable(new Date("2012-10-31T00:00:00+02:00"))}]),
    sortable: true,
    columns: [{"field":"StyleNo","title":"Style No"},{"field":"Description","title":"Description"},{"field":"StyleType","title":"Style Type","editor":StyleTypeDropDownEditor,"values":StyleTypeValues},{"field":"DueDate","title":"Due Date","type":"date","format":"{0:MM/dd/yyyy}"}],
    editable: true,
    selectable: true,
    pageable: { pageSize: 5 }
};

ko.applyBindings(new pStyleHeader_ViewModel());

You can see an example here: http://jsfiddle.net/aleksanderson/hd5c8/

What is the reason of such behavior?

Thanks in advance.

Answer 1

The dataSource to KO integration is not seamless at the moment. Since, the Kendo widget does not know how to handle observables directly, ko-kendo provides a "clean" version of the data to the widget. This means that updates to that data are not automatically represented in the view model data.

I am looking to explore better dataSource integration with Knockout (likely a KO datasource) where autoSync would update the view model. This is something that will hopefully be happening in the short term.

For now, there are patterns that you can use to sync the data from the grid to your vm.

Sample: http://jsfiddle.net/rniemeyer/73mjn/

Here is a sample view model:

var Person = function(data) {
   this.first = ko.observable();
   this.last = ko.observable();

   this.full = ko.computed(this.getFull, this);

   //initialize it the first time
   this.initialize(data);
};

ko.utils.extend(Person.prototype, {
    getFull: function() {
      return this.first() + ' ' + this.last();     
    },
    //can be called at anytime to initialize/update data
    initialize: function(data) {
      this.first(data.first);
      this.last(data.last);        
    }
});

var ViewModel = function() {
     this.people = ko.observableArray([
         new Person({ first: "Bob", last: "Smith" }),
         new Person({ first: "Doug", last: "Jones" }),
         new Person({ first: "Sally", last: "Green" })
     ]);

    //store a reference to the widget, so we can get at the modified data
    this.people.grid = ko.observable();

    //reconcile the grid data with the view model data
    this.syncData = function() {
       var people = this.people() || [],
           gridPeople = this.people.grid().dataSource.data() || [],
           person, gridPerson, i, length;

        //loop through the grid's people and update each vm person
        for (i = 0, length = gridPeople.length; i < length; i++) {
            gridPerson = gridPeople[i];
            person = people[i];

            //add a new person, if necessary
            if (!person) {
               people.push(new Person(gridPerson));   
            } else {
               person.initialize(gridPerson);   
            }
        }
    };
};