treeview mvvm

by VadimMalkov

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<div id="ex">
  <button data-bind="click: add">+</button>
  <button data-bind="click: del">-</button>
  <div id="tree"
       data-role="treeview"
       data-drag-and-drop="true"    
       data-bind="source: src,
                  events: {dragend: drag}"></div>

  <textarea style="width:400px; height:500px; white-space:nowrap;" id="txt"></textarea>
</div>

CSS

.k-treeview .k-top,
.k-treeview .k-mid,
.k-treeview .k-bot {
  background-image: url('http://aspnet-skins.telerikstatic.com/mvc/2012.2.607/Default/treeview-nodes.png');
  background-repeat: no-repeat;
  margin-left: -16px;
  padding-left: 16px;
}

.k-treeview .k-item { background-image: url('http://aspnet-skins.telerikstatic.com/mvc/2012.2.607/Default/treeview-line.png'); }
.k-treeview .k-last { background-image: none; }


.k-treeview .k-top { background-position: -91px 0; }
.k-treeview .k-bot { background-position: -69px -22px; }
.k-treeview .k-mid { background-position: -47px -44px; }
.k-treeview .k-last .k-top { background-position: -25px -66px; }
.k-treeview .k-group .k-last .k-bot { background-position: -69px -22px; }

.k-treeview .k-item {
  background-repeat: repeat-y;
}

.k-treeview .k-first {
  background-repeat: no-repeat;
  background-position: 0 16px;
}

JavaScript

var cnt=10101;
var localData = [
  { id: 1, text: "Node 1", hasChildren: true, items: [
    { id: 101, text: "Node 1.1", hasChildren: true, items: [
      { id: 10101, text: "Node 1.1.1" }
    ] }
  ] }, 
  { id: 2, hasChildren: true, text: "Node 2" },
  { id: 3, hasChildren: true, text: "Node 3" }
];

function get(data, id) {
  if (!id) {
    return data;
  } else {
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        return data[i].items;
      } else if (data[i].items) {
        var result = get(data[i].items, id);
        if (result) return result;
      }
    }
  }
};

var hds = new kendo.data.HierarchicalDataSource({
  transport: {
    read: function (e) {
      console.log("read:",e.data);
      var id = e.data.id;
      var data = get(localData, id);
      if (data) {
        e.success(data);
      } else {
        setTimeout(function() {
          e.success([
            { id: id + 1, text: "Remote node 1", hasChildren: false },
            { id: id + 2, text: "Remote node 2", hasChildren: true }
          ]);
        }, 1000);
      }
    }
  },
  schema: {
    model: {
      id: "id"
    }
  }
});

var model = kendo.observable({
  src: hds,
  add: function(e){
    var d = $("#tree").data("kendoTreeView");
    var sel = d.select();
    var selData = d.dataItem(sel);
    var n = cnt++;

    var obj = {text:n, id: n};

    if(sel.length>0){
      //obj.parentId = selData.id;
      d.append(obj, sel );
    }
    else
    {
      d.append(obj);
    }
  },
  del: function(e){
    var d = $("#tree").data("kendoTreeView");
    var sel = d.select();
    var selData = d.dataItem(sel);
    d.detach(sel);
    d.remove(sel);
    console.log("del:", selData.id);
  },
  drag: function(e) {
    var d = $("#tree").data("kendoTreeView");
    var node = d.dataItem(e.sourceNode);
    nodeId = node.id;
    panetdId = d.dataItem(d.parent(e.sourceNode)).id;
    node.parentId = panetdId;
  }
});

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

var filter = null;//...