This is a migrated thread and some comments may be shown as answers.

Cascading combo box selection

1 Answer 48 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Alan
Top achievements
Rank 1
Alan asked on 20 Jun 2012, 12:20 PM
Hi,

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

Thanks

1 Answer, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 20 Jun 2012, 12:41 PM
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.
Tags
ComboBox
Asked by
Alan
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Share this question
or