Menu
I having trouble using a rowtemplate with a detail grid.
Basically when I use them in combination, the rendering is messed up.
See this fiddle, http://jsfiddle.net/yzKqV/, to reproduce this error (uncomment the commented out line and run again to see the error).
How do I fix this?
273
... This example demonstrates how you can utilize the detail template feature of the Kendo UI grid when implementing hierarchical table presentation. The key steps here are to:
If rowTemplate is used alongside with detailTemplate, the row ( <tr>) element needs to have class k-master-row. The first <td> element of the row needs to have class k-hierarchy-cell. Check the Row Templates documentation for more information.
The detail row template does not work with locked columns. To use the detail row template in virtual scrolling, set the detailRowHeight option. For the specifics of exporting the detail row template to Excel, refer to the section on known limitations.
The Kendo UI Grid for Angular enables you to configure whether a given row is displayed or not. To indicate if a detail row will be displayed, specify the DetailTemplateShowIfFn setting.
I think the reason your rowTemplate is not working when you use detailTemplate is because it needs to have the tr and first td defined like a hierarchy grid. (http://jsfiddle.net/yzKqV/3/)
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class="k-master-row">
<td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
<td> #= FirstName # </td>
<td> #= LastName # </td>
</tr>
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
