Kendo UI Inline Template Examples

http://davidjmcclelland.com/etc/?p=2210

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<button id="render" class="k-button">Render Name</button><p>&nbsp;</p>
<div id="firstNameDiv">
</div>

CSS

#panel
    {
        background-image: none;
        margin: -16px 0 30px;
        padding: 30px 0 25px;
    }

    #panel input,
    #panel textarea
    {
        font: inherit;
        margin: -5px 0 5px;
    }

    #exampleWrap ul h3
    {
        margin-bottom: 0.6em;
        padding: 0;
    }

    #exampleWrap ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #example ul label
    {
        display: inline-block;
        vertical-align: top;
        width: 110px;
        padding: 0 8px;
        text-align: right;
    }

    #preview
    {
        margin-left: 129px;
    }

    #preview
    {
        height: 26px;
        width: 140px;
    }

    #example li
    {
        margin: 0.4em 0;
    }

    #example h3.k-header
    {
        margin: 1.4em 0 1em;
        padding: .4em 1.4em;
        font-size: 1.4em;
        border-radius: 2px;
    }

    #blog-content
    {
        height: 100px;
    }

    #blog-preview
    {
        width: 84%;
        margin: 0 auto 40px;
    }

    #blog-preview img
    {
        float: left;
        margin: 0 14px 0 0;
        border: 3px solid #dedede;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

    #blog-preview h4
    {
        font-size: 10px;
        font-weight: normal;
        text-transform: uppercase;
        color: #8d8d8d;
        margin-top: 0;
        border-bottom: 1px solid #dedede;
    }

    #blog-preview h4 strong
    {
        color: #ed662e;
    }

    #blog-preview p,
    #blog-preview h4
    {
        margin-left: 93px;
    }

JavaScript

$(document).ready(function(){
    var data = {firstName: "Andy"};    
    var template = kendo.template("<h3 id='box'> #= firstName #</h3>");
    
    function renderTemplate() {
        template(data);
        
        $("#firstNameDiv").html(template(data));
    }
    
    $("#render").click(renderTemplate);

});