This is a migrated thread and some comments may be shown as answers.

Radtreeview inside radCombobo with filtering support.

9 Answers 198 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

answered on 26 Mar 2010, 01:47 PM

Hello sankardeep v,

I am afraid that filtering a RadTreeView nested within the ItemTemplate of a RadComboBox control is not supported. That is why I will suggest you something similar.

You can handle OnclientKeyPressing event, search among the tree nodes to find the matching one:

<telerik:RadComboBox ID="RadComboBox1" Width="300"

AllowCustomText="true" DropDownWidth="300"

Height="300"

OnClientKeyPressing="OnClientKeyPressingHandler"

runat="server">

<ItemTemplate>

<div onclick="StopPropagation(event)">

<telerik:RadTreeView ID="RadTreeView1"

OnClientNodeClicked="OnClientNodeClickedHandler"

runat="server">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Mazda">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Toyota">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Honda">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="BMW">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Mercedes">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Audi">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Subaru">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Mitsubishi">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeView>

</div>

</ItemTemplate>

<Items>

<telerik:RadComboBoxItem runat="server" />

</Items>

</telerik:RadComboBox>

<script type="text/javascript">

function OnClientKeyPressingHandler(sender, eventArgs) {

var e = eventArgs.get_domEvent();

var code = e.which || e.charCode || e.keyCode;

var character = String.fromCharCode(code);

if (!e.shiftKey)

character = character.toLowerCase();

var searchText = sender.get_text() + character;

var tree = sender.get_items().getItem(0).findControl("RadTreeView1");

var nodes = tree.get_allNodes();

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

if (nodes[i].get_text().startsWith(searchText)) {

var node = nodes[i];

var text = node.get_text();

node.select();

node.expand();

while (node.get_parent() != tree) {

node.get_parent().expand();

node = node.get_parent();

}

setTimeout(function() { sender.set_text(text); }, 0);

break;

}

function OnClientNodeClickedHandler(sender, eventArgs) {

var node = eventArgs.get_node();

var combo = $find("<%= RadComboBox1.ClientID %>");

combo.set_text(node.get_text());

}

function StopPropagation(e) {

e.cancelBubble = true;

if (e.stopPropagation) {

e.stopPropagation();

}

</script>

All the best,
Kalina
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.

answered on 15 Jun 2011, 07:18 AM

Hi Kalina
I am using the sample you gave

I am facing one problem in the code
I am not able to take the value of the node that i select

In the code there is only text and no value for the tree nodes
<ComboBox ID="RadComboBox1" Width="300" AllowCustomText="true" DropDownWidth="300" Property="OUID"
            Height="300" OnClientKeyPressing="OnClientKeyPressingHandler" runat="server">
            <ItemTemplate>
                <div onclick="StopPropagation(event)">
                    <telerik:RadTreeView ID="RadTreeView1" OnClientNodeClicked="OnClientNodeClickedHandler"
                        runat="server">
                    </telerik:RadTreeView>
                </div>
            </ItemTemplate>
            <Items>
                <telerik:RadComboBoxItem runat="server" />
            </Items>
        </ComboBox>

CS
protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {


                RadTreeView objTree = (RadTreeView)RadComboBox1.Items[0].FindControl("RadTreeView1");
                if (null != objTree)
                    bindApplicationsTree(ref objTree);
            }

        }
        private void bindApplicationsTree(ref RadTreeView objtree)
        {
            objtree.DataTextField = "Name";
            objtree.DataFieldParentID = "ParentID";
            objtree.DataFieldID = "ID";
            objtree.DataSource = LoadData();
            objtree.DataBind();

        }

I have button in aspx page and when i click on that i need selected node value i.e ID of the node

Please help me

Karthik.K