kendo Numeric test

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.web.min.js"></script>
  <div id="example" class="k-content">
        <div id="treeview" class="demo-section"></div>

        <script id="treeview-template" type="text/kendo-ui-template">
            #: item.text #
            <span style="right:26px;" class="column">
            # if (item.state) { #
                <span class='state green'></span>
            # } else {#
                <span class='state red'></span>
            # } #
            </span> 
            <span style="right:52px;" class="column">
            # if (item.state) { #
                <span class='state green'></span>
            # } else {#
                <span class='state red'></span>
            # } #
            </span>   
        </script>
</div>

CSS

#treeview {
                width: 300px;
                margin: 0 auto;
            }

            #treeview .k-sprite {
              
            }

            .rootfolder { background-position: 0 0; }
            .folder     { background-position: 0 -16px; }
            .pdf        { background-position: 0 -32px; }
            .html       { background-position: 0 -48px; }
            .image      { background-position: 0 -64px; }
.state { display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 10px; height:10px; }
.red {color: red; background-color: red;}
.green {color: green; background-color: green;}
.column { display: block; float: right; position: absolute;}

JavaScript

$("#treeview").kendoTreeView({
                template: kendo.template($("#treeview-template").html()),

                dataSource: [{
                    id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", state:1, items: [
                        {
                            id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder",state:1, items: [
                                { id: 3, text: "about.html", spriteCssClass: "html",state:0 },
                                { id: 4, text: "index.html", spriteCssClass: "html",state:0 },
                                { id: 5, text: "logo.png", spriteCssClass: "image",state:0 }
                            ]
                        },
                        {
                            id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder",state:0, items: [
                                { id: 7, text: "mockup.jpg", spriteCssClass: "image",state:0 },
                                { id: 8, text: "Research.pdf", spriteCssClass: "pdf",state:0 },
                            ]
                        },
                        {
                            id: 9, text: "Reports", expanded: true, spriteCssClass: "folder",state:0, items: [
                                { id: 10, text: "February.pdf", spriteCssClass: "pdf",state:0 },
                                { id: 11, text: "March.pdf", spriteCssClass: "pdf",state:0 },
                                { id: 12, text: "April.pdf", spriteCssClass: "pdf",state:0 }
                            ]
                        }
                    ]
                }]
            });

            // Delete button behavior
            $(document).on("click", ".delete-link", function(e) {
                e.preventDefault();
                var treeview = $("#treeview").data("kendoTreeView");
                treeview.remove($(this).closest(".k-item"));
            });