Introduction
The Part3 of the series on Mobile Web Development deals with the SelectionList control that offers you variety of choices of selecting an item or items from a list and act accordingly.
SelectionList Control
The SelectionList control provides the UI selection capability for a list control. Although they are both lists, a SelectionList control differs in capabilities and scope from a List control.
Features of SelectionList
An item selected from a SelectionList control does not generate a server event. You need to add a Command Control for submitting the form to the server.
SelectionList control allows multiple items to be selected.
SelectionList control manages only small lists and does not offer pagination.
SelectionList control supports different types with the SelectType attribute values: SelectType=DropDown|ListBox|Radio|MultiSelectListBox|CheckBox
The following controls can contain one or more SelectionList controls.
System.Web.UI.MobileControls.Form
System.Web.UI.MobileControls.Panel
The SelectionList control can contain one or more of the following control.
System.Web.UI.MobileControls.Item
Device Templates
The SelectionList control does not support device templates.
Example3
The following example shows how to create a selection list for hardware peripherals. When the user chooses a device, a second page displays the device name and its price.
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage"
Language="c#" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script language="c#" runat="server">
public void PriceHandler(Object source, EventArgs e)
{
String selectedHardware = HardwareDevices.Selection.Value;
Price.Text = HardwareDevices.Selection.Text
+ " at " + selectedHardware;
ActiveForm = PricePage;
}
</script>
<mobile:Form runat="server">
<mobile:Label>For pricing, select a component:</mobile:Label><br><br>
<mobile:SelectionList id=" HardwareDevices " runat="server">
<item Text="Printer" Value="Rs 5000.00"/>
<item Text="CDR Drive" Value="Rs 600.00"/>
<item Text="Modem" Value="Rs 1000.00"/>
<item Text="Speakers" Value="Rs 800.00"/><br>
</mobile:SelectionList>
<mobile:Command runat="server" OnClick="PriceHandler">
Get the price!</mobile:Command>
</mobile:Form>
<mobile:Form runat="server" id="PricePage">
<mobile:Label runat="server" id="PriceMessage" />
Hardware Device Price Request</mobile:Label><br>
<mobile:Label runat="server" id="Price" />
</mobile:Form>
Example4
In this example, the DataSource property of the SelectionList class is an array called channels that is created and filled during the initial page load. You can set the SelectType property in the code and display the selection through two alternate means during postbacks
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage"
Language="c#" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script language="c#" runat="server">
public void Page_Load(Object sender, EventArgs e)
{
if (!IsPostBack)
{
Label1.Text = "Select a channel:";
// Create and fill an array list.
ArrayList channels = new ArrayList();
channels.Add("HBO");
channels.Add("Star");
channels.Add("ESPN");
// Bind the array to the list.
SelectionList1.DataSource = channels;
SelectionList1.DataBind();
// Set the SelectType property.
SelectionList1.SelectType =
System.Web.UI.MobileControls.ListSelectType.Radio;
}
}
public void Button_Click(Object sender, EventArgs e)
{
if (SelectionList1.SelectedIndex > -1)
{
// To show the selection, get the Selection property.
Label1.Text = "You have selected " +
SelectionList1.Selection.Text;
// This is an alternate means of showing the selection
// using the MobileListItemCollection object.
Label2.Text = "You have selected " +
SelectionList1.Items[SelectionList1.SelectedIndex].Text;
}
else
{
Label1.Text = "No channels selected";
}
}
</script>
<mobile:Form id="Form1" runat="server">
<mobile:Label id="Label1" runat="server" Text="Show a list." />
<mobile:Label runat="server" id="Label2" />
<mobile:SelectionList runat="server" id="SelectionList1" />
<mobile:Command OnClick="Button_Click" Text="Ok" runat="server"/>
</mobile:Form>
Both the List and SelectionList controls allow you to list items from a data source and provides the following properties:
DataMember="dataMember"
DataTextField="DataTextField"
DataValueField="DataValueField"
OnItemDataBind="itemDataBindHandler"
Example5
The following example shows a SelectionList control bound to a dataset that has rows from the Authors table. On selecting an item (AuthorId), user pushes the command button to display his name in a label control.
private void Form1_Load(object sender, System.EventArgs e)
{
if (Page.IsPostBack == false)
{
oleDbDataAdapter1.Fill (dataSet21);
SelectionList1.DataSource = dataSet21;
SelectionList1.DataBind();
}
}
private void Command1_Click(object sender, System.EventArgs e)
{
Label1.Text = "Name of the selected Author is: " + SelectionList1.Items[SelectionList1.SelectedIndex].Value.ToString();
}
<mobile:Form id="Form1" runat="server">
<mobile:SelectionList id=SelectionList1 runat="server" DataSource="<%# dataSet21 %>" DataMember="Authors" DataValueField="Author" DataTextField="Au_ID">
</mobile:SelectionList>
<mobile:Command id="Command1" runat="server">Get Author Name</mobile:Command>
<mobile:Label id="Label1" runat="server"></mobile:Label>
</mobile:Form>
Summary
This part covers the most common uses of SelectionList control. The next part of the article would discuss about the the ObjectList control, a highly sophisticated control in the mobile list controls.
|
No responses found. Be the first to respond and make money from revenue sharing program.
|