javascript - 如何使用 Kendo Grid 组合行模板和详细信息模板

Question

我有一个 Kendo Grid，我正在使用行和交替行模板。我想添加一个详细信息模板。如何格式化行和备用行模板的第一个单元格以使详细信息模板起作用？我看不到图标，也没有触发点击事件。任何建议，将不胜感激。

我有这个 jsFiddle 项目:http://jsfiddle.net/rodneyhickman/ztk9r/4/

我的标记:

<div class="assignment-portal-gird-module">
<div class="row-templates">
    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr class="assignment-table-row1"> 
            <td class="k-hierarchy-cell"></td>
            <td class="assignment-table-centered-column"><b>${ Points }</b></td>
            <td class="assignment-table-contact-name-column" ><b><a href="/assignmentportal/providercontact/${ KlasID }">${ ContactName }</a></b>&nbsp;&nbsp;<a href="mailto:${ Email }"><img src="/content/images/toolbox/icons/email-16x16.gif" atl='email image'/></a></td>
            <td>${ Title }</td>    
            <td><a href="/Modules/DataEntry/Provider/Edit.aspx?id=${ ProviderId }">${ ProviderName }</a></td>
            <td>${ Phone }</td>
            <td class="assignment-table-centered-column"><b>${ LastNoteDate }</b></td>
            <td class="assignment-table-centered-column"><b>${ Touches }</b></td>
            <td>${ TimeZone }</td>
        </tr>
    </script>
    <script id="altRowTemplate" type="text/x-kendo-tmpl">

        <tr class="assignment-table-row1-alt"> 
            <td class="k-hierarchy-cell"></td>
            <td class="assignment-table-centered-column"><b>${ Points }</b></td>
            <td class="assignment-table-contact-name-column"><b><a href="/assignmentportal/providercontact/${ KlasID }">${ ContactName }</a></b>&nbsp;&nbsp;<a href="mailto:${ Email }"><img src="/content/images/toolbox/icons/email-16x16.gif" atl='email image';/></a></td>
            <td>${Title }</td>    
            <td><a href="/Modules/DataEntry/Provider/Edit.aspx?id=${ ProviderId }">${ ProviderName }</a></td>
            <td>${ Phone }</td>
            <td class="assignment-table-centered-column"><b>${ LastNoteDate }</b></td>
            <td class="assignment-table-centered-column"><b>${ Touches }</b></td>
            <td>${ TimeZone }</td>
        </tr>
    </script>
        <script type="text/x-kendo-template" id="template">
            <div class="tabstrip">
                <ul>
                    <li class="k-state-active">
                       Notes
                    </li>
                    <li>
                        Exchange
                    </li>
                    <li>
                        Assignments
                    </li>
                </ul>
                <div>
                    <div class="notes-details" >
                   Notes goes here     
                   </div>
                </div>
                <div>
                    <div class='exchange-details'>
                       Exchange goes here
                    </div>
                </div>
                  <div>
                    <div class='assignments-details'>
                       Assignments goes here
                    </div>
                </div>
            </div>

        </script>
</div>
<div id="gridAssignments"></div>

我的脚本:

jQuery('#gridAssignments').kendoGrid({
pageable: true,
scrollable: false,
rowTemplate: kendo.template($('#rowTemplate').html()),
altRowTemplate: kendo.template($('#altRowTemplate').html()),
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function() {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    },
sortable: true,
dataSource: {
    data: [{
        Points: 888,
        KlasID: 14926,
        ContactName: 'John Johnson',
        Email: "test@test.com",
        Title: 'Chief Infomration Officer',
        ProviderName: 'West Coast Medical Center',
        ProviderId: 1143,
        Phone: '801-555-1234',
        TimeZone: '(E) 8:32 AM',
        LastNoteDate: '1/25/2013',
        LastNote: 'Sent Email - Requested to setup a call for 8:30 am Friday Feb 1st.',
        HasEval: 'Yes',
        Touches: 2,
        Sessions: '1',
        LastSessionDate: '1/23/2013  5:20 PM'
    }, {
        Points: 5,
        KlasID: 14926,
        ContactName: 'Jane Johnson',
        Email: "test@test.com",
        Title: 'Chief Infomration Officer',
        ProviderName: 'East Coast Medical Center',
        ProviderId: 1143,
        Phone: '801-555-4321',
        TimeZone: '(E) 8:32 AM',
        LastNoteDate: '1/15/2013',
        LastNote: 'Sent Email - Requested to setup a call for 8:30 am Friday Feb 1st. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah ',
        HasEval: 'No',
        Touches: 3,
        Sessions: '1',
        LastSessionDate: '1/23/2013 8:45 AM'
    }, {
        Points: 18,
        KlasID: 14926,
        ContactName: 'John Doe',
        Email: "test@test.com",
        Title: 'Chief Infomration Officer',
        ProviderName: 'Florida Medical Center',
        ProviderId: 1143,
        Phone: '801-333-4321',
        TimeZone: '(E) 8:32 AM',
        LastNoteDate: '1/1/2013',
        LastNote: 'Sent Email - Requested to setup a call for Blah blah blah blah blah',
        HasEval: 'Yes',
        Touches: 4,
        Sessions: '1',
        LastSessionDate: '1/25/2013 12:04 PM'
    }],
    pageSize: 10
},
columns: [{
    width: 45,
    title: "P",
    field: "Points"
}, {

    title: "Contact",
    field: "ProviderName"
}, {

    title: "Title",
    field: "Title"
}, {
    width: 300,
    title: "Provider",
    field: "ProviderName"
}, {
    width: 120,
    title: "Phone",
    field: "Phone"
}, {
    title: "Last Note",
    field: "LastNoteDate"
}, {
    title: "Touches",
    field: "Touches"
}, {
    width: 120,
    title: "Time Zone",
    field: "TimeZone"
}]

});


 function detailInit(e) {
                var detailRow = e.detailRow;

                detailRow.find(".tabstrip").kendoTabStrip({
                    animation: {
                        open: { effects: "fadeIn" }
                    }
                });

 }

Answer 1

添加图标就是替换:

 <td class="k-hierarchy-cell"></td>

通过:

 <td class="k-hierarchy-cell"><a class="k-icon k-plus" href="\\#" tabindex="-1"></a></td>

编辑:

为了避免单击询问详细信息时出现错误，您应该在 tr 类 k-master-row 中添加如下内容:

<tr class="assignment-table-row1 k-master-row">