如何在knockout kendo中使用detailTemplate？

Question

Kendo UI支持使用detailTemplate，但是如何通過Knockout-kendo綁定使用它？

的的jsfiddle代碼here

只是增加rowTemplate和detailTemplate不工作，rowTemplate顯示出來，但是當我打開開放的細節，我得到的各種異常（對象預期在ASP.NET和休息的jsfiddle）

Answer 1

我也跟着不同的方法，即在連續模板本身和一個兩行行是實際數據，另一個是細節行。然後使用手風琴觸發細節行的顯示/隱藏。用於手風琴的bootstrap ...對我來說效果很好，雖然它的方式是圓的。順便說一句，這是他們如何做，但動態。

Answer 2

這是我想出來的（根據你的解釋）。我知道你已經做了一個解決方法，但這是一個答案，所以這個問題可以至少有一個答案，以防其他人遇到這種情況。

查看

<div data-bind="kendoGrid: { data: items, columns: columns, pageable: { pageSize: 3 }, scrollable: false, rowTemplate: 'rowTmpl', useKOTemplates: true }"> </div> 

<script id="rowTmpl" type="text/html"> 
    <tr> 
     <td data-bind="click: $parent.toggleShowDetails">+</td> 
     <td data-bind="text: id"></td> 
     <td data-bind="text: name"></td> 
    </tr> 
    <tr data-bind="visible: showDetails"> 
     <td colspan="3"> 
      <div data-bind="kendoGrid: { data: $data.details, scrollable: false }"></div> 
     </td> 
    </tr> 
</script> 

視圖模型

var ViewModel = function() { 
    var self = this; 
    self.columns = [{ field: ' ' }, { field: 'id' }, { field: 'name'}]; 
    self.items = ko.observableArray([ 
     { id: "1", name: "apple", details: [{ id: "1", name: "subApple"}], showDetails: ko.observable(false) }, 
     { id: "2", name: "orange", details: [{ id: "2", name: "subOrange"}], showDetails: ko.observable(false) }, 
     { id: "3", name: "banana", details: [{ id: "3", name: "subBanana"}], showDetails: ko.observable(false) }, 
     { id: "4", name: "pineapple", details: [{ id: "4", name: "subPineapple"}], showDetails: ko.observable(false) }, 
     { id: "5", name: "grape", details: [{ id: "5", name: "subGrape"}], showDetails: ko.observable(false) }, 
     { id: "6", name: "mango", details: [{ id: "6", name: "subMango"}], showDetails: ko.observable(false) } 
    ]); 

    self.toggleShowDetails = function (data, event) { 
     data.showDetails(!data.showDetails()); 
    }; 
}; 

ko.applyBindings(new ViewModel()); 

鏈接到GitHub的問題作出評論：https://github.com/kendo-labs/knockout-kendo/issues/75#issuecomment-20004008