treemap kendoui

by VadimMalkov

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
<div id='form'>
  <div data-role='treemap' id="tm"
  data-bind='source:src' data-value-field="ReportsTo" data-text-field="FullName"></div>

  <button data-bind='click:btn'>
	 refresh
	 </button>
</div>

JavaScript

var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
var zz = new kendo.data.HierarchicalDataSource({
  transport: {
    read: function(e) {
      $.ajax({
        url: serviceRoot + "/Employees",
        dataType: "jsonp",
        data: e.data,
        success: function(res) {
          e.success(res);
					console.log(res);
        }
      })
    },
  },
  schema: {
    model: {
      id: "EmployeeId",
      hasChildren: "HasEmployees"
    }
  }
});

var model = kendo.observable({
  src: zz,
  btn: function() {
    console.log(zz.data().toJSON(),$("#tm").getKendoTreeMap());
		
  }
});

kendo.bind($("#form"), model);

$("#tm").getKendoTreeMap().setOptions({colors:[["#ff6666", "#ff0000"], ["#7fb17f", "#006400"], ["#555599","#9999ff"] ]});

//read: {
//      url: serviceRoot + "/Employees",
//      dataType: "jsonp"
//    }