Show selected item in dropdowntree using demand on load webservice dropdown

[Karthik]

Hi,

I am using telerik dropdowntree with webservice binding as suggested in this link http://demos.telerik.com/aspnet-ajax/dropdowntree/examples/populatingwithdata/webserviceandclienttemplates/defaultcs.aspx

My requirement is to get selected item from database and show selected item in dropdowntree with webservice  demand on load. I need solution to this as soon as possible, could you please suggest a way?

[Nencho]

Hello Karthik,

I am not quite sure that I had understood the scenario you attempt to achieve. Could you  elaborate a bit more on the matter? Do you face any difficulties with the implementation of the WebService data binding approach?

Regards,
Nencho
Telerik

 

 

[Karthik]

Hi Nencho,

I am using dropdowntree with webservice and load on demand

Lets say we have data in this way,

(id, name, heirarchy)
(1, Mark, null), (2, Anderson, 1), (3, peter, 2), (4, ben, 3)
(5, john, null), (6, ken, 5), (7, kelvin, 6)

Now your demo shows, by default it will load records with Mark, John. When i click on "Mark", on demand it will load "Anderson" and when i select "Anderson" and submits the record and save to database. I don't have problem with this.

Now later, when user opens the form in Edit mode, we need to show "Anderson" as selected item in dropdowntree. Also, when user opens the dropdown then i need to load on demand items "Mark, John, Anderson"  and should select "Anderson" by default. No where in your demo, this type of functionality is not mentioned. Let me know if you need more info?

[Nencho]

Hello Karthik,

Please refer to the following documentation article, demonstrating the approach for pre-select a node, base on a text or a value:

http://www.telerik.com/help/aspnet-ajax/dropdowntree-how-to-preselect-text-or-value.html

Regards,
Nencho
Telerik

 

 

[Karthik]

Hi Nencho,

Whatever link you are referring doesn't load data on demand with web service. 

You are referring to binding data from code behind, but my requirement is to bind data from client side through web service

[Nencho]

Hello Karhik,

Please excuse me for not elaborating on the suggested approach previously. Generally the approach that you would need to use is to set the SelectedText (and SelectedValue) for the RadDropDownTree, when you open the form in Edit mode. You could store the previously applied SelectedText and Value in a hidden field, which you can access when the form is opened for edit, or you could directly access your database, in order to obtain the needed selection of the RadDropDownTree in question.

Regards,
Nencho
Telerik

 

 

[Karthik]

Could you please provide sample for that?

[Plamen]

Hello Karthik,

We have inspected the issue deeper and came to a conclusion that load on demand is not recommended binding for the described scenario. The reason for this is that I case when load on demand is used not all of the nodes are loaded initially. Yet the item selected may be each one of the treeview items so when we open the edit form we have to be able to access all the nodes in the tree otherwise we will not be able to select it as entry. This means that we will have to load all the nodes on edit of the item and the load on demand is not suitable for such demand.

Hope this will explain the issue.

Regards,
Plamen
Telerik

 

 

[Karthik]

Hi Plamen,

Now i changed my implementation, i will be loading all items in client side. After binding data from client side, how to select an item from client side? I didn't find any way to do in telerik documentation. 

[Plamen]

Hi,

Here is one way you can select an entry from the embedded tree from client side:

function pageLoad() {
               var $ = $telerik.$,
                   dropTree = $find("<%=CboTreeKategorije.ClientID%>"),
                   node= dropTree.get_embeddedTree().findNodeByText("Chai");

               dropTree._dropDown.show();
               $(node.get_element()).find(".rtIn").click();
               dropTree._dropDown.hide();
           }

Hope this information will be helpful.

Regards,
Plamen
Telerik

 

 

[Saikumar]

Hi,
1)how to select the raddropdowntree item after all items loaded into the dropdown tree using radclientdatasource at client side?,
In the page load if all items not loaded we cannot set the selected item. Can you suggest other than page load event(Ike, do we have any event for raddropdowntree after binding data through web service?).
2)"dropTree.get_embeddedTree().findNodeByValue()" its returning the parent nodes only.
if we try to find the child node its returning the null values.

Regards,
Sai

[Plamen]

Hello Sai,

There is no such event in RadDropDownTree but you can hook on the some of the client events of the embedded tree if it suits your scenario.

As for your second question you can use the get_allNodes method of the client RadTreeView object as for example it is described in this article.

Hope this information will be helpful.

Regards,
Plamen
Telerik

 

 

[Saikumar]

Hi Plamen,

1)I am looking for Raddropdowntree client side event which will fire after data binding in client side, the events in radtreeview not exist in raddropdowntree.I am using radclientdatasource for data bind for raddropdowntree using web service. I tried "OnDataParse" Client event of Radclientdatasource I am getting below exception, if possible can you give example on "OnDataParse" event of Radclientdatasource with raddropdowntree.

<STRONG>TypeError: aY is undefineda0._pristineData=aY.slice(0);</STRONG>

2)As suggested for second point there is no " get_allNodes" such event for raddropdowntree,
can you please give one example  for selecting the child node for raddropdowntree.

[Plamen]

Hi,

It looks like I could not explain properly. You can use the client events and methods of the internal treeview as in the code below where we use the OnClientLoad event of RadDropDowntree:

function OnClientLoad(sender) {
               var embeddedTree = sender.get_embeddedTree();

               embeddedTree.add_mouseOver(function() {
                   console.log("mouseOver");
               });


               for (var i = 0; i < embeddedTree.get_allNodes().length; i++) {
                   console.log(embeddedTree.get_allNodes()[i].get_text());
               }

           }

As for your other question- in your scenario it seems that the sub nodes are not loaded yet and that is why the FindNodeByText does not find the node. In order to select an entry in RadDropDownTree the parent nodes of the desired nodes should be expanded.

Hope this will help you solve the issue.

Regards,
Plamen
Telerik

 

 

[Saikumar]

Hi Plamen,
As you suggested for selecting the child node need to expand all parent nodes, In my scenario I have 1560 records if we expand all nodes  the browser getting hanged. Can you provide  the solution for expanding the all the nodes and  selecting the child node. using raddropdowntree

[Ivan Danchev]

Hi Sai,

If understand correctly, you are trying to expand all level 1 nodes when you click on a child node. You can do that with a slight change in the code from Plamen's reply, by using the expand() client-side method of the internal treeview. Just change the for-loop to:

for (var i = 0; i < embeddedTree.get_allNodes().length; i++) {
    embeddedTree.get_allNodes()[i].expand();
}

Regards,
Ivan Danchev
Telerik