Kendo Spark

by I Made Himawan Raharja

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script>
<div id="treeview">
</div>
 <script id="treeview-template" type="text/kendo-ui-template">
#: item.ReportGroupName #
</script>

JavaScript

var reportTree = [{
   "ReportGroupName": "Empty Parent Node",
   "Id":5,
   "Type": 1,
   "items": null
   },{
   "ReportGroupName": "Standard Reports",
   "Id": 1,
   "Type": 1,
   "items": [{
     "ReportGroupName": "Web Non-Usage",
     "Id": 1,
     "Type": 2
   }, {
     "ReportGroupName": "Activity Report",
     "Id": 1,
     "Type": 2
   }]
 }, {
   "ReportGroupName": "Retail Reports4",
   "Id": 2,
   "Type": 1,
   "items": [{
     "ReportGroupName": "Shrink Report",
     "Id": 1,
     "Type": 2
   }, {
     "ReportGroupName": "Transaction Report",
     "Id": 1,
     "Type": 2
   }]
 }];

 var homogeneous = new kendo.data.HierarchicalDataSource({
   data: reportTree,
   schema: {
     model: {
       id: "Id",
       children: "items",
       hasChildren: "items"
     }
   }
 });


 var treeview = $("#treeview").kendoTreeView({
   expanded: true,
   dragAndDrop: true,
   select: onSelect,
   loadOnDemand: false,
   dataSource: homogeneous,
   template: kendo.template($("#treeview-template").html()) //,
    ,
   drop:  function(e) {
   		var kendoTreeView = $("#treeview").data("kendoTreeView");
   		 //console.log("Dropped", e.sourceNode);
       //console.log("dropped more info", kendoTreeView.dataItem(e.sourceNode));
       var source = kendoTreeView.dataItem(e.sourceNode);
       var destination = kendoTreeView.dataItem(e.dropTarget);
       var sourceType = source.Type;
       var destType = destination.Type;
       console.log(sourceType);
       console.log(destType);
       
       // Business Rules
       // 1. Do not allow Child Type 2 or 3 to become a Parent 1  
       // 2. Do not allow Parent Type 1 to be dragged onto Parent 1 or Child 2 or 3  
       // 
       
       
       //if(sourceType === 1){
         
       //}
       
       if(sourceType === 1 && destType >= 1){
       	
        // August 2015  bug with  Kendo UI 2005 Q2 release (v2015.2.624)  
        //http://www.telerik.com/forums/setvalid(false)-doesn't-prevent-a-drop
       ...