Update ComboBox on client side

7 posts, 0 answers
  1. Hilmar Bunjes
    Hilmar Bunjes avatar
    5 posts
    Member since:
    Feb 2008

    Posted 15 May 2008 Link to this post

    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
  2. Rosi
    Admin
    Rosi avatar
    2529 posts

    Posted 15 May 2008 Link to this post

    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
  3. Hilmar Bunjes
    Hilmar Bunjes avatar
    5 posts
    Member since:
    Feb 2008

    Posted 15 May 2008 Link to this post

    Thanks, got it working.

    Best,
    Hilmar
  4. Marcus
    Marcus avatar
    20 posts
    Member since:
    Jan 2009

    Posted 17 Feb 2010 Link to this post

    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
  5. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 23 Feb 2010 Link to this post

    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.
  6. Marcus
    Marcus avatar
    20 posts
    Member since:
    Jan 2009

    Posted 23 Feb 2010 Link to this post

    Just what I needed - Thanx.
  7. Rakshit
    Rakshit avatar
    1 posts
    Member since:
    Jan 2013

    Posted 31 Dec 2012 Link to this post

    Thanx Telerik Team
Back to Top