We take pride in your success. We let our positivity drive us, day in and out. Talk to us at Mindfire to know us more.

Software Technology Tips

The ListBox and DropDownList both are very useful for their own advantages. Their differences lie in their User Interfaces, DropDownList take less space but need more clicks to access while ListBox takes more space but provides everything itself on the page.

You can easily change the UI of a ListBox to DropdownList and vice versa. It may be useful to save the page height. It can be done in two ways.

Suppose the following code represents your ListBox & DropdownList

---------------------------------------------------------------

<asp:ListBox ID="ListBox1" runat="server" Rows="3">
< asp:ListItem>Option 1</asp:ListItem>
< asp:ListItem>Option 2</asp:ListItem>
< asp:ListItem>Option 3</asp:ListItem>
</ asp:ListBox>

< asp:DropDownList ID="DropDownList1" runat="server">
< asp:ListItem>Option 1</asp:ListItem>
< asp:ListItem>Option 2</asp:ListItem>
< asp:ListItem>Option 3</asp:ListItem>
</ asp:DropDownList>

1. From ServerSide (In c#)

         To change ListBox to DropDownList just change the Rows property of the ListBox with “1” Then it will behave as the Dropdown list in UI.
               → ListBox1.Rows = 1;

For the reverse Add
               → DropDownList1.Attributes.Add("size", "3");

2. In ClientSide (By Javascript)

DropDownList & Listbox Both rendered as select in the browser differentiate in their size property. So to change the UI of DropDownList to ListBox just change this property

<input id="Button1" type="button" value="button" onclick="ToggleView();"/>

<script type="text/javascript">
function ToggleView()

{
     document.getElementById('ListBox1').size = 1; // This will Change from listBox to Dropdown List.
     document.getElementById('DropDownList1').size = 3;// This will Change from Dropdown List to listBox.
}
</ script>

           A small may be useful idea can be: Save the page space by showing the options in a DropDownList & on mousover change it to listbox & again on mouseout do the reverse.
Here is the sample code

<asp:ListBox ID="ListBox1" runat="server" Rows="3" onmouseover="javascript:document.getElementById('ListBox1').size = 3;"
onmouseout ="javascript:document.getElementById('ListBox1').size = 1">
< asp:ListItem>Option 1</asp:ListItem>
< asp:ListItem>Option 2</asp:ListItem>
< asp:ListItem>Option 3</asp:ListItem>
</ asp:ListBox>

Related Tags:
ASP.NET, ListBox,DropDownList,UI

Author: Aditya Acharya

ASP.NET

More Related Tips

Software Technology Tips

ASP.NET

Let us Connect!