Kendo Tree, starting with a number of nodes then dynamically loading the rest

Question

I am starting to work with a Kendo TreeView, I have an implementation which loads a number of treenodes at startup from a Asp MVC project

I'm not sure how to then dynamically load the other nodes, the documentation is pretty sparse in this area

I'm including the source below as I think it will be useful to others if nothing else. This code works for loading 'n' tree nodes

<script>    
    var dataSource = new kendo.data.HierarchicalDataSource( {
        transport: {
            read: function ( options )
            {
                debugger;
                $.ajax( {
                    url: "/EmployeePicker/EmployeePicker/GetTreeRoot",
                    async: false, //ensure the response is received before exiting the content function
                    success: function ( r )
                    {                       
                        options.success( r );
                    }
                } );
            }                           
        },
        schema: {
            model: {
                children: "Children"
            }
        }
    } );

    dataSource.read();

    var rootItems = dataSource.data();

    rootItems[0].load(); // does not initiate AJAX request

    $("#treeview").kendoTreeView({
        dataSource: dataSource,
        dataTextField: "Name"
    } );


</script>

and the MVC side.

public JsonResult GetTreeRoot()
{
    TreeNode root = new TreeNode("1",  "Root", true);           
    TreeNode childA = new TreeNode("1.1", "ChildA", true);
    TreeNode childA1 = new TreeNode("1.1.1", "ChildA1", false);

    // this one has a child but we're not initialising it
    TreeNode childB = new TreeNode("1.2", "ChildB", true);

    root.Children.Add(childA);
    root.Children.Add(childB);
    childA.Children.Add(childA1);

    List<TreeNode> list = new List<TreeNode>();
    list.Add(root);

    return Json(list, System.Web.Mvc.JsonRequestBehavior.AllowGet);
}

score 2 · Accepted Answer · edited May 23 '17 at 12:08

This is perfectly possible with Kendo, and there is a working demo here on SO at Lazy load in Kendo UI treeview with caching.

They key is in defining the transport.read function:

var homogeneous = new kendo.data.HierarchicalDataSource({
  transport: {
    read: function (options) {
      var id = options.data.id;
      var data = get(localData, id);
      if (data) {
        options.success(data);
      } else {
        // get remote children based on parent 'id'
      }
    }
  }
});

Check the demo linked above for the full example.

score 0 · Answer 2 · answered Oct 21 '14 at 09:25

0

This will need to go via Ajax but it adds a node where required. The key thing here is that the server has indicated that the node has children but the treeview can see they haven't loaded yet

$( "#treeview" ).kendoTreeView( {
            dataSource: dataSource,
            dataTextField: "Name",
            expand: expandNode
        } );


    function expandNode(e)
    {       
        var node = $( "#treeview" ).data( "kendoTreeView" ).dataItem( e.node )

        if ( node.Children.length > 0 )
            return;

        var treeview = $( "#treeview" ).data( "kendoTreeView" )

        var newNode = { Name: "NewNode", hasChildren: true, id: "4.1"};

        treeview.append(newNode, $(e.node) );
    }

answered Oct 21 '14 at 09:25

tony

2,178
2
23
40

while this is possible, it duplicates much of the work that the TreeView DataSource binding gives you. keep the data fetching in the DataSource transport, as shown in Dan's answer. – Alex Gyoshev Aug 05 '16 at 07:35
Also, as I've discovered since, if you want the loading spinner effect (essential for usability) then you need to use the built in mechanisms, e.g. transport: { read: { url: "" + "?token=" + token + "&", dataType: "json" } }, – tony Aug 05 '16 at 17:58

Kendo Tree, starting with a number of nodes then dynamically loading the rest

2 Answers2