fill combobox with values of 2 other comboboxes

[Mart]

Hello,

I Have 3 comboboxes.
when selecting a value in combobox 1 it fills the values of combobox 2

now i want to fill the values of combobox 3 based on the selected values of combobox1 and combobox 2

How can I achieve this on clientside

[Shinu]

Hi Mart,

Try the following code to fill value in the RadComboBox.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanging="LoadCustomerID"  EnableCheckAllItemsCheckBox="true" OnItemsRequested="RadComboBox_ItemsRequested">
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox2" runat="server" OnClientItemsRequested="ItemsLoaded" OnClientSelectedIndexChanging="LoadOrderID"  EnableCheckAllItemsCheckBox="true" OnItemsRequested="RadComboBox2_ItemsRequested">
</telerik:RadComboBox>
<telerik:RadComboBox ID="RadComboBox3" runat="server" OnClientItemsRequested="ItemsLoaded"  EnableCheckAllItemsCheckBox="true" OnItemsRequested="RadComboBox3_ItemsRequested">
</telerik:RadComboBox>

C#:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
            LoadCustomerID();
        else if (!Page.IsCallback)
        {
            LoadOrderID(RadComboBox1.SelectedValue);
            LoadProductID(RadComboBox2.SelectedValue);
        }
    }
    protected void RadComboBox_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();
    }
    protected void RadComboBox3_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
    {
        LoadProductID(e.Text);
    }
    protected void LoadProductID(string countryID)
    {
        String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
        SqlConnection conn = new SqlConnection(ConnString);
        SqlDataAdapter adapter = new SqlDataAdapter();
        adapter.SelectCommand = new SqlCommand("SELECT * FROM [Order Details] WHERE OrderID =@OrderID ORDER By ProductID", conn);
        adapter.SelectCommand.Parameters.AddWithValue("@OrderID", countryID);

        DataTable dt = new DataTable();
        adapter.Fill(dt);

        RadComboBox3.DataTextField = "ProductID";
        RadComboBox3.DataValueField = "ProductID";
        RadComboBox3.DataSource = dt;
        RadComboBox3.DataBind();
    }

JS:

<script type="text/javascript">
    var countriesCombo;
    var citiesCombo;
    function pageLoad() {
                countriesCombo = $find("<%= RadComboBox2.ClientID %>");
                citiesCombo = $find("<%= RadComboBox3.ClientID %>");
    }
    function LoadCustomerID(sender, eventArgs) {
        var item = eventArgs.get_item();
        countriesCombo.set_text("Loading...");
        citiesCombo.clearSelection();
        if (item.get_index() > 0) {
            countriesCombo.requestItems(item.get_value(), false);
        }
        else {
            countriesCombo.set_text(" ");
            countriesCombo.clearItems();
            citiesCombo.set_text(" ");
            citiesCombo.clearItems();
        }
    }
    function LoadOrderID(sender, eventArgs) {
        var item = eventArgs.get_item();
        citiesCombo.set_text("Loading...");
        citiesCombo.requestItems(item.get_value(), false);
    }
    function ItemsLoaded(sender, eventArgs) {
        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>

I tried this by referring into the following demo.
ComboBox / Related ComboBoxes

Thanks,
-Shinu.

[Mart]

Hello,
 
This uses only input from combobox2 in query for combobox3
I need to get 2 parameters in query for combobox3

so in this case

SELECT * FROM [Order Details] WHERE OrderID =@OrderID AND CustomerID=@CustomerID ORDER By ProductID"

@OrderID is combobox2.selectedvalue and
@customerID is combobox1.selectedvalue

Hope you can help

Mart

[Shinu]

Hi Mart,

Try the following code snippet.

C#:

protected void RadComboBox3_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
   {

       LoadProductID(RadComboBox2.SelectedValue, RadComboBox1.SelectedValue);
   }
   protected void LoadProductID(string countryID, string ProductID)
   {
       ................
       adapter.SelectCommand = new SqlCommand("SELECT * FROM [Order Details] WHERE OrderID =@OrderID AND CustomerID=@CustomerID ORDER By ProductID", conn);
       adapter.SelectCommand.Parameters.AddWithValue("@OrderID", countryID);
       adapter.SelectCommand.Parameters.AddWithValue("@CustomerID", CustomerID);
       ................
   }

Thanks,
-Shinu.

[Mart]

Hello,

First thank yoy for your help.
This is not working because there is no postback to the server.
I need to get radcombo1.valueselected from client within javascript

Mart

[Shinu]

Hi Mart,

Since we have to bind RadComboBox to a DataSource we need a server postback. So please make sure that you set AutoPostBack to true.

Thanks,
-Shinu.