How to create detail-template of grid with MVVM?

[Federico]

How to create detail-template of grid with MVVM?

 

<form id="form1">
<div id="m" data-role="grid"
     data-toolbar="['excel']"
     data-excel='{fileName: "List.xlsx", proxyURL: "http://demos.telerik.com/kendo-ui/service/export",filterable: true}'
     data-editable="false"
     data-selectable="true"
     data-filterable="true"
     data-columnMenu="true"
     data-groupable="true"
     data-pageable='{ "pageSize": 10}'
     data-reorderable="true"
     data-resizable="true"
     data-sortable="true"
     data-height="550"
     data-no-records= "true"
     data-detail-template="detailTemplate"
     data-detail-init="onDetailInit"
    data-columns="[
  { 'field': 'a','title':'a'},
  { 'field': 'b','title':'b'}
 ]"
     data-bind="source: GridSource">
    </div>

    <script id="detailTemplate" type="text/x-kendo-tmpl">
     <div id="detailGrid" data-role="grid"
        data-toolbar="home"
        data-selectable="true"
        data-pageable='{"pageSize": 10}'
        data-reorderable="true"
        data-resizable="true"
        data-sortable="true"
        data-height="550"
        data-no-records="true"
        data-bind="source: GridSource"
        data-columns='[{'title':'a','field':'a'}]' >
    </div>
    </script>

this.vm = kendo.observable({
            Gridsource:[],
        });
        this.vm.set("onDetailInit", function(e) {
            var dataItem = $("#detailGrid").data("kendoGrid").dataItem(e.masterRow);
            kendo.bind(e.detailCell, dataItem);
        });
        kendo.bind($("#form1"), this.vm);

This code doesn't work! i can't see the grid

[Stefan]

Hello, Federico,

Thank you for the provided information.

I made an example using a similar approach which is working as expected:

http://dojo.telerik.com/opeLAJ

If the issue still occurs, please use the example as a reference and I will gladly assist.

Regards,
Stefan
Progress Telerik

[Joshua]

I know it has been a long time since someone asked this question, but I was trying to solve the same thing recently and I wanted to provide my solution that I think more closely aligns with the OP's question.

I had to do some real wierd stuff where I created a new VM and then injected the parent member to be the dataItem.

http://dojo.telerik.com/IjusIjoV