Rank 2
<
telerik:RadComboBox ID="cbRange" runat="server" >
<ItemTemplate>
<div id="div1">
<telerik:RadTreeView runat="server" ID="rd" NodeExpand="rd_NodeExpand" OnClientNodeClicking="cbNodeClicking">
</telerik:RadTreeView>
</div>
</ItemTemplate>
<Items>
<telerik:RadComboBoxItem Text="" />
</Items>
</telerik:RadComboBox>
function cbNodeClicking(sender, args)
{
var comboBox = $find("<%= cbRange.ClientID %>");
var node = args.get_node();
if(node.get_level()<2)
{
SomeHtmlInputControl.value = "";
comboBox.set_text("");
}
else
{
SomeHtmlInputControl.value = node.get_value();
comboBox.set_text(node.get_text());
}
comboBox.hideDropDown();
}
After installing the latest 2008.Q1 release of the contros, I get this strange behaviour: The very first time I select a node, regardless of its level, I get all first level nodes text combined, as the text set in the combobox! After that, each time I select a node, either the empty string (for level less than 2) or the node text is set as the ComboBox text, which is the correct behaviour.
Why is that?
8 Answers, 1 is accepted
Did you refer to the online example about treeview in combobox? If you have not, I suggest that you give it a go as it should get you started. The example resides at:
http://www.telerik.com/demos/aspnet/prometheus/TreeView/Examples/Functionality/TreeViewComboBox/DefaultCS.aspx
Hope this helps.
Kind regards,
Nick
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 2
Nick, I did refer to the online example, with the only difference that I am using the ‘load on demand’ feature for loading data to the TreeView. The scenario is exactly the same:
Continents are loaded to the TreeView from a DataSet in Session. On node expand, Countries are loaded under the Continent and in the same manner, Cities are loaded under the Country. Continent -> Country -> City.
The idea is that only a city is selectable (hence I use and compare the node level). When a user selects a City, the City Name and Id are set in two html input controls, while another field (used in node category) is set as the ComboBox Text. When a user selects a country or a continents, the ComboBox Text is set to nothing as well as the value in the two other html input controls.
The problem now is that the very first time I select a City, while the City Name and City ID are set as values respectively to the input controls, a string combined from all the Continents is set as the ComboBox Text (e.g. Continent1 Continent1 Continent2 Continent3 Continent4…) . In the ‘Prometheus’ version, an empty string was set as the ComboBox Text (similar behavior). After the first time selection, each time I select a city, the control works as it should do .
Below I include the code from the UserControl, as is. I am not using countries or cities but rather areas and precincts but the idea is the same as above. Please have in mind that the UserControl is placed on anther UserControl, on an aspx page (inside a radAjaxPanel).
Any Ideas?
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ctrlOTARangeSelect.ascx.cs"
Inherits="ctrl_ctrlOTARangeSelect" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadCodeBlock ID="OTARangeCodeBlock" runat="server">
<script type="text/javascript">
function cbAreaNodeClicking(sender, args)
{
var comboBox = $find("<%= cbOTARange.ClientID %>");
var hOTARangeIDvalue = document.getElementById("<%= OTARangeIDvalue.ClientID %>");
var hOTARangeNomosDescrValue = document.getElementById("<%= OTARangeNomosDescrValue.ClientID %>");
var node = args.get_node();
if(node.get_level()<2)
{
hOTARangeIDvalue.value = "";
hOTARangeNomosDescrValue.value = "";
comboBox.set_text("");
}
else
{
hOTARangeIDvalue.value = node.get_value();
hOTARangeNomosDescrValue.value = node.get_category();
comboBox.set_text(node.get_text());
}
comboBox.hideDropDown();
}
</script>
</telerik:RadCodeBlock>
<table width="300px" cellpadding="0" cellspacing="0" style="margin: 0 0 0 0" align="left" border="0">
<tr>
<td align="left" colspan="3">
<telerik:RadComboBox ID="cbOTARange" runat="server" Height="300px" Width="300" Style="vertical-align: middle;" RadComboBoxImagePosition="Right">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
<ItemTemplate>
<div id="div1" style="height: 300px;">
<telerik:RadTreeView runat="server" ID="rdota" Width="294" OnNodeExpand="rdArea_NodeExpand"
OnClientNodeClicking="cbAreaNodeClicking" Height="100%">
</telerik:RadTreeView>
</div>
</ItemTemplate>
<Items>
<telerik:RadComboBoxItem Text="" />
</Items>
<ExpandAnimation Type="OutQuart"></ExpandAnimation>
</telerik:RadComboBox>
</td>
</tr>
</table>
<div style="visibility: hidden;">
<input id="OTARangeIDvalue" runat="server" />
<input id="OTARangeNomosDescrValue" runat="server" />
</div>
- - - - - - - - - - - -
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using System.Text;
public partial class ctrl_ctrlOTARangeSelect : UserControl
{
public string OTARangeDescr
{
get
{
return cbOTARange.Text;
}
set
{
cbOTARange.Text = value;
}
}
public int OTARangeID
{
get
{
return Conv.IsNullInt(OTARangeIDvalue.Value, 0);
}
set
{
OTARangeIDvalue.Value = value.ToString();
}
}
public string ProgrNomosDescr
{
get
{
return OTARangeNomosDescrValue.Value;
}
set
{
OTARangeNomosDescrValue.Value = value;
}
}
RadTreeView rdota;
void SetRadTreeVariable()
{
rdota = cbOTARange.Items[0].FindControl("rdota") as RadTreeView;
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
cbOTARange.Items[0].Attributes.Add("OTARangeIDvalue", "");
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SetRadTreeVariable();
AddRootArea();
}
}
private void AddRootArea()
{
DataTable dt = Core.AppGlobals.ProgrPerif;
foreach (DataRow dr in dt.Rows)
{
RadTreeNode n = new RadTreeNode();
n.Text = dr["ProgrPerifDescr"].ToString();
n.Value = dr["ProgrPerifID"].ToString();
n.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
rdota.Nodes.Add(n);
}
if (OTARangeID > 0)
{
//exit value
DataRow dtO = Core.AppGlobals.ProgrOTARange.Rows.Find( (object)OTARangeID);
DataRow dtN = Core.AppGlobals.ProgrNomos.Rows.Find(dtO["ProgrNomosID"]);
RadTreeNode n = rdota.FindNodeByValue(dtN["ProgrPerifID"].ToString());
NodeExpand(n);
n.ExpandMode = TreeNodeExpandMode.ClientSide;
n.Expanded = true;
n = n.Nodes.FindNodeByValue(dtN["ProgrNomosID"].ToString());
NodeExpand(n);
n.ExpandMode = TreeNodeExpandMode.ClientSide;
n.Expanded = true;
n = n.Nodes.FindNodeByValue(dtO["OTARangeID"].ToString());
n.Selected = true;
}
}
protected void rdArea_NodeExpand(object sender, RadTreeNodeEventArgs e)
{
NodeExpand(e.Node);
}
private void NodeExpand(RadTreeNode node)
{
DataRow[] dt = null;
switch (node.Level)
{
case 0:
dt = Core.AppGlobals.ProgrNomos.Select("ProgrPerifID=" + node.Value);
foreach (DataRow dr in dt)
{
RadTreeNode n = new RadTreeNode();
n.Text = dr["ProgrNomosDescr"].ToString();
n.Value = dr["ProgrNomosID"].ToString();
n.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
node.Nodes.Add(n);
}
break;
case 1: dt = Core.AppGlobals.ProgrOTARange.Select("ProgrNomosID=" + node.Value);
foreach (DataRow dr in dt)
{
RadTreeNode n = new RadTreeNode();
n.Text = dr["OTARangeDescr"].ToString();
n.Value = dr["OTARangeID"].ToString();
DataRow[] rnomosdescr = Core.AppGlobals.ProgrNomos.Select("ProgrNomosID=" + node.Value);
n.Category = rnomosdescr[0]["ProgrNomosDescr"].ToString();
node.Nodes.Add(n);
}
break;
}
}
}
You should subscribe to the onclick event of "div1" and define its event handler as follows:
| function StopPropagation(e) |
| { |
| if(!e) |
| { |
| e = window.event; |
| } |
| e.cancelBubble = true; |
| } |
| <itemtemplate> |
| <div id="div1" onclick="StopPropagation()"> |
| <telerik:RadTreeView runat="server" ... |
I hope this helps.
Kind regards,
Veskoni
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 2
Rank 1
in this example "e" is the event parameter.
cancelBubble property sets or retrieves whether the current event should bubble up the hierarchy of event handlers.
We set it to True so bubbling is disabled for this event, preventing the next event handler in the hierarchy from receiving the event.
Sincerely yours,
Veskoni
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 2
I'm trying to do this within the code behind with VB syntax. I too want to populate a treeview within a combo box, but I'm getting allot of weird results. I have looked at the example, but do I have to use client side JavaScript to make this work correctly? The tuff part is I have the tree working like I want, but when I add the control to the combo box I start getting the weird results. I have 3 layers of the tree and when I click the parent it works, but have that it doesn't. Another reason this is more complicating is this is within a usercontrol and that usercontrol is used with the insert/update of a rad data grid. So when I use the usercontrol there is no check if its not a post back to build the results on the first load. Is there an example or could someone make an example of how to do this within code behind using vb syntax. It would also be great if it was in a usercontrol and used within the edit/insert of a data grid so I could see how you are handling the not post back issue.
Any help would be greatly appreciated.
Can you please describe in more detail what exactly is the postback issue that you have?
Kind regards,
Veselin Vasilev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.