검도 그리드의 상세 행 안에 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> 

자바 스크립트 :

$("#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의 선택자를 버립니다. 당신이 등을 선택할 수 없습니다 3 개 <tr> 마지막 두 행을,이 경우, 마지막으로 세부 행 선택하지 여분의 <tr>이있는 경우 그래서

한 가지 해결 방법은 추가 재료에 대한 <div> 대신 <tr> (A)의를 사용하는 것입니다 :

<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>