KendoUI MVVM Binding manually updating the source from displayed value

Question

The situation: I've extended a grid, and added an onkeydown event to listen for tab or arrow, whcih will allow the user to go to the next "editable" cell. I do this using ...

var grid = $("#" + that.gridId).data('kendoMyExtension');
grid.closeCell(currentCell); 
grid.editCell(desiredCell);

Current behavior: it works as expected however the when the cell closes, it doesn't persist the data (thru the correct binding) to the ViewModel.Field to which it is bound. ... However IFF you hit enter after making your changes, you will persist the changes.

What I've tried: Manually making the update before I make the focus change (and fire off all those other kendo editing goodies) using

{grid Context}
that.saveRow();
that.dataSource.sync();

however these do not work. and usually end up throwing a undefined error somewhere in the bowels of kendo.

What I want:

Ideally kendo would supply at least one MVVM and kendo extension example (for a grid) that has all the functionality, events, etc. being bound to .. but.. since I will probably not get that asking here I will settle for:

Where does kendo "store" the changes?
What method is used to actually call the update {for a MVVM binding NOT a dataSource}.
Did I miss a binding keyword in the spirit of {one-way, two-way}?
Is kendo based on knockout.. can i use knockout techniques to get around the issues I'm having with kendo.

there are also a lot of other modifications to the display logic on this grid.. I am using a template to determine if the cell should be editable, a template to determine what should be rendered in nonedit & edit mode, and some IOC logic to wire it into the extension... (FYI)

Larry Louisiana Larry Louisiana · Accepted Answer · 2013-06-19T22:57:57

o.k. after stepping thru kendo I found the issues... my datasource didn't have a reader (and it shouldn't afik) so sync and saveRow will not work reliably.

You MUST make sure the row is marked as 'k-edit-row' in your edit template :

{your edit template selector}.closest('tr').addClass("k-grid-edit-row");

if you want to get the saveRow to work, however in my case it wasn't reliable( it would only work if i stepped thru the code, otherwise fail every time...I have no clue as to why even tried the ever popular 'setTimeout(...)' ....) eventually this is what I ended up doing:

myOnKeyDown:function(e){
    var cell = $(e.target).closest("td")[0];
    var row = $(e.target).closest("tr")[0];
    if (cell != undefined) {
        that.forceSync(cell, row, e.target.value);
    }
},


forceSync: function (cell, row, value){
    /// this is in the extension scope /////
    ///  Note that this uses functions in the dataSource Scope! ///
    var cellFieldName = cell.kendoBindingTarget.target.options.fields.field;
    var cellRecordUid = row.getAttribute('data-uid');
    var that = $("#" + this.gridId).data('kendoMyExtension').dataSource, idx, length;
    var data = that._flatData(that._data);
        for (idx = 0, length = data.length; idx < length; idx++) {
            if(data[idx].uid ===cellRecordUid){
                data[idx][cellFieldName] = value;
            }
        }
    },

... well after the considerable amount of time spent on this I felt that someone else should benefit...

Really hope it helps someone else.. -cheers.

KendoUI MVVM Binding manually updating the source from displayed value

1 Answers