autocomplete hidden at page load does not work when made visible

[Jeremy]

I have an autocompletebox in a div with display:none set. If I change the display on the div to make the autocompletebox visible it does not work. However if when the page loads the div is not hidden it works perfectly.

[Kalina]

Hi Jeremy,

We are aware of this issue and have already started researching it.
I will update this thread once we find a solution.

Regards,
Kalina
the Telerik team

[Jeremy]

Any word on whether this will be fixed in the next release?

[Kalina]

Hello Jeremy,

We managed to find what causes the issue, currently we research for a possible fix.
Meanwhile - can you provide us some working code that illustrates your implementation?
How exactly you show/hide the RadAutoCompleteBox?
We can try to provide a workaround for your particular scenario.

All the best,
Kalina
the Telerik team

[Matthew Botting]

I am also experiencing this issue and would like an update as to whether it something that is likely to be addressed in a release sometime in the near future or if I should find a workaround to the issue.

My implementation is as follows, the autocomplete is starting out in a hidden div as per below

<div style="display: none">

<telerik:RadAutoCompleteBox runat="server" ID="autocomplete">

</telerik:RadAutoCompleteBox>

</div>

Then using jQuery I am picking it up and re-using it across a repeater so that I only need the overhead of having 1 autocompletebox on the page. Whilst I understand you probably don't support this type of thing with your controls I have quite successfully applied to same approach to comboboxes. Also If I se the div around the completebox to be initially visible this works a treat. Note that I have additional code that clears the completebox, loads the initial values into it then extracts them when done.

var picker = $find($telerik.$("div[id$=_autocomplete]").attr("id"));

var $picker = $telerik.$(picker.get_inputElement()).parents("div.RadAutoCompleteBox:first");
$telerik.$("#anotherdiv").append($picker);

[Matthew Botting]

I have implemented the following workaround for the time being.

The div now has an id set against it and is initially visible

 

<div id="hiddenDiv">
<telerik:RadAutoCompleteBox runat="server" ID="autocomplete">
</telerik:RadAutoCompleteBox>
</div>

Then in page load codebehind

 

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "init", "setTimeout(""var hdnDiv = $get('hiddenDiv');if(hdnDiv) hdnDiv.style.display = 'none';"",100);", True)

[Kalina]

Hello Matthew Botting,

Thank you for posting your solution here.
What is the version of RadControls for ASP.NET AJAX that you use?
Indeed, there was an issue when RadAutoCompleteBox is initially invisible, that has been already fixed.

Greetings,
Kalina
the Telerik team

[Matthew Botting]

Thanks Kalina,
I am currently using 2012.3.1205.40 which I believe to be the latest release.
If you are referring to the latest internal build I will wait for the released version.

Regards,
Matt

[Kalina]

Hello Matthew Botting,

Our latest Service Pack Release - Q3 2012 SP2 (version 2012.3.1308)
of RadControls for ASP.NET AJAX is live and available for download.

Regards,
Kalina
the Telerik team

[Matthew Botting]

Thanks again Kalina,
I have just downloaded the service pack and the Autocompletebox now works initially when set to display: none without having to use a setTimeout script.

Regards,
Matt