KendoUI Tester - Chart label rotation
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><b>${ Points }</b></td>
<td><b>${ ContactName }</b></td>
<td><b>${ Title }</b></td>
<td><b>${ ProviderName }</b></td>
<td><b>${ Phone }</b></td>
<td><b>${ TimeZone }</b></td>
</tr>
<tr class="assignment-table-row2">
<td></td>
<td colspan="2">
<span class="assignment-portal-note-label" >Latest Note</span><br/>
<table class="assignment-portal-note-table" >
<tr>
<td>${ LastNoteDate }</td> <td>${ LastNote }</td>
</tr>
</table>
</td>
<td colspan="3">
<span class="assignment-portal-note-label" >Exchange Level</span><br/>
<b>Eval:</b> ${ HasEval } Touches: ${ Touches } Log-ins: ${ Sessions } ${ LastNoteDate }
</td>
</tr>
</script>
<script id="altRowTemplate" type="text/x-kendo-tmpl">
<tr class="assignment-table-row1-alt">
<td><b>${ Points }</b></td>
<td><b>${ ContactName }</b></td>
<td><b>${ Title }</b></td>
<td><b>${ ProviderName }</b></td>
<td><b>${ Phone }</b></td>
<td><b>${ TimeZone }</b></td>
</tr>
...
CSS
.assignment-portal-gird-module { font-family: Arial; }
.assignment-portal-gird-module .assignment-portal-note-label { color:darkorange; font-family: Arial; }
.assignment-portal-gird-module td { border: none; padding: 0 3px; }
.assignment-portal-gird-module .assignment-table-row1 { }
.assignment-portal-gird-module .assignment-table-row2 td { border-bottom: solid gray 1px; vertical-align: top; }
.assignment-portal-gird-module .assignment-table-row1-alt { background-color: rgb(227, 227, 227); }
.assignment-portal-gird-module .assignment-table-row2-alt { background-color: rgb(227, 227, 227); }
.assignment-portal-gird-module .assignment-table-row2-alt td { border-bottom: solid gray 1px; vertical-align: top;}
.assignment-portal-gird-module .assignment-portal-note-table td { border-bottom: none; }
JavaScript
jQuery('#gridAssignments').kendoGrid({
pageable: true,
scrollable: false,
rowTemplate: kendo.template($('#rowTemplate').html()),
altRowTemplate: kendo.template($('#altRowTemplate').html()),
sortable: true,
dataSource: {
data: [{
Points: '888',
KlasID: 14926,
ContactName: 'John Johnson',
Title: 'Chief Infomration Officer',
ProviderName: 'West Coast Medical Center',
Phone: '801-555-1234',
TimeZone: '(E) 8:32 AM',
LastNoteDate: '01/25/2013 09:02 AM',
LastNote: 'Sent Email - Requested to setup a call for 8:30 am Friday Feb 1st.',
HasEval: 'Yes',
Touches: '3',
Sessions: '1',
LastNoteDate: '01/23/2013'
}, {
Points: '5',
KlasID: 14926,
ContactName: 'Jane Johnson',
Title: 'Chief Infomration Officer',
ProviderName: 'East Coast Medical Center',
Phone: '801-555-4321',
TimeZone: '(E) 8:32 AM',
LastNoteDate: '01/25/2013 09:02 AM',
LastNote: 'Sent Email - Requested to setup a call for 8:30 am Friday Feb 1st.',
HasEval: 'No',
Touches: '3',
Sessions: '1',
LastNoteDate: '01/23/2013'
}, {
Points: '18',
KlasID: 14926,
ContactName: 'John Doe',
Title: 'Chief Infomration Officer',
ProviderName: 'Florida Medical Center',
Phone: '801-333-4321',
TimeZone: '(E) 8:32 AM',
LastNoteDate: '01/25/2013 09:02 AM',
LastNote: 'Sent Email - Requested to setup a call for 8:30 am Friday Feb 1st.',
HasEval: 'Yes',
Touches: '3',
Sessions: '1',
LastNoteDate: '01/25/2013'
}],
pageSize: 10
},
columns: [{
width: 30,
title: "P"
}, {
width: 140,
...