Radtreeview inside radcombobox can't change combo value clientside

[Sergi]

I'm using a radtreeview inside a combobox, and I'm using the following code for the OnClientNodeClicking event clientside.

The problem is that server side btnSearch_Click event the dropdown always returns the selected value as null.

Any help would be greatly appreciated.

function OnRadTreeViewInComboBoxNodeClicking(sender, args) {
    var dropdownId = $('#' + sender.get_id()).closest('.RadComboBoxDropDown').attr('id').replace('_DropDown', '');
    var comboBox = $find(dropdownId);

    var node = args.get_node()
    comboBox.set_text(node.get_text());

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

    comboBox.hideDropDown();
    comboBox.attachDropDown();

    $('#btnSearch').click();

}

[Princy]

Hi Sergi,

Here is the sample code that I tried to achieve your scenario.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server" Width="250px" >
  <ItemTemplate>
    <div id="div1">
      <telerik:RadTreeView runat="server" ID="radtreeview1" OnClientNodeClicking="NodeClicking" Width="100%" Height="140px">
        <Nodes>
          <telerik:RadTreeNode runat="server" Text="Africa" Expanded="true" Value="1">
            <Nodes>
              <telerik:RadTreeNode runat="server" Text="Egypt" Value="2">
                <Nodes>
                  <telerik:RadTreeNode runat="server" Text="Cairo" Value="3">
                  </telerik:RadTreeNode>
                </Nodes>
              </telerik:RadTreeNode>
              <telerik:RadTreeNode runat="server" Text="South Africa" Value="4">
                <Nodes>
                  <telerik:RadTreeNode runat="server" Text="Cape Town" Value="5">
                  </telerik:RadTreeNode>
                </Nodes>
              </telerik:RadTreeNode>
              <telerik:RadTreeNode runat="server" Text="Kenya" Value="6">
                <Nodes>
                  <telerik:RadTreeNode runat="server" Text="Nairobi" Value="7">
                  </telerik:RadTreeNode>
                </Nodes>
              </telerik:RadTreeNode>
            </Nodes>
          </telerik:RadTreeNode>
       ............
        </Nodes>
      </telerik:RadTreeView>
    </div>
  </ItemTemplate>
  <Items>
    <telerik:RadComboBoxItem Text="" Value="" />
  </Items>
</telerik:RadComboBox>
<asp:Button ID="Submit" runat="server" OnClick="Submit_Click" Text="Submit" />

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.get_items().getItem(0).set_value(node.get_value());
        combobox.commitChanges();
        combobox.hideDropDown();
     }
</script>

C#:

protected void Submit_Click(object sender, EventArgs e)
    {
        Response.Write("Selected value="+RadComboBox1.SelectedValue );
        Response.Write("Selected Text=" + RadComboBox1.SelectedItem.Text);
    }

Please provide your entire code if it doesn't helps.

Thanks,
Princy.

[Sergi]

Thanks, that works but it's not the problem in my scenario.

Let me be clearer, I'm submitting the search button clientside with a jquery call in theNodeClicking event ( see last line in my OnRadTreeViewInComboBoxNodeClicking ):

$('#btnSearch').click();

That's when it doesn't works, when I submit the search client side.
The code enters in the btnSearch_Click event handler server side, but the dropdown value is null.

[Sergi]

I found a workaround, it seems like the radcombobox needs some time to actually store the value, so I ended up calling the search button with a timeout and now it works.

function OnRadTreeViewInComboBoxNodeClicking(sender, args) {
    var dropdownId = $('#' + sender.get_id()).closest('.RadComboBoxDropDown').attr('id').replace('_DropDown', '');
    var comboBox = $find(dropdownId);

    var node = args.get_node()

    debug('OnRadTreeViewInComboBoxNodeClicking ' + node.get_text());

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

    comboBox.hideDropDown();
    comboBox.attachDropDown();

    setTimeout(function () { $('#btnSearch').click() }, 200);
}