Kendo UI: How to bind Kendo UI hierarchical datagrid detailInit event using MVVM (data-attribute) - mvvm

Question

I am constructing a hierarchical datagrid using Kendo UI and I am using MVVM methodology for widget binding.
Here is the DEMO of the kind of hierarchical grid I want to make. But the example here uses jQuery and not MVVM.
How can I bind the detailInit event to my viewModel using data attributes using MVVM?
I want to bind the event using the below code but it is not working:
JS:
var viewModel = kendo.observable({
......
..........
dataGridDetailInit: function (e) {
//Here I want to catch the detailInit event of the dataGrid
},
..........
......
});
HTML (Kendo template):
<!-- Datagrid -->
<div data-role="grid"
data-columns="[
{'field':'FullName', 'title':'Full Name'},
{'field':'Email', 'title':'Email'},
{'field':'HomeTel', 'title':'HomeTel'},
{'field':'Mobile', 'title':'MobileTel'},
{'field':'Contact_Type', 'title':'Contact Type'},
]"
data-bind ="source: address_book_datagrid_observable.datasource,
events: {
detailInit: dataGridDetailInit
}"
data-pageable='{
refresh: false,
pageSizes: true,
buttonCount: 5,
}'
data-navigatable = "true"
data-resizable = "true"
data-no-records= "true"
data-messages = '{
noRecords: "There is no data to be displayed"
}'
>
</div>

Answer 1

Ok, so while researching I came across this link.
On this issue, an engineer from Telerik asserted this:
All Kendo widgets can be configured via data attributes. Building a
hierarchical grid declaratively is supported too, however please have
in mind that: detailInit event should not be bound through the events
binding but via data-attribute.
Here is the example of how the event binding could be accomplished.
The right way to bind detailInit event to viewModel using MVVM (data attibute is) using data-detail-init as below:
<!-- Datagrid -->
<div data-role="grid"
data-columns="[
{'field':'FullName', 'title':'Full Name'},
{'field':'Email', 'title':'Email'},
{'field':'HomeTel', 'title':'HomeTel'},
{'field':'Mobile', 'title':'MobileTel'},
{'field':'Contact_Type', 'title':'Contact Type'},
]"
data-bind ="source: viewModel.datasource"
data-detail-init="viewModel.dataGridDetailInit"
data-pageable='{
refresh: false,
pageSizes: true,
buttonCount: 5,
}'
data-navigatable = "true"
data-resizable = "true"
data-no-records= "true"
data-messages = '{
noRecords: "There is no data to be displayed"
}'
>
</div>