Kendo UI Grid: Detail Template Binding

By February 3, 2014JavaScript, Kendo UI, MVVM

The Kendo UI Grid provides a versatile Detail Template that allows you to display details in a grid format, or any layout and content you want.  If you are using Kendo MVVM binding (data-bind attributes), you might find one surprising shortcoming: by default, none of the bindings in the detail template work.

<script id="detail-template" type="text/x-kendo-template">
    <div>
        <span>Phone Number for #=name#:</span>
        <span data-bind="text: phone" /> <!-- DOES NOT WORK -->
        <input data-bind="value: phone" /> <!-- DOES NOT WORK -->
    </div>
</script>

The primary reason for this is that the detail template is not included when you perform a kendo.bind() on the parent elements (although I think this is something that SHOULD happen by default).

The solution is quite simple, especially if your detail template is binding to the same object as the parent row or a child collection of the parent row.  When we construct the grid, we simply need to handle the detailInit event and bind the detail template using the e.detailRow object as our container and e.data as the parent data object:

var scholarGrid = $("#demo-grid").kendoGrid({
    filterable: false,
    dataSource: ds,
    detailTemplate: kendo.template($("#detail-template").html()),
    detailInit: function(e) {
        // without this line, detail template bindings will not work
        kendo.bind(e.detailRow, e.data);
    }
}).data("kendoGrid");

View all the code in this JSFiddle and try it with and without the detailInit code to see how it affects the phone numbers in the detail template:

The following two tabs change content below.
  • NZodd

    can we achieve the same behaviour for row template instead of row detail ?