ComboBox Drop Down Doesn't Work After InnerHTML Move

[Carl Sconnely]

I am in the process of creating a responsive site and am attempting to relocate a div that includes a few radcombo boxes, list boxes, text boxes , etc. without a postback.  The other fields work fine including some radlistboxes but the radcombo boxes will no longer open.   I have compared the source text after the combobox is moved and it seems to be identical.  Is this even possible or is there anything I'm missing?  Is there something that could be done with RadAjaxManager? 

Sample:

<div id="searchbox_main">
<div id="searchwrapper">
 <telerik:RadComboBox ID="ddsample" runat="server"
                            Width="90%"
                            MaxHeight="250px"
                            EnableViewState="false"
                            AllowCustomText="false"
                            MarkFirstMatch="true"
                            OnClientFocus="OnClientFocus"
                            EmptyMessage="Pick Radius" OpenDropDownOnLoad="False">
                            <Items>
                                <telerik:RadComboBoxItem Text="Any" />
                                <telerik:RadComboBoxItem Text="1" />
                                <telerik:RadComboBoxItem Text="5" />
                                <telerik:RadComboBoxItem Text="10" />
                                <telerik:RadComboBoxItem Text="15" />
                                <telerik:RadComboBoxItem Text="25" Selected="true" />
                            </Items>
                        </telerik:RadComboBox>
</div>
</div>

<div id="searchbox_side">
</div>

  <script type="text/javascript">
     var col1 = document.getElementById('searchbox_main'),
       col2 = document.getElementById('searchbox_side'),
       swapped = false;

                window.onload = function () {
                    var width = window.innerWidth;
                    if (width < 768 && swapped === false) {
                        swapCols();
                        swapped = true;
                    } else if (width > 768 && swapped === true) {
                        swapCols();
                        swapped = false;
                    }
                }

                window.onresize = function () {
                    var width = window.innerWidth;
                    if (width < 768 && swapped === false) {
                        swapCols();
                        swapped = true;

                    } else if (width > 768 && swapped === true) {
                        swapCols();
                        swapped = false;
                    }
                };

                function swapCols() {
                    var _col1 = col1.innerHTML,
                        _col1id = col1.id,
                        _col2 = col2.innerHTML,
                        _col2id = col2.id;
                    col1.innerHTML = _col2;
                    col1.id = _col2id;
                    col2.innerHTML = _col1;
                    col2.id = _col1id;
                }
   </script>

[Kate]

Hi Carl,

I tested the code that you provided and indeed the dropdown of the RadComboBox does not open once you exchange the places of the HTML elements. Unfortunately, currently such a scenario is not supported by the RadComboBox control. I can suggest, however that you try exchanging the id-s of the elements and apply, for example, different styles related to the different id-s and check how it goes.

Regards,
Kate
Telerik