RadTreeView in RadCombo with Dynamic Data

[Ramjee]

I am using 2 RadComboBox controls (Region & Country). The Country drop-down is populated dynamically when user selects a Region in the Items_Requested event. I need to create a RadTreeView control which will have a Country Name and list locations for each country. How could this be implemented? I am getting script not registered Javascript error.

Thanks in advance.

[robertw102]

I believe this demo should be of help to you.

http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultcs.aspx

You have to use the ItemTemplate of the RadComboBox to place the RadTreeView control in it.

[Ramjee]

Thanks a Ton!

Looks like this is going to work for me. Is there by anyway to findout the columns specified for the second datasource?

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT * FROM Vehicles" />

Thanks again.

[Yana]

Hi Ramjee,

You can see the columns from the treeview definition:

  <telerik:RadTreeView ID="RadTreeView1" runat="server" DataSourceID="SqlDataSource2" DataTextField="VehicleName" DataValueField="VehicleTypeID" DataFieldID="ID" DataFieldParentID="VehicleParentID"
...
>

they're ID, VehicleParentID, VehicleTypeID, VehicleName.

All the best,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ramjee]

Thank you very much. I am trying to understand the code better and have one more question. Per my understanding,

SQlDatasource2:
ID  - Maps to VehicleId
VehicleParentID - Maps to Make (Id of Ford,Mazda,BMW)
VehicleTypeID- Maps to Vehicle Type Id( Id of Car, Limo)
VehicleName - Name of Vehicle (Explorer, Fiesta, Passat)

Please confirm if the above is correct. Also, how is the Make (Ford, BMW) displayed in the drop-down. The SQLDatasource2 looks like

Select ID, VehicleParentID, VehicleTypeID, VehicleName 
From Vehicles

Thanks once again in advance.

[Yana]

Hi Ramjee,

The Makes (Ford, BMW) have their VehicleParentID set to null, because they're the parent nodes. You can view the used table Vehicles from Telerik database in your installation folder/Live Demos/App_Data.

Also you can read more about binding the treeview to hierarchical data here.

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ramjee]

Great!

Works fine. However, for some strange reasons the load time is almost close to 15 seconds for the RadDropDown which contains the TreeView control.

Also, I am unable to invoke the client-side event "requestItems()" for the drop-down containing the treeview which in-turn should call the server-side ItemsRequested event. I am getting an error message which states "Script control RadTreeView1 is not a registerd script control......"

var

 

combo2 = $find("<%= RadComboBox2.ClientID %>");

 

combo2.requestItems(item.get_value(), false)

<

 

telerik:RadComboBox ID="RadComboBox2" Width="240px" Height="300px"

 

 

AllowCustomText="true" EmptyMessage="Showing all cars" OnClientDropDownClosing="OnClientDropDownClosingHandler"

 

 

runat="server">

 

 

<ItemTemplate>

 

 

<div onclick="StopPropagation(event)">

 

 

<telerik:RadTreeView ID="RadTreeView1" runat="server" DataSourceID="SqlDataSource2"

 

 

DataTextField="VehicleName" DataValueField="VehicleTypeID" DataFieldID="ID" DataFieldParentID="VehicleParentID"

 

 

OnClientNodeClicking="OnClientNodeClickingHandler">

 

 

<DataBindings>

 

 

<telerik:RadTreeNodeBinding Depth="0" Category="Make" ImageUrlField="ImagePath" />

 

 

</DataBindings>

 

 

</telerik:RadTreeView>

 

 

</div>

 

 

</ItemTemplate>

 

 

<Items>

 

 

<telerik:RadComboBoxItem />

 

 

</Items>

 

 

</telerik:RadComboBox>

Please advise.

Thanks a lot in advance!!!!

 

[Simon]

Hello Ramjee,

Since during AJAX callbacks (e.g. RadComboBox' Items request) the page life cycle is not fully executed and adding other script (AJAX) controls to the page results in this exception (in your case the RadTreeView inside the RadComboBox ItemTemplate).

Regarding the high load time, can you please provide more information about it? When does it happen and with which control?

Greetings,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ramjee]

Simon,

The server-side Items_Requested events fires. However, I am getting this javascript error and the tree view does not contain the filtered values. Is there a work-around for this?

Do you have an example where a RadTreeview in a combobox displays dynamic data on a previous selection? If I use the cliient-side filtering such as in:

function

 

updateTreeView(values)

 

{

 

var tree = combo2.get_items().getItem(0).findControl("radTreeLocations");

 

 

var nodes = tree.get_allNodes();

 

 

 

//debugger;

 

 

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

 

{

 

var node = nodes[i];

 

 

//set all nodes visible initially

 

node.set_visible(

true);

 

 

//hide all leaf nodes which value does not exist in the values string

 

 

if(values!=node.get_value() && node.get_value() && values.length > 0)

 

{

node.set_visible(

false);

 

}

 

}

 

 

//loop through loop nodes only and hide

 

 

//the ones that does not have any visible child node

 

 

//expand the others

 

 

var rootNodes = tree.get_nodes();

 

 

for (var i = 0; i < rootNodes.get_count(); i++)

 

{

 

var root = rootNodes.getNode(i);

 

 

var showTheRootNode = false;

 

 

for (var j = 0; j < root.get_nodes().get_count(); j++)

 

{

 

if (root.get_nodes().getNode(j).get_visible())

 

{

 

//root.expand();

 

showTheRootNode =

false;

 

 

break;

 

}

}

root.set_visible(showTheRootNode);

}

}

I get a IE script error stating that it is taking a long time to execute... Is there an alternate route to filter data on the client-side? Please help.

Thanks in advance.

Ramjee

[Simon]

Hello Ramjee,

You cannot have an AJAX control in the RadComboBox' drop down when the RCB is loading Items on demand - this results in the JS error you were receiving in the first place.

Regarding the client-side filtering and the related browser message, the latter can occur if there are a lot of Nodes in the TreeView. You need to optimize your script, e.g. do not first set the visible property of a Node and toggle it, do not loop through the root Nodes and their children once again and do this in the first loop after you set a child Node visible property, etc.

Finally I do not understand to what example you are referring. Can you please elaborate?

Best wishes,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.