JSFiddle - React, Tailwind, and code Playground

by csnsgiri

HTML

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

JavaScript

$("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true,
                  template:"# if(!item.hasChildren){# <input type='checkbox'  name='checkedFiles[#= item.id #]' value='true' />#}#"
                },

        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 Website", 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" }
            ] }
          ],
          
           select : function (e) {
        alert("node: " + JSON.stringify(tree.dataItem(e.node)));
        alert("parent: " + JSON.stringify( tree.dataItem(tree.parent(e.node))));
    }
            });
  
  
  $('#treeview').on('click', 'input:checkbox', function(){
  	
    var checkboxes = $('#treeview input:checkbox');
    var selected = checkboxes.filter(':checked');
    checkboxes.not(selected).prop('disabled', selected.length > 0)
})