July 1, 2009

Resizable DropDownList

In this example, I will create a resizable DropDownList. The DropDownList control has a width property that is set to a fixed width. Using javascript, I am modifying the width of the DropDownList.

Inside the form tag,

<form id="form1" runat="server">   
    <asp:DropDownList ID="DropDownList1" runat="server" Width="50px">

I am adding a DropDownList with fixed width. Then in the Page_Load method,

protected void Page_Load(object sender, EventArgs e)
        DropDownList1.Attributes.Add("onmouseover", "ddlMouseOver()");
        DropDownList1.Attributes.Add("onmouseout", "ddlMouseOut()");

I am adding 2 attributes "onmouseover" and "onmouseout" javascript functions to the DropDownList.
In the actual javascript, I am changing the width of the control accordingly.

<script type="text/javascript">
    function ddlMouseOver()
        document.getElementById("<%= DropDownList1.ClientID %>").style.width = "200px";
    function ddlMouseOut()
        document.getElementById("<%= DropDownList1.ClientID %>").style.width = "50px";


Reference: Shahed Kazi at AspNetify.com