Thursday, December 30, 2010

Format width of AutocompleteExtender AjaxControlToolkit

By default, the width of the autocomplete list of autocomplete extender is inherited from the target control which is the textbox. However, you can customize the width and appearance of the ajax control:
1. Create an asp.net website
2. Add a webservice to your site
3. In your webservice, add a code to retrieve customer or any info.
4. In your asp.net website, add an aspx markup similar below:
 Note that CompletionListElementID target control is the div called autocomplete declared below the textbox.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
 <Services>  
 <asp:ServiceReference Path="~/YourSampleService.asmx"/>  
 </Services>  
 </asp:ToolkitScriptManager>  
 <div>  
 <table>  
 <tr>  
 <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>  
 <td><div id="AutoComplete" runat="server"> </div></td>  
 </tr>  
 <tr>  
 <td>  
 <asp:AutoCompleteExtender ID="AtNames" runat="server"  
 ServicePath="~/YourSampleService.asmx"  
 ServiceMethod="Your_method" CompletionListElementID="AutoComplete"  
 CompletionSetCount="25" TargetControlID="txtName" >  
 </asp:AutoCompleteExtender>  
 </td>  
 </tr>  
 </table>  
 </div>  
5. Add a custom css for your div

#AutoComplete  
 {  
   width: 250px !important;  
   overflow: visible !important;  
 }  
6. Compile and run your website
Reference: Increase Width of Autcomplete Extender

0 comments:

Post a Comment