Kendo Grid with templates

by rodneyhickman

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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<a href="mailto:${ Email }"><img src="/content/images/toolbox/icons/email-16x16.gif" atl='email image';/></a></td>
                <td>${Title }</td>    
                <td><a...

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',
   ...