Source view of LISTBOX.ASPX
DotNet Funda: Code Viewer
listbox.aspx | listbox.aspx.cs
Close Window  
<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
    <asp:Label ID="lblError" runat="Server" SkinID="errorLabel"></asp:Label>
    <table width="100%" cellpadding="2" cellspacing="0">
        <tr valign="top" class="ArticleTitle">
            <td style="padding-left:10px;" valign="middle">
                asp:ListBox control</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                ListBox control is used to give a single or multiple select options to the user from multiple listed items.
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
    <div class="ArticleContents">
        All properties and its working resembles DropDownList box. However, ListBox has two extra properties called <span class="DemoCP">Rows</span> and <span class="DemoCP">SelectionMode</span>.
        ListBox control is used to give a single or multiple select option to the user (based on the property set) from multiple listed items. 
        You can specify its height and width in pixel by setting its height and width but you will not be able give mutliple select option to the user.
        When it is rendered on the page, it is implemented through &lt;select/&gt; HTML tag. It is also called as Combo box.
        <p>
        Its properties like <span class="DemoCP">BackColor, ForeColor etc. </span> are implemented through style properites of &lt;span&gt;. 
        It has less property to decorate in comparison with other controls. There is no property like <span class="DemoCP">BorderStyle, BorderWidth.</span> in DropDownList control.
        </p>
        <p>
            You can add its option items by directly writing into .aspx page directly or dynamically add at run time or bind through database.
        </p>
        
        Following are some important properties that are very useful.
        <table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
            <tr>
                <td class="DemoCP">Rows</td>
                <td>
                    No. of rows (items) can be set to display in the List.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">SelectionMode</td>
                <td>
                    Single or Multiple. If multiple, it allows user to select multiple items from the list by holding Ctrl or Shift key.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">SelectedValue</td>
                <td>
                    Get the value of the Selected item from the dropdown box.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">SelectedIndex</td>
                <td>
                    Gets or Sets the index of the selected item in the dropdown box.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">SelectedItem</td>
                <td>
                    Gets the selected item from the list.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">Items</td>
                <td>
                    Gets the collection of items from the dropdown box.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">DataTextField</td>
                <td>
                    Name of the data source field to supply the text of the items. (No need to set when you are adding items directly into .aspx page.)
                </td>
            </tr>
            <tr>
                <td class="DemoCP">DataValueField</td>
                <td>
                    Name of the data source field to supply the value of the items. (No need to set when you are adding items directly into .aspx page.)
                </td>
            </tr>
            <tr>
                <td class="DemoCP">DataSourceID</td>
                <td>
                    ID of the datasource component to provide data. (Only used when you have any DataSource component on the page, like SqlDataSource, AccessDataSource etc.)
                </td>
            </tr>
            <tr>
                <td class="DemoCP">DataSource</td>
                <td>
                    The datasource that populates the items in the listbox box. (Generally used when you are dynamically generating the items from Database.)
                </td>
            </tr>
            <tr>
                <td class="DemoCP">AutoPostBack</td>
                <td>
                    true or false. If true, the form is automatically posted back to the server when user changes the dropdown list selection. It will also fire <span class="DemoCP">OnSelectedIndexChanged</span> method.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">AppendDataBoundItems</td>
                <td>
                    true or false. If true, the statically added item (added from .aspx page) is maintained when adding items dynamically (from code behind file) or items are cleared.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">OnSelectedIndexChanged</td>
                <td>
                    Method name that fires when user changes the selection of the dropdown box. (Fires only when AutoPostBack=true.)
                </td>
            </tr>
        </table>
        <!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle">
                    DEMO : DropDownList
                </td>
                <td align="right" colspan="2">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/listbox.aspx" target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr>
                <td>
                    Staically added items (from .aspx page)
                </td>
                <td>
                    Added manually through code
                </td>
                <td>
                    Added through databound (dynamically)
                </td>
             </tr>
             <tr valign="Top">
                <td>
                    1st DropDown box:  <asp:ListBox ID="dropStatic" runat="server">
                        <asp:ListItem Text="Red" Value="red"></asp:ListItem>
                        <asp:ListItem Text="Blue" Value="blue"></asp:ListItem>
                        <asp:ListItem Text="Green" Value="green"></asp:ListItem>
                    </asp:ListBox>
                </td>
                <td>
                    2nd DropDown box <asp:ListBox ID="dropRuntime" runat="Server" />
                </td>
                <td>
                    3rd DropDown box <asp:ListBox ID="dropDataBound" runat="server" DataTextField="Name" DataValueField="ID" Rows="8" SelectionMode="multiple" />
                    (Multiple selction is possible, hold Ctrl or Shift key and click items.)
                </td>
            </tr>
            <tr valign="Top">
                <td colspan="2">This DropDown will fire OnSelectedIndexChanged event when you select other item.<br />
                4th DropDown box <asp:ListBox ID="dropDataBoundFire" runat="server" DataTextField="Name" DataValueField="ID" OnSelectedIndexChanged="GivePostBackResult" AutoPostBack="True" />
                </td>
                <td>
                    <asp:Label ID="lblLabel" runat="Server" EnableViewState="False">Note: When dropdown box item changes, Values of dropdowns will appear here in the selected color of 1st dropdown box.</asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <pre>
                        // 1st DropDown box
                        &lt;asp:ListBox ID="ListBox1" runat="server"&gt;
                            &lt;asp:ListItem Text="Red" Value="red"&gt;&lt;/asp:ListItem&gt;
                            &lt;asp:ListItem Text="Blue" Value="blue"&gt;&lt;/asp:ListItem&gt;
                            &lt;asp:ListItem Text="Green" Value="green"&gt;&lt;/asp:ListItem&gt;
                        &lt;/asp:ListBox&gt;
                        
                        // 2nd DropDown box 
                        &lt;asp:ListBox ID="ListBox1" runat="Server" /&gt;
                        
                        // 3rd DropDown box 
                        &lt;asp:ListBox ID="ListBox2" runat="server" DataTextField="Name" DataValueField="ID" Rows="8" SelectionMode="multiple" /&gt;
                        
                        // 4th DropDown box 
                        &lt;asp:ListBox ID="ListBox3" runat="server" DataTextField="Name" DataValueField="ID" OnSelectedIndexChanged="GivePostBackResult" AutoPostBack="True" /&gt;
                        
                    </pre>
                </td>
            </tr>
        </table>
        <!-- END - Demo Section -->
        </div>
    <br />
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>

Go Top