TreeView in ComboBox - Select Item Issues

[William]

I followed the demo on the Telerik website for implementing a RadTreeView within a RadComboBox. I have the TreeView displaying in the ComboBox, but when I select an item it doesn't display anything in the box. Attached is an image of what the ComboBox looks like after I select an item. Below is the code:

ASPX

<div class="collapsibleContainer" data-title="Notifications">
      <telerik:RadAjaxLoadingPanel ID="notificationsLoadingPanel" runat="server" Skin="Simple" />
      <telerik:RadTreeList ID="notificationsTree" runat="server" AutoGenerateColumns="false" AllowSorting="false" AllowPaging="false"
        OnNeedDataSource="notifications_needdata" DataKeyNames="ID" ParentDataKeyNames="PID" ShowTreeLines="false" EditMode="PopUp"
         OnPreRender="notifications_PreRender" OnItemDataBound="notificationTree_ItemDataBound" OnItemCommand="notificationTree_ItemCommand">
          <Columns>
              <telerik:TreeListEditCommandColumn ShowEditButton="false" AddRecordText="Add" HeaderStyle-Width="50px" />
              <telerik:TreeListBoundColumn HeaderText="ID" DataField="ID" UniqueName="ID" Visible="false" />
              <telerik:TreeListBoundColumn HeaderText="PID" DataField="PID" UniqueName="PID" Visible="false" />
              <telerik:TreeListBoundColumn HeaderText="Name" DataField="Name" />
              <telerik:TreeListBoundColumn HeaderText="Item" DataField="ItemsID" HeaderStyle-Width="100px" />
              <telerik:TreeListBoundColumn HeaderText="Trigger On Allocate" DataField="TriggerOnAllocate" HeaderStyle-Width="125px"/>
              <telerik:TreeListBoundColumn HeaderText="Category" DataField="Category" />
              <telerik:TreeListBoundColumn HeaderText="Location" DataField="Location" HeaderStyle-Width="125px" />
              <telerik:TreeListEditCommandColumn ShowAddButton="false" HeaderStyle-Width="50px" />
              <telerik:TreeListButtonColumn HeaderStyle-Width="55px" Text="Delete" CommandName="Delete" ButtonType="LinkButton" />
          </Columns>
          <EditFormSettings EditFormType="Template" PopUpSettings-Modal="true" InsertCaption="Add Notification" PopUpSettings-Height="550px" PopUpSettings-Width="730px">
              <FormTemplate>
                  <table>
                      <tr>
                          <asp:Label ID="notificationID" runat="server" Text='<%#Bind("ID") %>' Visible="false" />

                          <td>Name:</td>
                          <td colspan="3"><telerik:RadTextBox ID="editName" runat="server" EmptyMessage="Enter Name" /></td>
                      </tr>
                      <tr>
                          <td>Repeat Interval:</td>
                          <td><telerik:RadTextBox ID="editInterval" runat="server" /></td>
                          <td>Max Repeat:</td>
                          <td><telerik:RadTextBox ID="editRepeat" runat="server" /></td>
                      </tr>
                      <tr>
                          <td>Send On Weekends:</td>
                          <td><asp:CheckBox ID="editWeekends" runat="server" /></td>
                          <td>Send On Holidays:</td>
                          <td><asp:CheckBox ID="editHolidays" runat="server" /></td>
                      </tr>
                      <tr>
                          <td colspan="2">Item:</td>
                          <td colspan="2">Location:</td>
                      </tr>
                      <tr>
                          <td style="vertical-align:top;"><telerik:RadComboBox ID="editItem" runat="server" EmptyMessage="Type a PS#" MarkFirstMatch="true" OnSelectedIndexChanged="editItem_SelectedIndexChanged"/></td>
                          <td>
                          <telerik:RadButton ID="editItemTransfer" runat="server" Text="+" OnClick="editItemTransfer" />
                          <telerik:RadListBox ID="editItemListBox" runat="server" AllowDelete="true" Height="170px" Width="130px" ButtonSettings-Position="Left" />
                          </td>
                          <td style="vertical-align:top;">
                              <telerik:RadComboBox ID="editLocationComboBox" runat="server" OnClientDropDownOpened="OnClientDropDownOpenedHandler" ShowToggleImage="true" Width="230px">
                                  <ItemTemplate>
                                      <div id="div1">
                                          <telerik:RadTreeView ID="editLocationTreeView" runat="server" OnClientNodeClicking="locationNodeClicking" />
                                      </div>
                                  </ItemTemplate>
                                  <Items>
                                      <telerik:RadComboBoxItem Text="" />
                                  </Items>
                              </telerik:RadComboBox>

                              <script type="text/javascript">
                                  var div1 = document.getElementById("div1");
                                  div1.onclick = StopPropagation;
                              </script>
                          </td>
                          <td><telerik:RadListBox ID="editLocationListBox" runat="server" AllowDelete="true" AllowTransfer="true" Height="170px" Width="170px">
                          <ButtonSettings ShowDelete="true" Position="Left" TransferButtons="TransferTo"  />
                          </telerik:RadListBox></td>
                      </tr>
                      <tr>
                          <td colspan="4">Category:</td>
                      </tr>
                      <tr>
                          <td style="vertical-align:top;"><telerik:RadComboBox ID="editCategory" runat="server" EmptyMessage="Type a Category" MarkFirstMatch="true" /></td>
                          <td colspan="3">
                          <telerik:RadButton ID="editCategoryTransfer" runat="server" Text="+" OnClick="editCategoryTransfer" />
                          <telerik:RadListBox ID="editCategoryListBox" runat="server" AllowDelete="true" Height="170px" Width="200px" ButtonSettings-Position="Left" />
                          </td>
                      </tr>
                      <tr>
                          <td colspan="4">
                              <telerik:RadButton ID="editSubmit" runat="server" Text="Submit" CommandName="Add Details" />
                              <telerik:RadButton ID="updateSubmit" runat="server" Text="Update" CommandName="Update" Visible="false" />
                          </td>
                      </tr>
                  </table>
              </FormTemplate>
          </EditFormSettings>

      </telerik:RadTreeList>

JS

<script type="text/javascript">
    function locationNodeClicking(sender, args) {
        var combobox = document.getElementById(editLocationComboBox.InputID);
        alert(combobox);

        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 StopPropagation(e) {
        if (!e) {
            e = window.event;
        }

        e.cancelBubble = true;
    }

    function OnClientDropDownOpenedHandler(sender, eventArgs) {
        // var tree = document.getElementById(editLocationTreeView.InputID);
        var tree = sender.get_items().getItem(0).findControl("editLocationTreeView");
        var selectedNode = tree.get_selectedNode();
        if (selectedNode) {
            selectedNode.scrollIntoView();
        }
    }
      </script>

[Princy]

Hello,

I have tried to reproduce the issue but no avail. Here is the code.
ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server" Width="250px" ShowToggleImage="True">
 <ItemTemplate>
  <telerik:RadTreeView runat="server" ID="RadTreeView1" OnClientNodeClicking="nodeClicking">
  <Nodes>
    <telerik:RadTreeNode runat="server" Text="B">
      <Nodes>
        <telerik:RadTreeNode runat="server" Text="B1">
         <Nodes>
           <telerik:RadTreeNode runat="server" Text="B2">
            </telerik:RadTreeNode>
            <telerik:RadTreeNode runat="server" Text="B3">
            </telerik:RadTreeNode>
         </Nodes>
      </telerik:RadTreeNode>
     </Nodes>
    </telerik:RadTreeNode>
          ... ... ...
  </Nodes>
  </telerik:RadTreeView>
 </ItemTemplate>
 <Items>
  <telerik:RadComboBoxItem Text="" />
 </Items>
</telerik:RadComboBox>

JS:

<script type="text/javascript">
 function nodeClicking(sender, args)
   {
        var comboBox = $find("<%= RadComboBox1.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();
   }
</script>

Thanks,
Princy.

[William]

I think the issue is with the Javascript finding the control. 

If I use this code:
 

var comboBox = $find("<%= editLocationComboBox.ClientID %>");

I get an error that the control can't be found.

If I use this code:

var combobox = document.getElementById(editLocationComboBox.InputID);

I don't get the error, but the control still isn't found. 

How do I find my control using javascript if it's in a table within the Form Template of a RadTreeList?

[Bozhidar]

Hi Wiliam,

Try using the $telerik.findControl. Here's an example of how to use it in your case:

function locationNodeClicking(sender, args) {
    var comboBox = $telerik.findControl(document, "editLocationComboBox");
    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();
}

Greetings,
Bozhidar
the Telerik team

[William]

That did the trick, thanks!