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

[أشرف]

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.

[Plamen]

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

[أشرف]

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.

[Plamen]

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

[أشرف]

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.

[Plamen]

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