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

Hierarchy grid templating. Possible?

3 Answers 45 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 07 Jul 2015, 06:11 AM

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.

3 Answers, 1 is accepted

Sort by
0
Peter
Top achievements
Rank 1
answered on 07 Jul 2015, 06:15 AM

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. :(

0
Vladimir Iliev
Telerik team
answered on 09 Jul 2015, 08:07 AM
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:

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peter
Top achievements
Rank 1
answered on 10 Jul 2015, 02:16 AM
THx for that Vladimir.
I have use external template which seems working as dream.
FYI http://plnkr.co/w44pS20LB0K1EpxPIq1i.
Tags
Grid
Asked by
Peter
Top achievements
Rank 1
Answers by
Peter
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Share this question
or