KendoUI ObservableArray children being clobbered by KendoUI treeView

Question

Backstory
I'm using AngularJS/KendoUI and using angular-kendo-ui as a the 'bridge' between the two. I'm using Kendo for it's treeview component and this piece is a client requirement.

What I need to accomplish is
1. draw the tree menu from data provided by a service
2. periodically check each element in this data, and update a 'disabled' prop
3. redraw elements in the treeview based on the results from the above step.

Assumptions
1. If I want to be able to update the kendo tree view, then I need to use Kendo's observeables
2. I may be using Kendo's ObservableArray incorrectly here.

The problem
If I create a new ObservableArray like so

  var things = new kendo.data.ObservableArray([{
      text: "Parent 1",
      items: [{text: "Child 1"}, {text: "Child 2"}, {text: "Child 3"}]
  }])

things be logged to the console and the structure is intact. However, once the treeview is instantiated with this data, further logging of things to the console show that the children (items) are no longer present. It is very hard to iterate over and update children if they don't exist!

Plunker here http://plnkr.co/edit/qJpIvK?p=info, if you view the 'script.js' file and open the console, you should be able to see my issue.

here is the code

HTML

    <div ng-app="MyApp">
        <div ng-controller="TreeController">
            <div kendo-tree-view k-options="thingsOptions"></div>
        </div>
    </div>

JS

  var app = angular.module("MyApp", ["kendo.directives"]);

  app.controller('TreeController', function($scope, $timeout) {

    var things = new kendo.data.ObservableArray([{
      text: "Parent 1",
      items: [{
        text: "Child 1"
      }, {
        text: "Child 2"
      }, {
        text: "Child 3"
      }]
    }, {
      text: "Parent 2",
      items: [{
        text: "Child 1"
      }, {
        text: "Child 2"
      }, {
        text: "Child 3"
      }]
    }]);

    // should have 3 items
    console.log('preTreeView init', things[1].items);
    $scope.thingsOptions = {
      dataSource: things
    };

    $timeout(function() {
      // the 3 items expected are gone, why?
      console.log('postTreeView init', things[1].items);
    }, 1000);

  });

Is this a misuse of ObservableArray and if so, what is the correct approach?

Answer 1

Internally, the TreeView widget turns your ObservableArray into a kendo.data.HierarchicalDataSource http://docs.telerik.com/kendo-ui/api/framework/hierarchicaldatasource which moves each of the children into DataSource objects of their own.

You can navigate them afterward like this:

var treeViewWidget = $(".k-treeview").data("kendoTreeView");
var dataSource = treeViewWidget.dataSource; // this is a HierachicalDataSource

var parents = dataSource.data(); // Parent1 and Parent2
var parent1 = parents[0];
var doesParent1HaveChildren = parent1.hasChildren; // true

var childrenDataSource = parent1.children; // this is a HierarchicalDataSource
var child1 = childrenDataSource.data()[0]; // this is {text: "Child 1"}