Auto Resize Dropdown Box

Auto Resize Dropdown

Sometimes, using a built-in dropdown control does not meet your requirement. Suppose a dropdown box contains text that is longer in length than your box; therefore, the width of the dropdown will increase as the text length increases. But, an increase in the dropdown's size affects your form design. You don't have enough space on your page to fit this lengthy dropdown box. In that case, you can use this Auto Resize Dropdown box.

Create a blank solution; in the solution, add a class library; and in the class file, add the following code. This code shows that, at the time of rendering the control, with the help of a style you can maintain the initial width of your dropdown box.

Note: You must inherit WebControls.DropDownList.
Inherits WebControls.DropDownList
   Protected Overrides Sub Render(ByVal writer As _
      System.Web.UI.HtmlTextWriter)
      writer.Write("<div style='width:" & Me.Width.ToString & "'>")
      MyBase.Render(writer)
      writer.WriteEndTag("div")
End Sub

At the time of initialization, it will call JavaScript functions. These JavaScript functions will attach with onactivate and ondeactivate events.

Private Sub AutoSizeDropDown_Init(ByVal sender As Object, _
   ByVal e As System.EventArgs) Handles Me.Init
   Dim ControlsJS As String
   ControlsJS = "<script type=""text/javascript"" src=""" & 
   HttpRuntime.AppDomainAppVirtualPath & "/js/CustomControls.js""> _
   </script>"
   Me.Attributes.Add("originalWidth", "")
   Me.Attributes.Add("onactivate", "RearrangeDdnWidth(this)")
   Me.Attributes.Add("ondeactivate", "ResetDdnWidth(this)")
   Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), _
      "ControlsJS", ControlsJS)
End Sub

After building the solution, add a new web site in your solution. In the default.aspx page, register your DLL with the page.

<%@ Register Assembly="AutoDropDown"
    Namespace="AutoDropDown" TagPrefix="cc1" %>

After that, you can add the dropdown:

<cc1:AutoSizeDropDown runat="server"
                      ID="AutoSizeDropDown1"
                      Width="50px"></cc1:AutoSizeDropDown>

The complete source code is available with this article.



About the Author

Ashish Singh

I am working as I.T. Analyst at Tata Consultancy Services Ltd. I have 4+ years of experience in Microsoft Technologies. I have worked primarily as a Dot Net Developer with C# and VB.Net as code behind.

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: March 19, 2015 @ 1:00 p.m. ET / 10:00 a.m. PT The 2015 Enterprise Mobile Application Survey asked 250 mobility professionals what their biggest mobile challenges are, how many employees they are equipping with mobile apps, and their methods for driving value with mobility. Join Dan Woods, Editor and CTO of CITO Research, and Alan Murray, SVP of Products at Apperian, as they break down the results of this survey and discuss how enterprises are using mobile application management and private …

  • This report outlines the future look of Forrester's solution for security and risk (S&R) executives working on building an identity and access management strategy for the extended enterprise. We designed this report to help you understand and navigate the major business and IT trends affecting identity and access management (IAM) during the next five years. IAM in 2012 has become a tool not just for security but also for business agility. Competitive challenges push businesses into the cloud and encourage …

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date