Declarative Grid - Detail Template

[Software]

I am trying to create a grid declaratively with a detail tempate.
I have called the kendo.ns method to change my namespace (kendo-) as to not clash with ko.
Here is the source for the grid:

<div>
     data-kendo-role="grid"
     data-kendo-sortable="false"
     data-kendo-pageable="false"
     data-kendo-scrollable="true"
     data-kendo-detail-template="detailTemplate"
     data-kendo-bind="source: items">

</div>

I have a simple template for detailTemplate

<script id="detailTemplate" type="text/kendo-template">
    <h1>Hello</h1>
</script>

If I remove the line with the data-kendo-detail-template, the grid displays fine.  However with it in, the grid does not display at all.

Any ideas what might be causing this?

Also, assuming I do get this working, will it be possible to have the template also be defined as a declarative grid using a property of the main grid's data item for its data? Or am I better off doing this in javascript?

thanks,
eric

[Alexander Valchev]

Hi Eric,

I am afraid that the provided code is not sufficient enough in order to determine where exactly the problem comes from. I suggest you to check this forum thread as it discusses how to build Grid hierarchy with MVVM.

Also, assuming I do get this working, will it be possible to have the template also be defined as a declarative grid using a property of the main grid's data item for its data? Or am I better off doing this in javascript?

Both approaches are possible, however if you would like to use binding, it is required to bind manually the detail row to the DataItem. Please check this sample: http://jsfiddle.net/valchev/yzKqV/90/

Regards,
Alexander Valchev
Telerik

[Software]

Can you give an example similar to the one in the last fiddle (http://jsfiddle.net/valchev/yzKqV/90/) of using a column template.

When I try to do this the data item is that of the parent, not of the child.

<script id="detailTemplate" type="text/x-kendo-tmpl">
    <div data-kendo-role="grid"
    data-kendo-scrollable="false"
    data-kendo-bind="source: currentDebtLineItems"
    data-kendo-columns="[{'field':'description', 'template' : '#=description#'}]"
    <div>

description displays the description value from the parent, not the child.
See fiddle (http://jsfiddle.net/ekgurney/yzKqV/147/)

[Alexander Valchev]

Hi Eric,

Your observation is correct - the data available in the template corresponds to the parent dataItem. In order to use a template I suggest you to display the 'Name' field via MVVM binding. For example:

data-columns='[{template: "<span data-bind=\"text: Name\"></span>"}]'

For your convenience I updated the jsFiddle sample: http://jsfiddle.net/yzKqV/159/

Regards,
Alexander Valchev
Telerik