[Solved] RadTreeView in RadComboBox - clickable only last nodes

[GrZeCh]

Hello!

I have something similar to this example:

http://www.telerik.com/DEMOS/ASPNET/Prometheus/TreeView/Examples/Functionality/TreeViewComboBox/DefaultCS.aspx

But instead of all nodes beeing clickable/selectable I want to have only last nodes clickable (last nodes have NavigateURL attrib set) and if user will click on some parent node then this node should expand instead of closing RadComboBox.

Is this possible?

Thanks in advance

[Atanas Korchev]

Hi GrZeCh,

You can try the following:
        function nodeClicking(sender, args)
        {
            var comboBox = $find('RadComboBox1');
            var node = args.get_node()
            if (node.get_navigateUrl())
               return;

            comboBox.set_text(node.get_text());
            
            comboBox.hideDropDown();
        }
Kind regards,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[GrZeCh]

I've added to my RadTreeView

OnClientNodeClicking="nodeClicking"

and replaced

'RadComboBox1' to 'offerRadComboBox'

(my RadComboBox has ID="offerRadComboBox").

Now when I'm clicking on nodes I'm getting this JS error

comboBox is null

EDIT:

I've changed

$find('offerRadComboBox');

to

$find('<%= offerRadComboBox.ClientID %>')

and now it works OK but I need something else.

Look here:

            if (node.get_navigateUrl() == null) {
                node.expand()
            }
            else {
                comboBox.hideDropDown();
            }

when node.expand() function is triggered (and basically when I click on any node) I don't want to RadComboBox to fold up.

[Veselin Vasilev]

Hi GrZeCh,

You need to place the treeview in a div:

<itemtemplate>
            <div id="div1" onclick="StopPropagation(event)">
                <telerik:RadTreeView runat="server" ...

and stop bubbling on click:

function StopPropagation(e)
{
     e.cancelBubble = true;
     if (e.stopPropagation)
     {
        e.stopPropagation();
     }
}

I hope this helps.

Greetings,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[GrZeCh]

Thank You. This is what I was looking for

[GrZeCh]

when StopPropagation(e) is fired then dropdownlist is closed and opened again (it flickers). Is there any chance to make dropdownlist not to do that?

[Veselin Vasilev]

Hi GrZeCh,

The combobox does not open again when it closes. Can you help us reproduce the problem at our side?

Thanks

All the best,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[GrZeCh]

Javascript:

    <script type="text/javascript">
        function nodeClicking(sender, args) {
            var comboBox = $find('<%= offerRadComboBox.ClientID %>');
            var node = args.get_node();
            if (node.get_navigateUrl() == null) {
                node.expand()
            }
            else {
                comboBox.hideDropDown();
            }
            comboBox.showDropDown();
        }
        function StopPropagation(e) {
            e.cancelBubble = true;
            if (e.stopPropagation) {
                e.stopPropagation();
            }
        }
    </script>

ASPX:

        <telerik:RadComboBox ID="offerRadComboBox" runat="server" Height="240px" Width="415px"
            ShowToggleImage="True" Skin="WebBlue" Style="vertical-align: middle; margin-bottom: 8px;">
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
            <ItemTemplate>
                <div onclick="StopPropagation(event)">
                    <telerik:RadTreeView ID="offerRadTreeView" runat="server" Skin="Inox" OnNodeDataBound="offerRadTreeView_NodeDataBound"
                        DataTextField="name" DataValueField="id_catoffer" DataFieldParentID="id_parent"
                        OnClientNodeClicking="nodeClicking">
                        <CollapseAnimation Type="OutQuint" Duration="100"></CollapseAnimation>
                        <ExpandAnimation Duration="100"></ExpandAnimation>
                    </telerik:RadTreeView>
                </div>
            </ItemTemplate>
            <Items>
                <telerik:RadComboBoxItem Text="Wybierz kategorię" />
            </Items>
        </telerik:RadComboBox>

C#

        protected void offerRadTreeView_NodeDataBound(object sender, RadTreeNodeEventArgs e)
        {
            System.Data.DataRowView dataItem = (System.Data.DataRowView)e.Node.DataItem;
            if (e.Node.ParentNode != null)
            {
                e.Node.NavigateUrl = String.Concat("/offer.aspx?id=", dataItem["id_catoffer"]);
                e.Node.ParentNode.NavigateUrl = null;
            }
            if (Boolean.Parse(dataItem["expanded"].ToString()) == true)
            {
                e.Node.Expanded = true;
            }
            int id_catoffer;
            if (int.TryParse(Request.QueryString["id"], out id_catoffer))
            {
                if (id_catoffer == int.Parse(e.Node.Value))
                {
                    Page.Title = String.Concat(Page.Title, " » ", e.Node.Text);
                    e.Node.Selected = true;
                    e.Node.ExpandParentNodes();
                }
            }
        }

.. and now just databind offerRadTreeView with some data.

You mentioned "The combobox does not open again when it closes". ComboBox is opening without problems when it closes. I was asking about ComboBox flickering (it closes and opends again on every node click) when user is clicking on some node from RadTreeView.

[Veselin Vasilev]

Hi GrZeCh,

Can you please remove these lines from the nodeClicking javascript function:

else {
                comboBox.hideDropDown(); }
            comboBox.showDropDown();

so now the function looks like:

function nodeClicking(sender, args)
{
    var comboBox = $find('<%= offerRadComboBox.ClientID %>');
    var node = args.get_node();

    if (node.get_navigateUrl() == null)
    {
        node.expand()
    }
}

Kind regards,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[GrZeCh]

Thats it. Thanks