RadSearchBox bug: Supposes that there's only one form element on the page

6 posts, 1 answers
  1. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 01 Dec 2013 Link to this post

    When I tried using RadSearchBox, I found that the results drop down doesn't appear although the response is received successfully.
    After some debugging, I found that the code appends the drop down element to the first FORM element it finds!
    Here's the code:

    b.DropDown.prototype = {
            initialize: function ()
            {
                a(document.body).find("form").prepend(this._element);
            }

    ASP.Net restricts the existence of more than one FORM with runat=server, but I may have as many FORM elements as I want for other client side uses. Why supposing that there's only one FORM, while BODY should have been used for this, because there can't be more than one BODY.
  2. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 04 Dec 2013 Link to this post

    Hi,

    The issue described is not quite clear- I have researched the code that you shared but it is not from RadSearchBox -would you please elaborate from where is the code that you shared and what is the exact code that will let us reproduce the unusual behavior and be more helpful with a possible solution.

    Regards,
    Plamen
    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
  4. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 05 Dec 2013 Link to this post

    Yes, this code is of the DropDown component which the search box uses (or inherits from, not sure).

    I reproduced the problem in the small website here
    I removed the binaries from the website to minimize the size but the problem occurs in the latest version of Rad Controls.

    Run the site and type the lowercase letter v in the search box. No drop down appears although there are results (view the code of the dummy data source).
    Then, go and comment this line of JavaScript code:
    document.getElementById("container").innerHTML = document.getElementById("template").innerHTML;
    And rerun the site. Now the search box works properly.

    When the problem occurs? It occurs when an invisible (display: none, or visibility: hidden) FORM element is dynamically created and injected into the main ASP.Net FORM (I know that this violates the HTML standard but who cares about this when using ASP.Net Web Forms?!).

    Why I do this weird thing? I have a component that has a hidden FORM element created dynamically by Knockout. My component made the drop down stop appearing because it injected itself into my hidden FORM not the main FORM.
    I wonder why the drop down doesn't use BODY as a container? At least there's a non breakable guarantee that there won't be more than one BODY in a page.
  5. Answer
    Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 10 Dec 2013 Link to this post

    Hello,

    Thank you for sharing the code and explaining the issue.

    Basically the decision for using the Form is mainly influences by the simple fact the RadSearchBox is a form control and should be related with a particular form. 

    In your case you can override the default behavior as in the code below:
    <script type="text/javascript">
               //Put your JavaScript code here.
               var $ = $telerik.$;
               Telerik.Web.UI.DropDown.prototype.initialize = function () {
                   $(document.body).prepend(this._element);
               }
     
           </script>

    Please have i mind that applying this workaround is not a supported and tested scenario with RadSearchBox and could lead to some unusual behavior of the control. 

    Regards,
    Plamen
    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.
  6. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 10 Dec 2013 Link to this post

    I've applied the fix and the search box seems to work properly. Thanks.

    The drop down shouldn't have anything to do with the form, as it's a mere display element. I mean it doesn't have any inputs whose values will be submitted with the form, so it should be appended to the body.

    Even if it's desired to be appended to the main FORM, the ClientID should be used to query for it instead of the tag name.
  7. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 11 Dec 2013 Link to this post

    Hi Ashraf,

    Thank you for sharing your observations and thoughts.

    I have forwarded your suggestions for future consideration when improving the control.

    Regards,
    Plamen
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017