jube-fork/Jube.App/wwwroot/kendo/examples/dropdowntree/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="dropdowntree" style="width: 100%;"></div>
    </div>
    <script id="dropdowntree-template" type="text/kendo-ui-template">
        #: item.text #
    </script>
    <script id="dropdowntree-value-template" type="text/kendo-ui-template">
        <span class="k-sprite #: spriteCssClass #"></span>
        <span> #: data.text # </span>
    </script>
    <script>
        $("#dropdowntree").kendoDropDownTree({
            template: kendo.template($("#dropdowntree-template").html()),
            valueTemplate: kendo.template($("#dropdowntree-value-template").html()),
            dataTextField: "text",
            dataSpriteCssClassField: "spriteCssClass",
            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" }
                        ]
                    }
                ]
            }]
        });


    </script>
</div>
<style>
    .k-dropdowntree .k-sprite, .k-popup .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;
    }

    .k-dropdown-wrap .k-input {
        display: block;
    }

    .k-dropdown-wrap .k-sprite {
        vertical-align: middle;
    }
</style>


    
</body>
</html>