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.