JSFiddle - React, Tailwind, and code Playground

by stevescotthome

HTML

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


<script id="treeview-template" type="text/kendo-ui-template">
            #= item.text #
            # if (!item.items) { #
                <a class='delete-link' href='\#'></a>
            # } #
        </script>

        <script id="treeview-checkbox-template" type="text/kendo-ui-template">
            # var name = "checkedFiles[" + item.id + "]"; #
            <!-- uncomment the next line to get default checkbox values (RoR, ASP.NET MVC) -->
            <!-- <input type="hidden" name="#= name #" value="false" /> -->
            <input type="checkbox" name="#= name #" value="true" />
        </script>

JavaScript

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

                checkboxTemplate: kendo.template($("#treeview-checkbox-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" }
                            ]
                        }
                    ]
                }]
            });