Multi select treeview in RadCombobox

[Amit]

have a RadTreeview Control embeded in RadCombobox.
Checkboxes and Multiple select property of treeview is set to true.

When i select tree nodes by checking checkboxes corresponding to them everything works fine and i am able to select as many nodes as required.
But when i try to select the nodes by clicking the Node text radcombobx collapse after selection.
Hence i am not been able to select multiple nodes at a time.

I tried using following workaround on OnClientDropDownClosing event of RadCombobox:

<script type="text/javascript">

function OnClientDropDownClosing(sender, eventArgs)

{

if( sender._focused == true)

{

eventArgs.set_cancel(true);

}

else

{

eventArgs.set_cancel(false);

}

}

</script>

Everything works fine and multiple selection of nodes is possible. But now a new problem arises:
Dropdown even does not close on click of dropdown arrow button.

Any solutions on how both of these functionality can be achieved:
1. Multi selection of nodes
2. Dropdown closing on click of dropdown arrow button or when user clicks outside dropdown.

[Yana]

Hi Amit,

I suggest you wrap the treeview in a div with onclick method like this:

<ItemTemplate>
   <div id="div1" onclick="StopPropagation(event);">
      <telerik:RadTreeView runat="server" ID="RadTreeView1">
      ...
   </div>
</itemTemplate>

and add the following StopPropagation function to your page:

function StopPropagation(e)
{
    if(!e)
    {
        e = window.event;
    }

    e.cancelBubble = true;
}

All the best,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Amit]

In our case , we are attaching source xml of nodes  for the RadTreeView  from Code Behind.



          <ItemTemplate>
              <div id="div1" onclick="StopPropagation(event);" >
                  <telerik:RadTreeView ID="RadTreeViewProduct" Runat="server" CheckBoxes="True"  OnClientNodeChecked="ProductClientNodeChecked" OnClientLoad="onProductLoad" EnableEmbeddedSkins="false" Skin="RadSkin" >
                </telerik:RadTreeView>
              </div>
          </ItemTemplate>

In this way, , if I see the view source of the html rendered, it shows that, there is a div tag with ID div1 . And the whole RadTreeView  is rendered out of this div tag separately.

According to my understanding, purpose of adding div1 is to provide the onclick event for each node item in the RadTreeView.

But my RadTreeView is rendered out of the div tag used in above code. Correct me if I am wrong.


Is there  a way , I can attach onclick event for the default <div> tags( under <Li>) , being rendered by RadTreeView  ? somewhere I can play around in code behind or on the ascx file? may be we could play around with some properties of nodes being attached if possible?

[Casey]

Hi Amit,

I'm not 100% sure, but this sounds like it is happening due to the fact that comboboxes are only designed to handle single item selection. The following link may help to provide a solution to enable multi selection in the combobox when the text of an item is clicked.

http://www.telerik.com/community/code-library/aspnet-ajax/combobox/radcombobox-advanced-multiple-selection.aspx

Hope this helps,
Casey

[Yana]

Hi Amit,

The purpose of OnClick event for the div with ID="div1" is to prevent the combobox dropdown from closing when you click the treeview node. Have you tried it?

Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Amit]

Thanks a lot for your guidance Yana.

I got the source of problem .in my case it was coding error , in createchildcontrols for my sharepoint webpart, I was adding the controls at wrong place. The treeview was being rendered out of the div tag.