Kendo Grid with batch editing doesn't update the viewmodel

[aleksanderson]

Hi,

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. You can see an example here: http://jsfiddle.net/aleksanderson/hd5c8/

What is the reason of such behavior?

Thanks in advance.

[rniemeyer]

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);   
                }
            }
        };
    };

[chitza]

Any hints about how you would implement this? I'm willing to try developing this, but I would really use some help starting it. Thanks in advance.

[rniemeyer]

@chitza - I haven't spent much time looking into it, but Derick's article would be a decent place to start as far as a custom data source. The data source would need to sync data like in the above sample.

[chitza]

Thanks, I'll look into it next week and I'll post my conclusions.

[luferogo]

The code snippet provided above is a good base. We had just implemented. But, the thing begins to complicate when trying to add/delete/edit rows without having an uid in the ko model...

Any ideas?

[gudlanur]

Hi,

How to Kendo grid Edit and Delete operation using MVC5 and knockout.js ,VS2013

Thanks in adavance Regards, N.Y.GUDLANUR

[ronniemacapobre]

@luferogo, were you able to figure out how to deal with CRUD operations?

[luferogo]

@ronniemacapobre , Nope. We just decided to use the grid's "transport" methods , and in the read method pass the ko.toJS. So we do not have a real bounded grid to ko model.