How to load the nodes of a tree view dynamically from the database....

[Ruqsana]

Hi,


Please suggest me a way to load the nodes of a tree view dynamically and also add nodes to the tree view and to save those nodes in the data base tables.........

Thanks in Advance,
Ruqsana.

[Denis]

I can describe our method for delayed loading.
First, you must fill root nodes. Each node must contain a fake node with "Loading..." text. You must handle "expand" event. In this method, you can make $.post or another query to your webservice/database. Use will see "Loading" fake node while this query processing. Also, you can use node template for storing some information about node. Look to our template, for example (and see attach for screenshot of final treeview):

<script id="treecar-template" type="text/kendo-ui-template">

# if(item.state >= 0) { #

    <a href='javascript:treeCarToggleItem(${item.type},${item.id});' style='margin-top:1px; margin-right:5px;'><img id='popup-${item.id}' src='@Url.Content("~/Content/state-")${item.state}.png'/></a>

# } #

# if(item.type==$.NT_ORG && item.id==$.DEF.IDC) { #

    <b><span style='color:blue;'>${item.text}</span></b>

# } else { #

    ${item.text}

# } #

# if(item.serial) { #

    <span id='last-access-${item.serial}' style='margin-left:2px; font-size:0.8em; vertical-align:top; color:${item.scolor}'>${item.stext}</span>

# } #

<input type='hidden' class='data-id' value='${item.id}'/><input type='hidden' class='data-type' value='${item.type}' />

<div class='popup k-widget hidden' id='car-popup-${item.type}-${item.id}' style='display:none; padding:3px;'></div>

</script>

In expand event, you can look to hidden fields like this:
....
expand: function (e) { alert(nodeId(e.node)); },
...

Another two functions can be help get information about node:

function nodeId(n) { return $(n).find('.data-id').val(); }

function nodeType(n) { return $(n).find('.data-type').val(); }

Using of this method you can store different types of nodes in single tree and loading nodes at-the-fly.

[Nohinn]

Or you can also (with the latest kendo ui version) use the hierarchical datasource.
You will need a server method that returns the child nodes.
The javascript code would look like this:

$('#TreeView').kendoTreeView({

               dataSource: {

                  transport: {

                     read: {

                        url: 'YOURURLHERE'

                     }

                  },

                  schema: {

                     model: {

                        id: 'ANIDPROPERTY',

                        hasChildren: 'PROPERTY'

                     }

                  }

               },

               dataTextField: 'TEXTPROPERTY'

});

a) The value you set as the model id will be send to the server method, so if you set for example as id 'Group', in the server method you must have a paramater with the same name, or look for a variable (if you use php) with that name to get the children nodes.
b) In the hasChildren, you will set the property that the tree should use to know if the node is expandable or not (true/false).

To add nodes you should make use of the .add or .append javascript function of the treeview.

$('#TreeView').data('kendoTreeView').append({text: "new node"});

The function accepts a second parameter used to specify that the new node should be appended as a children of the node you pass to the function (second parameter). If you do not set a second parameter it will be created in the first level.