Update ComboBox on client side

[Hilmar Bunjes]

Hi,
I try to find a way to update the RadComboBox on client-side with an existing JavaScript array.

To lower the number of server requests we introduced a JavaScript file where we created arrays of countries, states and cities. Those elements won't change so a server request is not necessary. Now we'd like to use the RadComboBox for selecting the country, state and city. However I haven't found an easy way to do this.

We have:
- ASPX file with 3 RadComboBoxes for country, state and city
- JavaScript file with array of countries, states and cities

When the user selects a country, a javascript method should choose the correct state array and fill the state combo box with the possible items. Same for the state and city.

Does anyone have an idea if and how we can do this?

Thanks,
Hilmar

[Rosi]

Hello Hilmar ,

Please find attached a sample project, which you can use to get you started.
Also, I suggest that you check the following online examples: Add/Remove/Disable Items  and Multiple ComboBoxes

Regards,
Rosi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Hilmar Bunjes]

Thanks, got it working.

Best,
Hilmar

[Marcus]

Hi Rosi,

I have looked at the .zip application and it helps me load my Combo Boxes from the Client using an Array. But I would like to fill the Java Array on the page_load event. Is there a way of doing this rather than hand-coding the array in the .aspx.

I have looked at ClientScript.RegisterArrayDeclaration but this will only load a 1 Dim array....

Thanx,

Marcus

[Kalina]

Hello Marcus,

Please excuse us for delayed reply.

There is an approach to create a JavaScript array in the code-behind and register it with RegisterArrayDeclaration method.

- At first you have to create the JavaScript array as a string :

public string CreateArrayString()
{
    string javaScriptArray = string.Empty;
    javaScriptArray += "{continent: 'Europe', countries: [ 'England', 'Italy' ]},";
    javaScriptArray += "{continent: 'Africa', countries: [ 'Egypt' ]}";
    return javaScriptArray;
}

- Then you can pass this string to RegisterArrayDeclaration:

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    RegisterArrayDeclaration("comboarray", CreateArrayString());
}

- On the client side you can loop through the array elements and add them as items to the second RadComboBox:

function OnClientSelectedIndexChanged(sender, e) {

    var Country = $find('<%=Country.ClientID %>');
    Country.clearItems();
    Country.set_text("");
    var i = 0;
    for (i = 0; i < comboarray.length; i++) {

        if (comboarray[i].continent == e.get_item().get_text())
        {
            alert(comboarray[i].continent);
            for (j = 0; j < comboarray[i].countries.length; j++) {
                alert(comboarray[i].countries[j]);

                var item = new Telerik.Web.UI.RadComboBoxItem();
                item.set_text(comboarray[i].countries[j]);
                item.get_attributes().setAttribute("Continent", comboarray[i].continent);
                Country.get_items().add(item);

            }
        }
    }

    Country.showDropDown();
}

Note: I made a small example based on the sample project posted below, naturally you can extend this example to fit it in your application.

All the best,
Kalina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Marcus]

Just what I needed - Thanx.

[Rakshit]

Thanx Telerik Team