How to create detail-template of grid with MVVM?

2 posts, 0 answers
  1. Federico
    Federico avatar
    21 posts
    Member since:
    Oct 2017

    Posted 24 Oct 2017 Link to this post

    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. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 26 Oct 2017 Link to this post

    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.
Back to Top