Can I populate the entire RadDropDownTree client side?

[Andrew Kerrison]

Hi,

I would like to dynamically populate the RadDropDownTree client side - but I need all nodes to be fully expanded. The web service databinding scenario would be great, except I can't see any way to make it automatically expand all the nodes. Alternatively I can write a web service to return me a json list of the data I need, but I can't see a way to add nodes to the RadDropDownTree through javascript.

How can I achieve the functionality I want?

[Jon]

+1 on this.  I was about to post pretty much the same question as Andrew.  

[Veselin Tsvetanov]

Hello Andrew and Jon,

You could use the client-side API of the embedded RadTreeView. Very simple implementation of add node functionality is the following:

function add() {
    var tree = $find('RadDropDownTree1');
    var em = tree.get_embeddedTree()
    em.trackChanges();
    var node = new Telerik.Web.UI.RadTreeNode();
    node.set_text("New Node");
    em.get_nodes().add(node);
    em.commitChanges()
}

Regards,
Veselin Tsvetanov
Telerik by Progress

[Jon]

Hi Veselin 

Thanks for the reply but I think you missed the point.

For myself and I think Andrew as well the issue is that I am generating the data for the tree in a webservice.  That is sent to the page.  It works OK for the first level of the tree but second, third etc levels are only setup when you click on the > or + icons (depending on theme).  This means that if you try to preset selected values in the drop down you can't as their data isn't present.

This is another example of where a control that is supposed to make life easy actually makes things more difficult as so many work arounds are needed that it just makes using the control more complicated than it should be.

Regards

Jon

 

[Andrew Kerrison]

Hi Veselin,

Thanks for the reply. I wasn't aware of the get_embeddedTree() function, but I have now used that to achieve what I wanted.

A code extract of my web service callback for anyone else who may find it useful:

[quote]

                function success(data) {

//data has been ordered such that parent nodes will precede their childen.
                    var tree = $find('<%= rddtCategory.ClientID %>').get_embeddedTree();
                    tree.get_nodes().clear();

                    var nodes = JSON.parse(data.d);

                    for (var i = 0; i < nodes.length; i++) {

                        var node = new Telerik.Web.UI.RadTreeNode();
                        node.set_text(nodes[i].Text);
                        node.set_value(nodes[i].ID);

                        if (nodes[i].ParentID) {
                            var parent = tree.findNodeByValue(nodes[i].ParentID);
                            parent.get_nodes().add(node);
                            parent.expand(); //any node with 1+ children will get expanded
                        } else {
                            tree.get_nodes().add(node);
                        }
                    }

                }

[/quote]

 

I also agree with Jon though - whilst this works, it complicates a task which would be trivial if the web service binding model were more flexible.

[Jon]

That looks helpful Andrew, thanks for posting.  I need to solve how to attach attributes to the clientdatasource then I'll be able to use this :)

[Veselin Tsvetanov]

Hi,

Andrew, thank you for sharing with us your solution. I believe it will be very useful for other developers too.

Jon, Andrew, I also agree with you that the the WebService binding model of the RadDropDownTree lacks a bit flexibility. The reason for choosing this implementation was our intention to make binding as simple as possible. The current model is also the preferred one as it allows the control to work with large amount of data by loading on demand (on expand) only the needed nodes.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Jon]

Hi Andrew,

Sorry to be a pain but re the web service, are you using the RadClientDataSource for that?  If so, which event are you using?  I'm trying to use the OnRequestEnd event and am not getting anywhere with it.

Regards

Jon

 

[Andrew Kerrison]

Hi Jon,

I'm not using RadClientDataSource for the web service. I can't easily give you the code due to the way our library is factored, but the underlying method is essentially the same as you can find here:

http://forums.asp.net/t/1934215.aspx?Using+jQuery+ajax+to+call+asmx+webservice+methods

Andy

[Jon]

Hi Andy,

Ah I've got you.  Thanks for that I'll have a try with that one.  I haven't tried using jQuery for ajax so far but given the widespread use of it I think it's high time to have a look :)

Cheers

Jon