我有一个 Kendo 网格，并且正在使用行和交替行模板。我想添加一个详细模板。如何设置行和备用行模板的第一个单元格的格式以使详细信息模板正常工作？我看不到图标，并且点击事件没有被触发。任何建议，将不胜感激。
我有这个 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: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f1b0a1c1b2f1b0a1c1b410c0002" rel="noreferrer noopener nofollow">[email protected]</a>",
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: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="275342545367534254530944484a" rel="noreferrer noopener nofollow">[email protected]</a>",
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: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9aeeffe9eedaeeffe9eeb4f9f5f7" rel="noreferrer noopener nofollow">[email protected]</a>",
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" }
}
});
}
最佳答案
添加图标正在替换:
<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">
关于javascript - 如何使用 Kendo Grid 组合行模板和详细信息模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14591927/