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

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>