
@{
    ViewBag.Title = "Test TreeView";

}


<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6">
        Select <b>CEO</b> node then type target child id (2 or 3 or 4 or 7) you want to load: <input type="text" id="target_child_id" value="7" />
        @(Html.Kendo().Button()
                    .Name("findChildredNode")
                    .Tag("span")
                    .Content("Load this child.")
                    .Events(ev => ev.Click("loadChildredNode"))
        )

    </div>
</div>

<div class="row">
    <div id="treeView"></div>
</div>

<script type="text/javascript">
   
    $(document).ready(function () {
        loadInitialNode();
    });

    var selectNode;
    var availableNodeIdString = "1,2,3,4,7";
    var availableNodeIdArray = [];
    availableNodeIdArray = availableNodeIdString.split(",");

    //Load top node and two direct children nodes.
    function loadInitialNode() {

        //Clear tree if already rendered.
        if ($('#treeView').data('kendoTreeView') != null) {
            $("#treeView").data('kendoTreeView').destroy();
        }

        $.post("../TreeViewTest/LoadInitialNode", {}, function (data, status) {
            if (status =="success") {
                var itemTemplate = "<div id='#= item.id  #' class='node' > " + "#= item.FirstName # #= item.LastName # - #= item.Position #</div>";

                             treeData = new kendo.data.HierarchicalDataSource({
                                 data: [data]
                             });

                             $('#treeView').kendoTreeView({
                                 template: itemTemplate,
                                 dataSource: treeData,
                                 expand: onTreeviewExpand,
                                 select: onTreeviewSelect
                             });
                            //Root node selected
                             hightlightNote("1");
                         }
                         else {            
                             $('#treeView').html("");
                             alert("No tree view data loaded!")
                         }
     });
    }//end loadInitialNode() {

    //Load deeper level children when click "Load this child" button
    function loadChildredNode() {
        var msg = "";
        if (typeof selectedNode == 'undefined') {
            msg="you must select parent before load child node";      
        }

        if ($("#target_child_id").val()=="") {
            msg =msg + "\nyou must type target child id before loading child node ";
        }

        if (msg != "")
        {
            alert(msg);
        }
        else {
            doLoadChildredNode(selectedNode, $("#target_child_id").val());
        }      
    }

    function doLoadChildredNode(selectedNode, targetChildId) {
        if (selectedNode.id == targetChildId) {
            hightlightNote(targetChildId);
            return;
        }

        var idx = availableNodeIdArray.indexOf(selectedNode.id);
        if (availableNodeIdArray.indexOf(targetChildId) < 0 || idx<0) {   //show node not exist or node not in current node branch message.
            alert("Target node is not in the system or not in current selected node branch!.");
            return;
        }

        if (idx > -1 && (selectedNode.hasChildren)) {
            //expand the node (children node will auto load if they are not be load yet) 
            expandNodeById(selectedNode.id)


            //If below alert is commented out, each item in items  
            alert("After this message you could see loaded nodes and nodes data");//???How to skip this and still can get item[i].id? (see below code)
            var treeview = $('#treeView').data('kendoTreeView');
            var dataSource = treeview.dataSource;
            var dataItem = dataSource.get(selectedNode.id);
            var node = treeview.findByUid(dataItem.uid);
            var items = dataItem.items; //since children node have been loaded. Items should have value.
           
            var newParentFound = false;
            //find first childre node in array and continue drilldown to load deeper lever node until get target child node
            for (var i = 0; i < items.length; i++) {
                if (items[i].id != null && items[i].id != "" && availableNodeIdArray.indexOf(items[i].id) > -1) {//??? why item[i].id="" if no above alert()
                    var itemuid = items[i].uid;
                    node = treeview.findByUid(itemuid);
                    selectedNode = $('#treeView').data('kendoTreeView').dataItem(node);
                    doLoadChildredNode(selectedNode, targetChildId);
                    break;
                }
            }
        }
    }

    function loadChildren(parentNode) {
        //alert("in loadChildren()");
        return $.post("../TreeViewTest/LoadChildren?parentId=" + parentNode.id,
              function (data, status) {
                  if (status=="success") {

                      var treeview = $('#treeView').data('kendoTreeView');
                      var parentNodeElement = treeview.findByUid(parentNode.uid);
                      var pData = treeview.dataItem(parentNodeElement);

                      if (pData && pData.hasChildren) {

                          var items = pData.children.data();
                          for (var i = 0, max = items.length; i < max; i++) {
                              var item = treeview.findByUid(items[0].uid);
                              treeview.remove(item);
                          }

                          if (data.length > 0)
                              treeview.append(data, parentNodeElement);
                      }
                  }
                  else {
                      alert("Error occur.");
                  }
              });
    }

    function onTreeviewExpand(e) {
        //alert("in onTreeviewExpand()");
        selectedNode = $('#treeView').data('kendoTreeView').dataItem(e.node);

        if (!selectedNode.childrenloaded) {        
            loadChildren(selectedNode);
            selectedNode.childrenloaded = true;
        }
    }

    function onTreeviewSelect(e) {
        selectedNode =$('#treeView').data('kendoTreeView').dataItem(e.node);
    }

    function expandNodeById(nodeId) {
        var treeview = $('#treeView').data('kendoTreeView');
        var dataSource = treeview.dataSource;
        var dataItem = dataSource.get(nodeId);
        var node = treeview.findByUid(dataItem.uid);
        selectedNode = treeview.dataItem(node);
        treeview.select(node);
        treeview.expand(node);
    }

    this.hightlightNote = function (nodeId) {//same as select
        var treeview = $('#treeView').data('kendoTreeView');
        var dataSource = treeview.dataSource;
        var dataItem = dataSource.get(nodeId);
        var node = treeview.findByUid(dataItem.uid);
        selectedNode = treeview.dataItem(node);
        treeview.select(node);
    }
</script>


