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

Let us Connect!

Awards and Achievements

Red Herringcolor DeloitteFast50 DB ZInnov1   Nascome  DB Stpi

This site uses cookies. We respect your privacy.copyright (c) Mindfire Solutions 2007-2015. Login