jube-fork/Jube.App/wwwroot/kendo/examples/treeview/templates.html

<!DOCTYPE html>
<html>
<head>
    <title>Templates</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
        <div class="demo-section k-content">
            <div id="treeview"></div>
        </div>

        <script id="treeview-template" type="text/kendo-ui-template">
            #: item.text #
            # if (!item.items) { #
                <span class='k-icon k-i-close'></span>
            # } #
        </script>

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

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

            // Delete button behavior
            $(document).on("click", ".k-icon.k-i-close", function(e) {
                e.preventDefault();
                var treeview = $("#treeview").data("kendoTreeView");
                treeview.remove($(this).closest(".k-item"));
            });
        </script>

    </div>

<style>
    #treeview .k-sprite {
        background-image: url("../content/web/treeview/coloricons-sprite.png");
    }

    .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; }

    .delete-link {
            width: 12px;
            height: 12px;
            display: inline-block;
            background: transparent url("@Url.Content("~/content/web/treeview/close.png")") no-repeat 50% 50%;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            vertical-align: top;
            margin: 2px 0 0 3px;
            -webkit-border-radius: 5px;
            -mox-border-radius: 5px;
            border-radius: 5px;
        }
</style>


    
</body>
</html>