Kendo UI Hierarchical datagrid - How to access root viewModel from detail grid editor template MVVM

Question

I have a grid within a grid, where parent grid is constructed in MVVM, child grid initialized on its data-detail-init http://jsbin.com/kuvejuw

<div data-role="grid"
     data-columns="[
                   { 'field': 'FirstName'},
                   { 'field': 'LastName'}  
                   ]"
     data-bind="source: dataSource"
     data-detail-init="viewModel.detailInit"
     >
</div>

If have a custom property (e.g. Text here) on the viewModel, and in the popup editor of the child grid, I would like to bind to this property. So e.g. in more complex scenarios I can populate a dropdownlist with a range of values by having an array (or observable array) on the viewModel.

var viewModel = kendo.observable({
  dataSource: new kendo.data.DataSource ... // everything works here,
  detailInit: detailInit,
  Text: "This text should be displayed in editor in detail's grid",
});  

kendo.bind(document.body, viewModel);

The problem is that this property (or overall viewModel) is not detectable in the template of the detail grid's editor:

function detailInit(e){
...    
editable: {
          mode: "popup",
          template: kendo.template($("#child-editor-template").html())
        }
...
}

Template is built like this:

  <script type="text/x-kendo-template" id="child-editor-template">
     <span data-bind="text: Text"></span> 
  </script>

but I also tried data-bind="text:viewModel.Text". I tried various solutions, setting the Text property on viewModel in detailGrid's edit event, or setting it on viewModel bind, but it does not work with this jsBin (3.2016 version).

Now funny thing is that I actually able able to access this property with a 2015v3 Kendo UI in my local project, but I cannot replicate it in this jsBin.

In my local project though I still cannot access the events in ViewModel e.g. I could do text: Text, but could not do events: {select: onSelect}.

Accessing the events would be ultimately the reason for asking this question once this thing is sorted, I'm looking for some hints to understand what's going on, if I'm expecting too much from mvvm.

EDIT:

I'm looking forward to this type of functionality that would be enabled in the popup editor of the child grid http://jsbin.com/canomux

Answer 1

It seems the way of retrieving the data from API was somewhat unexpected, so with change of:

options.success(e.data.Orders.results.toJSON());

to

options.success(e.data.Orders.results);

the binding of text works.

With the events binding it is not working - it seems it's not something to do with detailGrid but in general with grid, which is described here