I have a Kendo Grid and I'm using row and alternate row templates. I want to add a detail template. How do I format the first cell for the row and alternate row templates to get the detail template to work? I can't see the icon and the click events are not getting fired. Any suggestions would be appreciated.
I have this jsFiddle project: /
My markup:
<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>
My Script:
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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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" }
}
});
}
I have a Kendo Grid and I'm using row and alternate row templates. I want to add a detail template. How do I format the first cell for the row and alternate row templates to get the detail template to work? I can't see the icon and the click events are not getting fired. Any suggestions would be appreciated.
I have this jsFiddle project: http://jsfiddle/rodneyhickman/ztk9r/4/
My markup:
<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>
My Script:
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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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" }
}
});
}
2 Answers
Reset to default 4Adding the icon is replacing:
<td class="k-hierarchy-cell"></td>
by:
<td class="k-hierarchy-cell"><a class="k-icon k-plus" href="\\#" tabindex="-1"></a></td>
EDIT:
In order to avoid the error when you click asking for details, you should add to the tr the class k-master-row something like:
<tr class="assignment-table-row1 k-master-row">
Since the kendo ui version 2016.3 use the class "k-i-expand" instead of "k-plus".
<td class="k-hierarchy-cell"><a class="k-icon k-i-expand" href="\\#"></a></td>