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

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 网格的详细信息行中有两行吗？

Can I have two rows inside a detail row in kendo grid?

kendo-ui

kendo-grid

kendo-asp.net-mvc