Cannot select the node of treeview in radcombobox

[NT]

My scenario is as follow: I want a treeview in radcombobox which is put inside a detailsview (all of them are bound with sqldatasource). I have done as some of examples here. 

Everything is displayed in a right way, except the problem that I cannot select each node of the treeview. When I click to select, it select the whole tree as one node (hightlight the whole tree when mouse is over). And when I click, all values of nodes are put in the textbox of the radcombobox.

I think maybe Javascript cannot find the node when the combobox is put inside the detailsview. So can I do it in this case, and how to change?

Thanks.

[Rosi]

Hello NT,

I suggest you wrap the treeview with a div as shown here and execute the following javascript when the div is clicked:

   <script type="text/javascript">
               function StopPropagation(e)
                {
                    e.cancelBubble = true;
                    if (e.stopPropagation)
                    {
                        e.stopPropagation();
                    }
                }
            </script>

Regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[NT]

Hi Rosi,

Thanks for your reply.

I already tried the scenario http://demos.telerik.com/aspnet/prometheus/TreeView/Examples/Functionality/TreeViewComboBox/DefaultCS.aspx that you recommend.

with the script as follow:

<

script type="text/javascript"> 
function nodeClicking(sender, args)  

 

{

var comboBox = $find('rcbAddMenuParent')

 

 

var node = args.get_node()   

comboBox.set_text(node.get_text());

comboBox.hideDropDown();

} 

 

function StopPropagation(e)

 {

e.cancelBubble =

true;  

 

 

 

if (e.stopPropagation)

{

e.stopPropagation();

}

}

 

</script>

And now I have replaced the script with function StopPropagation(e) in  your recommendation, but with no luck.

The problem is:  It cannot realize individual node, but collects all nodes as one node.
For example: I have 5 items in the treeview,  so it collect all these items as one node, and there are five groups like that displaying in the dropdownlist.


Here is the code:

 

 

<

script type="text/javascript">   

 

 

function nodeClicking(sender, args)  

{ 

 

var comboBox = $find('rcbAddMenuParent')

 

var node = args.get_node()  

 

 

comboBox.set_text(node.get_text()); 

comboBox.hideDropDown();

} 

 

function StopPropagation(e)

{

e.cancelBubble =

true;

 

 

 

if (e.stopPropagation)

 

 

 {

e.stopPropagation();

}

}

 

</script> 

 

 

 <

asp:DetailsView ID="dvAddMenu" runat="server" AutoGenerateRows="False" CellPadding="4" DataKeyNames="Menu" DataSourceID="SqlDataSourceAddMenu" DefaultMode="Insert" 

 

 

 

 

ForeColor="#333333" HeaderText="THÊM MỚI CHUYÊN MỤC. " 

 

 

 

Style="position: relative" Width="640px" AllowPaging="True"> 

 

 

 

<PagerSettings Mode="NextPreviousFirstLast" /> 

 

 

 

<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 

 

 

 

<CommandRowStyle BackColor="#E2DED6" Font-Bold="True" /> 

 

 

 

<EditRowStyle BackColor="#999999" /> 

 

 

 

<RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> 

 

 

 

<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> 

 

 

 

<Fields>

 

 

 

......
.....

 

<

 

telerik:RadComboBox ID="rcbAddMenuParent" runat="server" AllowCustomText="True" DataSourceID="SqlDataSourceAddMenu" DataTextField="cMenuTitle" ShowToggleImage="true" DataValueField="Menu" EnableTextSelection="True" Font-Names="Arial" Font-Size="X-Small" HighlightTemplatedItems="True" 

 

 

 

LoadingMessage="Đang tải dữ liệu..." OffsetY="5" SelectedValue='<%# Bind("cMenuParent") %>' 

 

 

 

Skin="Default2006" Sort="Ascending" Style="position: relative; top: 0px; left: 0px;" 

 

 

 

Width="500px" Height="300px"> 

 

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />
<ItemTemplate> 

 

 

 

<div id="div1">
<telerik:RadTreeView ID="rtvAddMenuParent" runat="server" DataFieldID="Menu" DataFieldParentID="cMenuParent" DatasourceID="SqlDataSourceAddMenu" DataTextField="cMenuTitle" OnClientNodeClicking="nodeClicking" 

 

 

 

Style="position: relative" Width="400px"> 

 

 

 

<CollapseAnimation Duration="100" Type="OutQuint" /> 

 

 

 

<ExpandAnimation Duration="100" /> 

 

 

 

</telerik:RadTreeView> 

 

 

 

</div> 

 

 

 

</ItemTemplate> 

 

 

 

</telerik:RadComboBox>

 

 

 

...
...

 

</

 

Fields> 

 

 

 

<FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" /> 

 

 

 

<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> 

 

 

 

<AlternatingRowStyle BackColor="White" ForeColor="#284775" />

 

</

 

asp:DetailsView>

 

 

 

 

 

<

 

script type="text/javascript"> 

 

 

 

var div1 = document.getElementById("div1");

 

div1.onclick = StopPropagation;

 

</

script>

 

 

 

 

 

 

[Rosi]

Hello NT,

Please find attached a sample project based on your code which works as expected.


Kind regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[NT]

Great, that is what I am looking for.

Thank you very much. Your support is highly appreciated.

Best Regards.