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

<!DOCTYPE html>
<html>
<head>
    <title>Images</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>
            <h4>TreeView with images</h4>
            <div id="treeview-images"></div>
        </div>
        <div>
            <h4>TreeView with sprites</h4>
            <div id="treeview-sprites"></div>
        </div>
    </div>
    <script>
        $("#treeview-images").kendoTreeView({
            dataSource: [
                {
                    text: "Inbox", imageUrl: "../content/web/treeview/mail.png",
                    items: [
                        { text: "Read Mail", imageUrl: "../content/web/treeview/readmail.png" }
                    ]
                },
                {
                    text: "Drafts", imageUrl: "../content/web/treeview/edit.png"
                },
                {
                    text: "Search Folders", expanded: true, imageUrl: "../content/web/treeview/search.png",
                    items: [
                        { text: "Categorized Mail", imageUrl: "../content/web/treeview/search.png" },
                        { text: "Large Mail", imageUrl: "../content/web/treeview/search.png" },
                        { text: "Unread Mail", imageUrl: "../content/web/treeview/search.png" }
                    ]
                },
                {
                    text: "Settings", imageUrl: "../content/web/treeview/settings.png"
                }
            ]
        });
           
        $("#treeview-sprites").kendoTreeView({
            dataSource: [{
                text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                    {
                        text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                            { text: "about.html", spriteCssClass: "html" },
                            { text: "index.html", spriteCssClass: "html" },
                            { text: "logo.png", spriteCssClass: "image" }
                        ]
                    },
                    {
                        text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                            { text: "mockup.jpg", spriteCssClass: "image" },
                            { text: "Research.pdf", spriteCssClass: "pdf" },
                        ]
                    },
                    {
                        text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                            { text: "February.pdf", spriteCssClass: "pdf" },
                            { text: "March.pdf", spriteCssClass: "pdf" },
                            { text: "April.pdf", spriteCssClass: "pdf" }
                        ]
                    }
                ]
            }]
        });
    </script>

    <style>
        .demo-section{
            display:flex;
            justify-content:space-evenly;
        }

        #treeview-sprites .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; }
    </style>
</div>


    
</body>
</html>