我有一个剑道网格，我正在使用行和备用行模板。我想添加一个详细模板。如何格式化行和备用行模板的第一个单元格以使详细信息模板正常工作？我看不到图标，并且点击事件没有被触发。任何建议，将不胜感激。
我有这个 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> <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> <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" }
}
});
}