Cascading combo box selection

[Alan]

Hi,

I have two comboboxes. I need to expand the second only if I select a particular value in the first.

Thanks

[Shinu]

Hi Alan,

Here is the code snippet that I tried to achieve your scenario.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanging="LoadCustomerID" OnItemsRequested="RadComboBox1_ItemsRequested" >
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox2" runat="server" OnClientItemsRequested="ItemsLoaded" OnItemsRequested="RadComboBox2_ItemsRequested" >
</telerik:RadComboBox>

JS:

<script type="text/javascript">
    var countriesCombo;
    var citiesCombo;
    function pageLoad() {
     countriesCombo = $find("<%= RadComboBox2.ClientID %>");
    }
    function LoadCustomerID(sender, eventArgs) {
        var item = eventArgs.get_item();
        countriesCombo.set_text("Loading...");
        if (item.get_index() > 0) {
            countriesCombo.requestItems(item.get_value(), false);
        }
        else {
            countriesCombo.set_text(" ");
            countriesCombo.clearItems();
        }
    }
    function ItemsLoaded(sender, eventArgs) {
        debugger;
        if (sender.get_items().get_count() > 0) {
            sender.set_text(sender.get_items().getItem(0).get_text());
            sender.get_items().getItem(0).highlight();
        }
        sender.showDropDown();
    }
</script>

C#:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
            LoadCustomerID();
        else if (!Page.IsCallback)
        {
            LoadOrderID(RadComboBox1.SelectedValue);
        }
    }
protected void RadComboBox1_ItemsRequested(object sender, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)
    {
        LoadCustomerID();
    }
protected void LoadCustomerID()
    {
        String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
        SqlConnection conn = new SqlConnection(ConnString);
        SqlDataAdapter adapter = new SqlDataAdapter();
        adapter.SelectCommand = new SqlCommand("SELECT * FROM Customers ORDER By CompanyName", conn);
        DataTable dt = new DataTable();
        adapter.Fill(dt);
        RadComboBox1.DataTextField = "CustomerID";
        RadComboBox1.DataValueField = "CustomerID";
        RadComboBox1.DataSource = dt;
        RadComboBox1.DataBind();
        RadComboBox1.Items.Insert(0, new RadComboBoxItem("- Select.... -"));
    }
protected void RadComboBox2_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
    {
        LoadOrderID(e.Text);
    }
protected void LoadOrderID(string continentID)
    {
        String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
        SqlConnection conn = new SqlConnection(ConnString);
        SqlDataAdapter adapter = new SqlDataAdapter();
        adapter.SelectCommand = new SqlCommand("SELECT * FROM Orders WHERE CustomerID=@CustomerID ORDER By CustomerID", conn);
        adapter.SelectCommand.Parameters.AddWithValue("@CustomerID", continentID);
        DataTable dt = new DataTable();
        adapter.Fill(dt);
        RadComboBox2.DataTextField = "OrderID";
        RadComboBox2.DataValueField = "OrderID";
        RadComboBox2.DataSource = dt;
        RadComboBox2.DataBind();
    }

Please take a look into this demo for more information.

Hope this helps.

Thanks,
Shinu.