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

  • Companies undertaking an IT project need to find the right balance between cost and functionality. It's important to start by determining whether to build a solution from scratch, buy an out-of-the-box solution, or a combination of both. In reality, most projects will require some system tailoring to meet business requirements. Decision-makers must understand how much software development is enough and craft a detailed implementation plan to ensure the project's success. This white paper examines the different …

  • Today's agile organizations pose operations teams with a tremendous challenge: to deploy new releases to production immediately after development and testing is completed. To ensure that applications are deployed successfully, an automatic and transparent process is required. We refer to this process as Zero Touch Deployment™. This white paper reviews two approaches to Zero Touch Deployment--a script-based solution and a release automation platform. The article discusses how each can solve the key …

Most Popular Programming Stories

More for Developers

RSS Feeds

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