剣道グリッドの詳細行の中に2つの行を置くことはできますか？

Question

rowTemplateとdetailTemplateを使って剣道のグリッドを作りたいと思います。 rowTemplateの内部に余分な行（tr）を入れたいと思います。 レンダリングは正常ですが、最後のメイン行は展開されません。 jsfiddleの例を参照してください：

Example

テンプレートとグリッド：

<div id="grid"></div> 
<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> 
    <tr > 
     <td colspan=4 >#= FirstName # </td> 
    </tr> 
</script> 

<script id="detailTemplate" type="text/x-kendo-tmpl"> 
    <p>detail stuff</p> 
</script> 

Javascriptを：

$("#grid").kendoGrid({ 
columns:[ 
      { 
       field: "FirstName", 
       title: "First Name" 
      }, 
      { 
       field: "LastName", 
       title: "Last Name" 
      } 
], 

dataSource: { 
      data: [ 
       { 
        FirstName: "Joe", 
        LastName: "Smith" 
       }, 
       { 
        FirstName: "Jane", 
        LastName: "Smith" 
       }] 
}, 

rowTemplate:kendo.template($("#rowTemplate").html()), 
detailTemplate: kendo.template($("#detailTemplate").html())}); 

助けてください。

Answer 1

行テンプレートは、単一の<tr>を持つことを意図しています。複数の場合は、k-master-rowのセレクタをスローします。あなたが最後の詳細行が選択できない、余分な<tr>を持っているのであれば、あなたは3つの<tr>最後の2行ではない選択、などを持っている場合

つの回避策は、追加のもののための代わり<tr>の<div>を使用することです：

<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> 
    <div> // extra stuff with a div so selector of detailRow still works... 
     <span>#= FirstName # </span> 
    </div> 
</script>