Rad Dock and autocomplete

3 posts, 0 answers
  1. Paul
    Paul avatar
    2 posts
    Member since:
    Nov 2007

    Posted 13 Nov 2007 Link to this post

    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. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 13 Nov 2007 Link to this post

    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:
    <%@ 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
  3. Paul
    Paul avatar
    2 posts
    Member since:
    Nov 2007

    Posted 14 Nov 2007 Link to this post

    great stuff, works a treat.
    thanks a lot petio
Back to Top