Question

我想用rowTemplate和detailTemplate创建一个Kendo网格。在rowTemplate里面我想放一个额外的行（tr）。它渲染得很好，但最后一个主行不会扩展。请参阅jsfiddle中的示例：

模板和网格：

<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行无法选择，等等。

一种解决方法是使用<div>而不是<tr>来添加其他内容：

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

我可以在kendo网格的详细信息行中有两行吗？

1 个答案: