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!

iso 9001 QA25 Red Herring STPI D&B Fastest Growing SME 2013 Award zinnov Nasscom

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