radTreeView in radComboBox using SqlDataBase

[elie]

           

Hello,
Please, I need help.
I am using treeview inside a combobox, I see the telerik demo about this issue but instead of using static nodes I am using my sql datasource.
The problem is that in the first open dropdown list everything is ok but when I want to open it again it gives me a javascript error in:
function OnClientDropDownOpenedHandler(sender, eventArgs) {
                var tree = sender.get_items().getItem(0).findControl("tvCategories");
                var selectedNode = tree.get_selectedNode(); ******* here******* null reference
                if (selectedNode) {
                    selectedNode.scrollIntoView();
                }
            }
that's mean that he don't have data source, I tried to use attribute Autopostback=true to go by ajax using also radajaxmanager to the server and get my data source but it didn't work anyway this is my code and I appreciate.

 

   function nodeClicking(sender, args) {
                var comboBox = $find("<%= cboAddRoot.ClientID %>");

                var node = args.get_node()

                comboBox.set_text(node.get_text());

                comboBox.trackChanges();
                comboBox.get_items().getItem(0).set_text(node.get_text());
                comboBox.commitChanges();

                comboBox.hideDropDown();

                // Call comboBox.attachDropDown if:
                // 1) The RadComboBox is inside an AJAX panel.
                // 2) The RadTreeView has a server-side event handler for the NodeClick event, i.e. it initiates a postback when clicking on a Node.
                // Otherwise the AJAX postback becomes a normal postback regardless of the outer AJAX panel.

                //comboBox.attachDropDown();
            }
            function OnClientDropDownOpenedHandler(sender, eventArgs) {
                var tree = sender.get_items().getItem(0).findControl("tvCategories");
                var selectedNode = tree.get_selectedNode();
                if (selectedNode) {
                    selectedNode.scrollIntoView();
                }
            }
            function StopPropagation(e) {
                if (!e) {
                    e = window.event;
                }

                e.cancelBubble = true;
            }

 

 

<tr>
                            <td>
                                Add Root Category:
                            </td>
                            <td>
                                 <telerik:RadComboBox ID="cboAddRoot" runat="server" Width="250px" AutoPostBack="true"
                                    ShowToggleImage="True" Style="vertical-align: middle;" OnClientDropDownOpened="OnClientDropDownOpenedHandler"
                                    EmptyMessage="Choose a Category" ExpandAnimation-Type="None" CollapseAnimation-Type="None">
                                    <ItemTemplate>
                                        <div id="div1">
                                            <telerik:RadTreeView runat="server" ID="tvCategories" DataFieldID="ID" DataSourceID="SqlDataSource1"
                                                DataFieldParentID="ParentID" DataTextField="Name"
                                                DataValueField="ID"
                                             OnClientNodeClicking="nodeClicking" Width="100%" Height="140px">
                                            </telerik:RadTreeView>
                                        </div>
                                     </ItemTemplate>
                                      <Items>
                                            <telerik:RadComboBoxItem Text="" />
                                      </Items>
                                    </telerik:RadComboBox>
                                    <script type="text/javascript">
                                        var div1 = document.getElementById("div1");
                                        div1.onclick = StopPropagation;
                                    </script>

                            </td>
                        </tr>

 

<asp:SqlDataSource ID="SqlDataSource1" runat="server" EnableViewState="true" ConnectionString="<%$ ConnectionStrings:ERPCS %>"
        SelectCommand="SELECT * FROM [ProductCategories]"></asp:SqlDataSource>

                                  OnClientNodeClicking="nodeClicking" Width="100%" Height="140px">
                                            </telerik:RadTreeView>
                                        </div>
                                     </ItemTemplate>
                                      <Items>
                                            <telerik:RadComboBoxItem Text="" />
                                      </Items>
                                    </telerik:RadComboBox>
                                    <script type="text/javascript">
                                        var div1 = document.getElementById("div1");
                                        div1.onclick = StopPropagation;
                                    </script>

                            </td>
                        </tr>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" EnableViewState="true" ConnectionString="<%$ ConnectionStrings:ERPCS %>"
        SelectCommand="SELECT * FROM [ProductCategories]"></asp:SqlDataSource>

[Dimitar Terziev]

Hello Elie,

I've prepared a small example showing how to use RadTreeView which is bound to a SQL datasource in RadComboBox. I hope this will help.

Kind regards,
Dimitar Terziev
the Telerik team