JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
 
 <div id="treeview">
 
 </div>

JavaScript

$(function() {
			
			var ChildNodes = {
				transport: {
					read: function (op) { /// use web api call to get json like below
						var parentName = op.data.Name;
            var parentName1 = op.data.itemName;
						var data = [];
						for (var i = 0; i < 10; i++) {							
							data.push({ Name: parentName +".Tag" + i, itemName: parentName1 +".Tag" + (i-1), Group: false, "hasChildren": false});
						}
						op.success(data);
					}
				},
				schema   : {
					model: {
						model: {
							id         : "Name",
              itemName: "ItemName",
							hasChildren: "hasChildren",
							children   : ChildNodes
						}
					}
				}
			};			
			var RootNodes = new kendo.data.HierarchicalDataSource({
				transport: {
					read: function (op) {   /// use web api call to get json like below for initializing tree
						op.success([
							{"Name": "Random","ItemName": "Random", "Group": true, "hasChildren": true},
							{"Name": "Bucket Brigade", "ItemName": "Bucket Brigade","Group": true, "hasChildren": true},
							{"Name": "Config","ItemName": "Config", "Group": true, "hasChildren": false}
						])
					}
				},				
				schema   : {
					model: {
						id         : "Name",
            itemName: "ItemName",
						hasChildren: "hasChildren",
						children   : ChildNodes
					}
				}
			});			
			$('#treeview').kendoTreeView({
				dataSource: RootNodes,       
				dataTextField: "Name",
				select: onSelect				
			});	
  		

			function onSelect(e) {
				 var dataItem = this.dataItem(e.node);
				 if(dataItem.Group === false)
				 {
				  alert("You have selected: "  + dataItem.itemName);
				 }		 
			};

		
	
	});