Kendo Grid with templates
HTML
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.datavis.min.css">
<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> #GridID
<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>
...
CSS
.assignment-portal-gird-module {
font-family: Arial;
}
.assignment-portal-gird-module td {
border: none;
}
.assignment-portal-gird-module .assignment-table-row1 {
color: rgb(0, 34, 85);
}
.assignment-portal-gird-module .assignment-table-row1-alt {
background-color: rgb(227, 227, 227);
}
.assignment-portal-gird-module .assignment-table-row1 td {
padding: 5px 3px;
}
.assignment-portal-gird-module .assignment-table-row1-alt td {
padding: 5px 3px;
}
.assignment-portal-gird-module .assignment-table-centered-column {
text-align: center;
}
.assignment-portal-gird-module .assignment-table-contact-name-column {
white-space: nowrap;
}
JavaScript
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',
...