Kendo UI: How to bind Grid/Detail template when using hierarchical datagrid 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 detail template for detail row using data attributes using MVVM?

I have tried to bind the detailTemplate using the below code but it is not working:

JS:

var viewModel = kendo.observable({
    ......
    ..........
    gridDetailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
    ..........
    ......
});

HTML (Kendo template):

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Gender', 'title':'Gender'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
    ]" 
    data-bind ="source: viewModel.datasource" 
    data-detail-init="viewModel.getGridRowDetailData"
    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"
    }'
    data-detail-template="viewModel.gridDetailTemplate"
    >
</div>

Answer 1

Finally, this is how I accomplished it:

I removed the detailTemplate from viewModel and created a template section in the view file and bound it with the template id using data-detail-template="data_grid_row_detail_template"

Here is my final code:

JS:

var viewModel = kendo.observable({
    ......
    ..........
    //no need of the below line here
    //gridDetailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
    ..........
    ......
});

HTML (Kendo template):

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Gender', 'title':'Gender'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
    ]" 
    data-bind ="source: viewModel.datasource" 
    data-detail-init="viewModel.getGridRowDetailData"
    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"
    }'
    data-detail-template="data_grid_row_detail_template"
    >
</div>

<!-- Detail template -->
<script type="text/x-kendo-template" id="data_grid_row_detail_template">
    <div>Name: #: name #</div><div>Age: #: age #</div>
</script>