Fill one combobox based on values in two other comboboxes

[Eric Skaggs]

For the life of me, I can't figure this out.  Maybe it has something to do with me not being that great with javascript.  In any case, here's my scenario:

ComboBox3 is dynamically filled client-side based on the selected value in ComboBox2.  That works fine.  Recent design changes now require ComboBox3 to by dynamically filled in the same way, but based on the selected values in both ComboBox1 AND ComboBox2.  I'm basically stuck as I can't figure out how that works on my own.  Please help!

ComboBox1 aspx code

	<telerik:RadComboBox Height="132px"
	ID="ComboBox1"
	Skin="Web20"
	Font-Size="8.3pt"
	Font-Names="Tahoma"
	Runat="server"
	Sort="Ascending"
	OnClientSelectedIndexChanged="LoadComboBox2"
	>
	<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
	</telerik:RadComboBox>

 

ComboBox2 aspx code

	<telerik:RadComboBox Height="132px"
	ID="ComboBox2"
	Runat="server"
	Skin="Web20"
	Font-Size="8.3pt"
	Font-Names="Tahoma"
	EmptyMessage="-Select MSA-"
	Sort="Ascending"
	OnItemsRequested="ComboBox2_ItemsRequested"
	OnClientSelectedIndexChanged="LoadComboBox3"
	>
	<CollapseAnimation Type="OutQuint" Duration="200" />
	</telerik:RadComboBox>

ComboBox3 aspx code

	<telerik:RadComboBox Height="132px"
	ID="ComboBox3"
	Runat="server"
	Skin="Web20"
	Font-Size="8.3pt"
	Font-Names="Tahoma"
	Width="200px"
	EmptyMessage="-Select Building-"
	Sort="Ascending"
	OnItemsRequested="ComboBox3_ItemsRequested"
	>
	<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
	</telerik:RadComboBox>

Javascript functions on aspx page (notice that ComboBox1 is not referenced anywhere here)

	<script language="javascript" type="text/javascript">
	function LoadComboBox2(combo, eventarqs)
	{
	var combo2 = $find("<%=ComboBox2.ClientID %>");
	combo2.set_text("-Select-");
	var combo3 = $find("<%=ComboBox3.ClientID %>");
	combo3.set_text("-Select-");
	var item = eventarqs.get_item();
	if (item.get_index() > 0)
	{
	combo2.requestItems(item.get_value(), false);
	}
	else
	{
	}
	}
	function LoadComboBox3(combo, eventarqs)
	{
	var combo2 = $find("<%=ComboBox2.ClientID %>");
	var combo3 = $find("<%=ComboBox3.ClientID %>");
	combo3.set_text("-Select-");
	var item = eventarqs.get_item();
	if (item.get_index() > 0)
	{
	combo3.requestItems(item.get_value(), false);
	}
	else
	{
	}
	}
	</script>

Related server-side functions

	protected void ComboBox2_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
	{
	string oldSelectedValue = ComboBox2.SelectedValue;
	Database db = DatabaseFactory.CreateDatabase();
	DbCommand command= db.GetStoredProcCommand("StoredProcedure");
	db.AddInParameter(command, "ParamName", DbType.String, e.Text.Trim());
	ComboBox2.DataTextField = "FieldName";
	ComboBox2.DataValueField = "MSA";
	using (DbDataReader reader = (DbDataReader)db.ExecuteReader(command))
	{
	ComboBox2.DataSource = reader;
	ComboBox2.DataBind();
	}
	foreach (RadComboBoxItem item in ComboBox2.Items)
	{
	itemitem.ToolTip = item.Text.Trim();
	}
	ComboBox2.Items.Insert(0, new RadComboBoxItem("-Select-"));
	RadComboBoxItem olditem = ComboBox2.FindItemByValue(oldSelectedValue);
	if (olditem != null)
	{
	olditem.Selected = true;
	}
	}
	protected void ComboBox3_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
	{
	string oldSelectedValue = ComboBox3.SelectedValue;
	Database db = DatabaseFactory.CreateDatabase();
	DbCommand command= db.GetStoredProcCommand("StoredProcedure");
	db.AddInParameter(command, "ParamName", DbType.String, e.Text.Trim());
	ComboBox3.DataTextField = "FieldName";
	ComboBox3.DataValueField = "FieldName";
	using (DbDataReader reader = (DbDataReader)db.ExecuteReader(command))
	{
	ComboBox3.DataSource = reader;
	ComboBox3.DataBind();
	}
	foreach (RadComboBoxItem item in ComboBox3.Items)
	{
	itemitem.ToolTip = item.Text.Trim();
	}
	ComboBox3.Items.Insert(0, new RadComboBoxItem("-Select-"));
	RadComboBoxItem olditem = ComboBox3.FindItemByValue(oldSelectedValue);
	if (olditem != null)
	{
	olditem.Selected = true;
	}
	}

Essentially what I'd like to do is modify ComboBox3_ItemsRequested and just add another parameter to send to the stored procedure.  The parameter would get its value from ComboBox1.  Then I'd have one combobox being filled by receiving two parameters from two other comboboxes.  Does anyone have an example of how to do this?

Thanks,

Eric Skaggs

[Yana]

Hi Eric,

I suggest you use the context object to pass information to the server. It can be done like this:

1. Subscribe to OnClientItemsRequesting event of "ComboBox3";
2. Set the context to the value of ComboBox1 in its handler:

function itemRequesting(sender, args)
{
  var combo1 = $find("<%=ComboBox1.ClientID %>");
  var context = args.get_context();
  context["combo1_value"] = combo1.get_selectedItem().get_value();
}

3. Then you can receive the value of context["combo1_value"] in ComboBox3_ItemsRequested handler:

String combobox1_value = e.Context["combo1_value"].ToString();

I've attached a sample page based on your code for a reference.

Best wishes,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Eric Skaggs]

Worked like a charm!  Thank you very much!