i've recently been converting a site with the older Rad Dock over to the Prometheus Rad Dock and im having a problem with an ajax autocomplete extender appearing correctly. it used to work fine with the old panels but now when the popup selection appears it doesnt hover over the docked panel but tries to extend it instead making the scroll bars appear around the panel. any ideas how to correct this?
2 Answers, 1 is accepted
0
Hello Paul,
All you need to do is to add empty Div to the form:
<div id="CompletionList"></div>
After that you must set AutoCompleteExtender property to :
CompletionListElementID="CompletionList"
For example, take a look at the following code:
Sincerely yours,
Petio Petkov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
All you need to do is to add empty Div to the form:
<div id="CompletionList"></div>
After that you must set AutoCompleteExtender property to :
CompletionListElementID="CompletionList"
For example, take a look at the following code:
| <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| .autocomplete_completionListElement |
| { |
| visibility : hidden; |
| margin : 0px!important; |
| background-color : inherit; |
| color : windowtext; |
| border : 5px solid red; |
| cursor : 'default'; |
| overflow : auto; |
| height : 200px; |
| text-align : left; |
| list-style-type : none; |
| } |
| /* AutoComplete highlighted item */ |
| .autocomplete_highlightedListItem |
| { |
| background-color: #ffff99; |
| color: black; |
| padding: 1px; |
| } |
| /* AutoComplete item */ |
| .autocomplete_listItem |
| { |
| background-color : window; |
| color : red; |
| padding : 1px; |
| } |
| </style> |
| </head> |
| <body style="height:1000px"> |
| <form id="form1" runat="server"> |
| <div> |
| <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" /> |
| <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> |
| <telerik:RadDockZone ID="RadDockZone1" runat="server"> |
| <telerik:RadDock ID="RadDock1" runat="server" > |
| <ContentTemplate> |
| <asp:TextBox runat="server" ID="myTextBox" Width="150px" autocomplete="on" /> |
| <ajaxToolkit:AutoCompleteExtender |
| CompletionListElementID="CompletionList" |
| runat="server" |
| BehaviorID="AutoCompleteEx" |
| ID="autoComplete1" |
| TargetControlID="myTextBox" |
| ServicePath="AutoComplete.asmx" |
| ServiceMethod="GetCompletionList" |
| MinimumPrefixLength="2" |
| CompletionInterval="1000" |
| EnableCaching="true" |
| CompletionSetCount="20" |
| CompletionListCssClass="autocomplete_completionListElement" |
| CompletionListItemCssClass="autocomplete_listItem" |
| CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" |
| DelimiterCharacters=";, :"> |
| </ajaxToolkit:AutoCompleteExtender> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadDockLayout> |
| </div> |
| <div id="CompletionList"></div> |
| </form> |
| </body> |
| </html> |
Sincerely yours,
Petio Petkov
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Paul
Top achievements
Rank 1
Rank 1
answered on 14 Nov 2007, 09:31 AM
great stuff, works a treat.
thanks a lot petio
thanks a lot petio