Hierarchy grid templating. Possible?

[Peter]

Hi. Kendo UI Team. I am trying to take advantage of kendo ui template so that i can have full control of table data.
It seems work with master grid, but i can not get dataItem in details grid.
Demo link is here http://plnkr.co/4GVh9XF7uLeNKD1uxkRx.
In script.js
line 822, it's my master grid's template.
line 941, it's my details grid's template.
Which i believe i set up them in the same way.
As you can see from index.html line 48, i can get dataItem of master grid display. But from index.html line 86, i can not get value of dataItem.
Does Kendo UI grid support this?
I know if i take out script.js line 822, data will display. But i want to add state machine to each field that is reason i am using templating. Thx again.

[Peter]

BTW, i had look docs.telerik.com/kendo-ui/web/grid/how-to/Editing/edit-master-row-data-in-detail-template#hierarchy-with-editable-detail-grid.
But this example is not using template tho. :(

[Vladimir Iliev]

Hi Peter,

After inspecting the provided example it appears that the "rowTemplate" of the child grid causes the issue - after removing it everything start working as expected. Please check the updated example below:

• http://embed.plnkr.co/juZOjvCAZMZeQel5ZyR0/

The reason for the above "rowTemplate" is not working is that it use "angular" binding where the child grid is initialized using regular JavaScript - in this case you should use Kendo UI template syntax and MVVM binding n order to achieve the desired behavior. Please check the example configuration below:

rowTemplate: kendo.template($("#domainYearSemesterGridRowTemplate").html()),
dataBinding: function() {
    var detailGrid = this;
    detailGrid.table.find("tr[data-uid]").each(function() {
      kendo.unbind($(this));

  });
},
dataBound: function(e) {
  var detailGrid = this;
  detailGrid.table.find("tr[data-uid]").each(function() {
    var model = detailGrid.dataItem($(this));

    kendo.bind($(this), model);
  });
},

<script type="text/x-kendo-template" id="domainYearSemesterGridRowTemplate">
    <tr data-uid="#= uid #">
        <td class="k-hierarchy-cell">
        </td>
        <td>
            <input type="text" class="k-input k-textbox col-lg-12 col-md-12" data-bind="value: domainYearSemesterVO.domainVO.domain" />
            <span data-bind="text: uid"></span>
        </td>
        <td>
            <input type="text" class="k-textbox" lass="k-input k-textbox col-lg-12 col-md-12" data-bind="value: domainYearSemesterVO.domainVO.kdokey" />
        </td>
        <td>
            #=domainYearSemesterVO.reportAtDimensionLevel ? domainYearSemesterVO.reportAtDimensionLevel : "no value"#
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
</script>

Regards,
Vladimir Iliev
Telerik

 

 

[Peter]

THx for that Vladimir.
I have use external template which seems working as dream.
FYI http://plnkr.co/w44pS20LB0K1EpxPIq1i.