Cascading RadComboBoxes with Checkbox Selection

RELATED TO:

ComboBox

AUTHOR: Patrick McDonough

DATE POSTED: August 15, 2018

HOW TO

What is the recommended approach for implementing cascading RadComboBoxes with checkbox selection?

DESCRIPTION

Along with using a RadAjaxManager, an application can include cascading RadComboBoxes as shown in the RadComboBox Cascading ComboBoxes live demo. Additionally, the component offers selection with checkboxes. Combining the implementations can be achieved, and in return, allow the user to select multiple values to determine what dataitems are available in the related RadComboBox.

SOLUTION

Binding Upon CheckBox Selection
By using the SelectedIndexChanged event, determine the checked items of the primary RadComboBox, and query the data for the secondary RadComboBox. For example, here are two RadComboBoxes which use checkboxes and will be cascaded:

<table>

<tr>

<td>

<telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true"

DataValueField="DepartmentID" DataTextField="DepartmentName" EmptyMessage="Select A Department"

CheckBoxes="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">

</telerik:RadComboBox>

</td>

<td>

<telerik:RadComboBox ID="RadComboBox2" runat="server" AutoPostBack="true"

DataValueField="ItemID" DataTextField="ItemName" CheckBoxes="true">

</telerik:RadComboBox>

</td>

</tr>

</table>

protected void RadComboBox1_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

var combo = sender as RadComboBox;

var checkedItems = combo.CheckedItems;

RadComboBox2.DataSource = GetItems(checkedItems);

RadComboBox2.DataBind();

}

1. When a user checks items in RadComboBox1 and closes the dropdown, the selectedIndexChanged event will fire.
2. During this event, reference the RadComboBox and its checkeditems.
3. Set the datasource of the second RadComboBox, and use DataBind().

Ajaxify the RadComboBoxes
To ensure postback does not disrupt performance every time you select a checkbox, use Ajax like in this live demo. Using the same RadComboBoxes from above, here's the implementation with the RadAjaxManager:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadComboBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadComboBox2" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

More Resources

Forums

Find answers to thousands of questions or reach out to our active community.
Demos

Browse 1,200+ demos with source code covering basic and advanced scenarios.
Sample Applications

Learn how to integrate the controls in real-world examples.
Feedback Portal

Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.
User Voice

Get answers directly from the people who build the product.
Documentation

Benefit from detailed help articles and API references for all controls.
Knowledge Base

Learn how to achieve common scenarios from a multitude of tutorials and working examples.
Code Library

Browse sample projects submitted by Telerik staff and community members.
Blog

Stay up-to-date with the latest functionality, how-to articles and industry trends.
Release History

Up-to-date release notes for all new features and improvements.