kendo bind HTML elements to grid selected row/dataItem

kendo-ui, mvvm

Solution

So far I have found the following solution:

=== JAVASCRIPT ===
var vm = kendo.observable({
    gridSelectedItem: null,

    _field1: function() { 
        return this.get("gridSelectedItem.field1"); 
    },
    _field2: function() { 
        return this.get("gridSelectedItem.field2"); 
    }
});

$("#grid-element").kendoGrid({
    change: function(e) {
        var selectedItem = this.dataItem(this.select());
        vm.set("gridSelectedItem", selectedItem);
    }
});


=== HTML ===
<span data-bind="text: _field1"></span>
<span data-bind="text: _field2"></span>

Is there a better way?

Problem

I have the following situation (using KendoUI): I have a grid binded to a datasource. When I select a row in the grid I invoke its "change" event to get the selected dataItem e show its values through other HTML elements. Something like the following: ``` $("grid-element").kendoGrid({ change: setElements }); function setElements() { var grid = $("#grid-element").data("kendoGrid"); var selectedItem = grid.dataItem(grid.select()); $("#span-field1").text(selectedItem.field1); $("#span-field2").text(selectedItem.field2); $("#span-field3").text(selectedItem.field3); } ``` My question is: is it possibile to achieve the same through MVVM or a better KendoUI model binding solution?

Original source