Introduction & Demonstration

In Part - 5 article of this series, we have discussed how to use Automatic PostBack with DropDownList control. In this article we will discuss how to work with items collection.

Items Collection

All the list items rendered by a List control are contained in the List control's list item collection. This collection is exposed by the Items property. We can work directly with the list items in this collection. For example, we can add or remove particular list items or we can change the order of the list items.

The page given below contains two ListBox controls and two button controls. When we click the Add button, a list item is moved from the first ListBox to the second ListBox control. When we click Remove, the list item is moved back to the original List control. Let's take a look.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

Protected Sub btnAdd_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim item As ListItem = lstAllProducts.SelectedItem
If Not IsNothing (item) Then
lstAllProducts.Items.Remove(item)
lstFavoriteProducts.ClearSelection()
lstFavoriteProducts.Items.Add(item)
End If
End Sub

Protected Sub btnRemove_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim item As ListItem = lstFavoriteProducts.SelectedItem
If Not IsNothing (item) Then
lstFavoriteProducts.Items.Remove(item)
lstAllProducts.ClearSelection()
lstAllProducts.Items.Add(item)
End If
End Sub

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
For Each item As ListItem In lstFavoriteProducts.Items
lblResults.Text &= "<li>" & item.Text
Next
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
.listPicker
{
border:solid 1px black;
padding:5px;
width:380px;
background-color:blue;
}
.listPicker select
{
width:100%;
}
</style>
<title>List Picker</title>
</head>
<body>
<form id="form1" runat="server">

<div class="listPicker">
<div style="float:left;width:40%">
<asp:ListBox
id="lstAllProducts"
DataSourceID="SqlDataSource1"
DataTextField="Title"
DataValueField="ID"
Runat="server" />
</div>
<div style="float:left;width:20%;text-align:center">
<asp:Button
id="btnAdd"
Text="-->"
ToolTip="Add List Item"
Runat="server" OnClick="btnAdd_Click" />
<br />
<asp:Button
id="btnRemove"
Text="<--"
ToolTip="Remove List Item"
Runat="server" OnClick="btnRemove_Click" />
</div>
<div style="float:left;width:40%">
<asp:ListBox
id="lstFavoriteProducts"
Runat="server" />
</div>
<br style="clear:both" />
</div>

<hr />
<asp:Label
id="lblResults"
EnableViewState="false"
Runat="server" />
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT [ID], [TITLE] FROM [PRO_LIST]"></asp:SqlDataSource>

</form>
</body>
</html>

The first ListBox in above coding is bound to the PRO_LIST database table. We can use the ListBox controls to pick our selected product item by moving product titles from the first ListBox to the second ListBox. When we click the Add button, the btnAdd_Click() method executes. This method grabs the selected item from the All Products ListBox and adds it to the Favorite Products ListBox. The Remove button does exactly the opposite. Notice that both the btnAdd_Click() and btnRemove_Click() methods call the ClearSelection() method of the ListBox class. This method iterates through all the list items and sets the Selected property for each list item to the value False. If multiple list items are selected, an exception is thrown.

Note: This article is end of List Controls now we will discuss on other list type controls.

HAVE A GREAT CODING!