This is a migrated thread and some comments may be shown as answers.

How to create detail-template of grid with MVVM?

2 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Federico
Top achievements
Rank 1
Federico asked on 24 Oct 2017, 03:50 PM

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>

</form>

    </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

2 Answers, 1 is accepted

Sort by
-1
Stefan
Telerik team
answered on 26 Oct 2017, 07:36 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Joshua
Top achievements
Rank 1
Veteran
Iron
answered on 21 May 2021, 07:24 PM

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

Tags
Grid
Asked by
Federico
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Joshua
Top achievements
Rank 1
Veteran
Iron
Share this question
or