Radtreeview inside radCombobo with filtering support.

[sankardeep v]

Hi,
                 I need some help guys . I need  a treeview to be inside a combobox that i know how to do .
But what i need i also need to filter the comboBox. Atleast  i need to filter the Parent Elements.
Help me guys .
Sankar

[sankardeep v]

its been almost 24 hrs not a single post . come guys please help.........

[Kalina]

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.

[Karthik Kantharaj]

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

[Karthik Kantharaj]

Hi

I found the solution

Thanks

[Karthik Kantharaj]

Hi Kalina

One query
Can we do all the stuff that is dont in Javascript to c#?

Karthik.K

[Kalina]

Hello Karthik Kantharaj,

Could you please explain your implementation in more details?
What is the exact logic that you prefer to add at server-side instead of writing it on client-side?

Regards,
Kalina
the Telerik team

[Karthik Kantharaj]

Hi Kalina
Thank you

I am doing every thing on my server side and we have One class with all Telerik controls imported
e.g

class myCustomclass : RadComboBox
{
}

So like above we are doing every thing on server side (Manager class)
Can you please let me know how to do or any sample

Karthik.K

[Kalina]

Hi Karthik Kantharaj,

I am afraid that we do not have such example.
In general inheriting RadComboBox class is not recommended.

Regards,
Kalina
the Telerik team

[Karthik Kantharaj]

Hi Kalina

Sorry to say we did with the same requirement and got the result

Any ways thank you as the code is more secure i cannot send you the sample

Thanks

Karthik.K