Dynamically move/show/hide SearchBox from javascript causes weird display

[Mickael]

I have a SearchBox with a 'none' display style declared in a holding div.

After a javascript event (example click on a button, without postback) I am dynamically creating a new div, and move the SearchBox to it.

I have to do this, because it seems that it is not possible to dynamically create a SearchBox from javascript.

I based the initial hide/show on the post of Brian Azzi.

Everything works fine, but the magnifying glass appears  in on the left of the SearchBox instead of the right side. I attached a screenshot of it.

And that is annoying.

Any solution for that?

I am posting a sample of the xml and javascript I am using.

<div id="telerikHolder">
    <telerik:RadSearchBox
        ID="RdSrchBx"
        runat="server"
        style="display: none;"
        EmptyMessage="Type"
        OnClientSearch="AddSimple"
        OnClientDataRequesting="AddSimple"
        ShowSearchButton="true">
        <DropDownSettings Height="400" Width="550" />
        <WebServiceSettings Path="Main.aspx" Method="GetTypeResults" />
    </telerik:RadSearchBox>
</div>

var el_0_1_1_1 = document.createElement('div');
pParent.appendChild(el_0_1_1_1);
el_0_1_1_1.className = 'popupCellRight';

this._typeSearchBoxInput = $("#RdSrchBx");
this._typeSearchBoxInput.show();
//ClearSearchBox(this._typeSearchBoxInput);

this._typeSearchBox = null;
var telerikHolder = document.getElementById('telerikHolder');
var childDivs = telerikHolder.getElementsByTagName('div');
for (i = 0; i < childDivs.length; i++) {
    var childDiv = childDivs[i];
    if (childDiv.id == "RdSrchBx") {
        this._typeSearchBox = childDiv;
        break;
    }
}
telerikHolder.removeChild(this._typeSearchBox);

el_0_1_1_1.appendChild(this._typeSearchBox);
// this._typeSearchBoxInput = this._typeSearchBoxInput.get_inputElement();

The other problem I have is that this._typeSearchBoxInput does not seem to be a proper Telerik control.

Because when I try to use get_inputElement() on it, I get an undefined exception.

 

 

[Mickael]

I narrowed it down to the 'style="display: none;"'
if I do not have that, then the magnifying glass aligns to the right as expected.
But I need that part to keep the searchbox hidden until I need it.
Any idea on a fix for that ?

[Mickael]

For the second issue with the control not being a proper telerik control, I found that you cannot reference Telerik controls from JavaScript files because aspx does not parse them.

So I made a class to get those references exposed.
I am posting it here for future reference if anyone needs it.

<script  type="text/javascript" language="javascript">
    function TelerikControls() {
        this.__defineGetter__("RdSrchBx_A", function () {
            return $find("<%= RdSrchBx_A.ClientID %>");
        });
    }

    var _telerikControls = new TelerikControls();

    // cALL THIS FROM YOUR EXTERNAL js FILE TO GET THE REFERENCE
    var searchBoxA = _telerikControls.RdSrchBx_A;
</script>

[Ivan Danchev]

Hello Mickael,

At my end the displacement of the magnifying glass icon is can be avoided if the SearchBox' repaint() client-side method is called after moving it. I attached a sample project, which demonstrates this.

Regards,
Ivan Danchev
Telerik

[Mickael]

Works perfectly.

Thanks a lot

[Ivan Danchev]

Hello Mickael,

I am glad it worked out as expected. The repaint() method re-renders the control, thus refreshing its appearance on the client. You can find this and other client-side objects of the RadSearchBox object in the following documentation article.

Regards,
Ivan Danchev
Telerik