INFO: Different View Modes of the ObjectList Control (311250)

MORE INFORMATION

Views of the ObjectList Control

The ObjectList control supports the following view modes based on the client (HTML or WML device) that views the data:

List View (the default view)
- HTML device: Each label field is displayed as a hyperlink. If the TableFields property is set, this view displays a table with a column for each value that is separated by a semicolon.
- WML device: Each label field is displayed as a hyperlink.
Commands View
- HTML device: This view displays the selected item, each field name and value, and the commands as hyperlinks.
- WML device: This view displays only the commands of each item.
Details View
- HTML device: This view displays the selected item, each field name and value, and the commands as hyperlinks.
- WML device: This view displays the details of the command that is selected.

Code to Change the View Mode of the ObjectList Control

The code in this section demonstrates how to change the view mode of the ObjectList control programmatically.

This code contains two forms, Form1 and Form2. Form1 displays an ObjectList control in which the ViewMode property is set. Form2 displays a list of option buttons that allow you to select the view mode of the ObjectList control. After you select a view mode, you are returned to Form1, which displays the ObjectList control in the view mode that you selected.

NOTE: You must select an item before you change from one view to another.

<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<%@ Page language="c#" Inherits="System.Web.UI.MobileControls.MobilePage" AutoEventWireup="true" %>

<body xmlns:mobile="Mobile Web Form Controls">
    <mobile:Form id=Form1 runat="server" >
		<mobile:ObjectList id=ObjectList1 runat="server">
		</mobile:ObjectList>
    </mobile:Form>
<mobile:Form id=Form2 runat="server" >
<mobile:SelectionList id=SelectionList1 SelectedIndexChanged="View_Changed" runat="server" SelectType=Radio >
	<Item Text="List View"      Value="0" Selected=True></Item>
	<Item Text="Commands View"  Value="1"></Item>
	<Item Text="Details View"   Value="2"></Item>
</mobile:SelectionList>
<mobile:Command id=command1 OnClick=Change_View runat="server" Text="Change View"></mobile:Command>
</mobile:Form>

<script runat=server>
void View_Changed(Object sender, EventArgs e)
{
	ActiveForm = Form1;
}

void Change_View(Object sender, EventArgs e)
{
	switch(SelectionList1.SelectedIndex)
	{
		case 0:
		{
			ObjectList1.ViewMode = ObjectListViewMode.List;
			break;
		}

		case 1:
		{
			ObjectList1.ViewMode = ObjectListViewMode.Commands;
			break;
		}		
		
		case 2:
		{
			ObjectList1.ViewMode = ObjectListViewMode.Details;
			break;
		}		
			
	}

	ActiveForm = Form1;
}

void Page_Load(Object sender, EventArgs e)
{
	ObjectList1.ItemCommand += new ObjectListCommandEventHandler(CommandClicked);
	
	if(!IsPostBack)
	{	
		ObjectList1.DataSource = CreateData();	
		ObjectList1.LabelField = "FirstName";
		ObjectList1.DataMember = "Age";
	
		ObjectListCommand objCommand;

		objCommand = new ObjectListCommand();
		objCommand.Name = "FirstName";
		objCommand.Text = "First Name Details";
		ObjectList1.Commands.Add(objCommand);
	
		objCommand = new ObjectListCommand();
		objCommand.Name = "LastName";
		objCommand.Text = "Last Name Details";
		ObjectList1.Commands.Add(objCommand);

		objCommand = new ObjectListCommand();
		objCommand.Name = "Age";
		objCommand.Text = "Age Details";
		ObjectList1.Commands.Add(objCommand);
	
		ObjectList1.DataBind();	
	}
}

void CommandClicked(Object Sender, ObjectListCommandEventArgs e)
{
	ActiveForm = Form2;
}

public ArrayList CreateData()
{
	ArrayList arr = new ArrayList();
	arr.Add(new DataObject("Mary", "Baker", "53"));
	arr.Add(new DataObject("Juan", "Cao", "33"));
	arr.Add(new DataObject("Karen", "Friske", "32"));		
	arr.Add(new DataObject("Mark", "Lee", "27"));

	return arr;
}

public class DataObject
{
	private String _strFirstName;
	private String _strLastName;
	private String _strAge;

	public DataObject(String strFirstName, String strLastName, String strAge)
	{
		_strFirstName = strFirstName;
		_strLastName = strLastName;
		_strAge = strAge;
	}

	public String FirstName
	{
		get{return _strFirstName;}
	}

	public String LastName
	{
		get{return _strLastName;}
	}

	public String Age
	{
		get{return _strAge;}
	}

}//end class

</script>
</body>

INFO: Different View Modes of the ObjectList Control (311250)

SUMMARY

MORE INFORMATION

Views of the ObjectList Control

Code to Change the View Mode of the ObjectList Control