Cascading combo box selection

2 posts, 1 answers
  1. Alan
    Alan avatar
    10 posts
    Member since:
    May 2012

    Posted 20 Jun 2012 Link to this post

    Hi,

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

    Thanks
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jun 2012 Link to this post

    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.
Back to Top