How to refresh KO.Computed fields bound with Editable KnockOut-Kendo Grid immediately?

Question

I am trying to create a 2-way binding in Kendo Grid. When using editing feature in Kendo Grid and having Computed Observables on the view model it becomes essential to have 2 way bindings. The only solution that I could find is :

Knockout-Kendo Grid with batch editing doesn't update the viewmodel

Created feedle based on above solution with KO.computed field, in this sample

Kendo grid with ko.computed field

,the edited data does not update the view model until we click on Synchronize button. How to update it immediately?

Here is my solution :

var grid = $("#grid").data("kendoGrid");
grid.bind("save", grid_save);
grid_save = function (e) {
        if (e.values.first) { // Check if the first name changed
           if (e.values.first != e.model.first) {// Compare with previous value
                var people = self.people() || []; // Navigate through KO view model
                $.each(people, function () {
                    if (this.first() == e.model.first) {
                        this.first(e.values.first); // Update KO View Model
                    }
                });
            }
        }

Here is fiddle for Kendo grid with Ko.computed refreshing immediately

I am trying to update my view model immediately using grid's save event. This means this event will fire on every cell change. Looks little ugly. Is there any other elegant solution?

Gabe Gabe · Accepted Answer · 2013-12-13T10:43:24

I have updated your fiddle with the following. Instead of looping through all the data you can update only the changed row.

http://jsfiddle.net/Kunfc/6/

var getWidget = function (elem){
    return $(elem).data('kendoGrid');
};

var updateModel = function (model, modelChanges){
    for (prop in modelChanges) {
        model[prop](modelChanges[prop]);
    }
};

     this.grid_save = function (e) {
            var grid = $("#grid");
            var widget = getWidget(grid.get(0));
            var gridData = widget.dataSource.data();

            var row = $(e.container).closest("tr");
            var rowIdx = grid.find("tr").index(row);
            var colIdx = widget.cellIndex(e.container);//$("td", row).index(this);

            var idx = gridData.indexOf(e.model);

            var model = self.people()[idx];
            updateModel(model, e.values);
        };

Hope this helps

How to refresh KO.Computed fields bound with Editable KnockOut-Kendo Grid immediately?

1 Answers