Description

The anthem:DropDownList control can be populated inside a call back and can also trigger call backs.

In this example, you'll add three anthem:DropDownList controls to the page so that selecting a value in the first will populate the second and selecting a value in the second will populate the third.

Example

Steps

  1. Add a Register directive to the top of your page:

    <%@ Register TagPrefix="anthem" Namespace="Anthem" Assembly="Anthem" %>

  2. Add an anthem:DropDownList control to your page containing three items:

    <anthem:DropDownList id="dropDownList1" runat="server">
	<asp:ListItem Text="" />
	<asp:ListItem>1</asp:ListItem>
	<asp:ListItem>2</asp:ListItem>
	<asp:ListItem>3</asp:ListItem>
</anthem:DropDownList>

  3. Add two more anthem:DropDownList controls to the page without any items:

    <anthem:DropDownList id="dropDownList2" runat="server" />
<anthem:DropDownList id="dropDownList3" runat="server" />

  4. Add AutoCallBack properties to the first two lists and set their values to true:

    <anthem:DropDownList id="dropDownList1" runat="server" AutoCallBack="true">
	<asp:ListItem Value="none" Text="" />
	<asp:ListItem>1</asp:ListItem>
	<asp:ListItem>2</asp:ListItem>
	<asp:ListItem>3</asp:ListItem>
</anthem:DropDownList>
<anthem:DropDownList id="dropDownList2" runat="server" AutoCallBack="true" />

  5. Add SelectedIndexChanged event handlers to the first two lists. They can by double-clicking on the controls in the designer or adding OnSelectedIndexChanged attributes to the anthem:DropDownList tags:

    <anthem:DropDownList id="dropDownList1" runat="server" AutoCallBack="true"
	OnSelectedIndexChanged="dropDownList1_SelectedIndexChanged"
>
	<asp:ListItem Value="none" Text="" />
	<asp:ListItem>1</asp:ListItem>
	<asp:ListItem>2</asp:ListItem>
	<asp:ListItem>3</asp:ListItem>
</anthem:DropDownList>
<anthem:DropDownList id="dropDownList2" runat="server" AutoCallBack="true"
	OnSelectedIndexChanged="dropDownList2_SelectedIndexChanged"
/>

  6. Implement the handlers for these events so that they populate the next list after the list that fired the event:

    <script runat="server">

void dropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
	dropDownList2.Items.Clear();
	dropDownList3.Items.Clear();

	if (dropDownList1.SelectedIndex > 0)
	{
		dropDownList2.Items.Add(dropDownList1.SelectedValue + ".1");
		dropDownList2.Items.Add(dropDownList1.SelectedValue + ".2");
		dropDownList2.Items.Add(dropDownList1.SelectedValue + ".3");
	}
}

void dropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
	dropDownList3.Items.Clear();

	dropDownList3.Items.Add(dropDownList2.SelectedValue + ".1");
	dropDownList3.Items.Add(dropDownList2.SelectedValue + ".2");
	dropDownList3.Items.Add(dropDownList2.SelectedValue + ".3");
}

</script>

Remarks

Please note that the SelectedIndexChanged event is the same event as the "normal" asp:DropDownList control.

The AutoCallBack property is the Anthem equivalent of the AutoPostBack property.