ComboBox Drop Down Doesn't Work After InnerHTML Move

2 posts, 0 answers
  1. Carl Sconnely
    Carl Sconnely avatar
    10 posts
    Member since:
    Mar 2010

    Posted 25 Oct 2013 Link to this post

    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>
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 30 Oct 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top