Donate

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

Comments

Donate

Popular Posts From This Blog

WPF CRUD Application Using DataGrid, MVVM Pattern, Entity Framework, And C#.NET

How To Insert Or Add Emojis In Microsoft Teams Status Message

TypeScript Error Or Bug: The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program.