Update ComboBox 2 from ComboBox1

[Aaron]

I am trying to update My City combobox when someone selects a state.  Will someone please look at my code and tell me why both my city and state comboboxes are blank?

I was following this tutorial:  http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultvb.aspx

Thanks!

Imports System
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports Telerik.Web.UI
Partial Class _default
    Inherits System.Web.UI.Page

    Private Const MessageTemplate As String = "You chose to explore the city of {1} in {0}"

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

        If Not Page.IsPostBack Then
            ' Fill the continents combo.
            LoadStates()
        ElseIf Not Page.IsCallback Then
            ' On regular postbacks restore the items of the related ComboBoxes.
            ' Their selected items will be automatically restored from their ClientState.
            LoadStates()
            LoadCities(cbxStates.SelectedValue)
        End If

    End Sub

    Protected Sub LoadStates()

        Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("DBConnectionString").ConnectionString)

        Dim adapter As New SqlDataAdapter("SELECT * FROM States ORDER By StateName", connection)
        Dim dt As New DataTable()
        adapter.Fill(dt)

        cbxStates.DataTextField = "StateName"
        cbxStates.DataValueField = "StateID"
        cbxStates.DataSource = dt
        cbxStates.DataBind()
        ' Insert the first item.
        cbxStates.Items.Insert(0, New RadComboBoxItem("- Select a State -"))

    End Sub

    Protected Sub LoadCities(ByVal StateID As String)

        Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("DBConnectionString").ConnectionString)

        ' Select a country based on the continentID.
        Dim adapter As New SqlDataAdapter("SELECT * FROM Cities WHERE StateID=@StateID ORDER By Name", connection)
        adapter.SelectCommand.Parameters.AddWithValue("@StateID", StateID)

        Dim dt As New DataTable()
        adapter.Fill(dt)

        cbxCities.DataTextField = "CityName"
        cbxCities.DataValueField = "CityID"
        cbxCities.DataSource = dt
        cbxCities.DataBind()

    End Sub

    Protected Sub cbxStates_ItemsRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs) Handles cbxStates.ItemsRequested
        LoadStates()
    End Sub

    Protected Sub cbxCities_ItemsRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs) Handles cbxCities.ItemsRequested
        ' e.Text is the first parameter of the requestItems method
        ' invoked in LoadCountries method
        LoadCities(e.Text)
    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs)
        Literal1.Text = String.Empty

        If RadComboBox1.SelectedIndex > 0 Then
            Literal1.Text = String.Format(MessageTemplate, cbxStates.Text, cbxCities.Text)
        End If
    End Sub

End Class

<%@ Page Title="" Language="VB" MasterPageFile="~/sitemasterpage.master" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="main-content-container">
        <div id="home-container">
            <div id="home-search-text">
                <h2>Join for free and start searching...</h2>
                <p>Once you sign up, you're free to search our members and start finding your perfect match.</p>
                <div id="home-search-content">
                    <table cellpadding="2" class="home-search-table">
                        <tr>
                            <td>
                                I'm a
                            </td>
                            <td>
                                <telerik:RadComboBox ID="RadComboBox1" Runat="server" >
                                    <Items>
                                        <telerik:RadComboBoxItem runat="server" Selected="True" Text="Man" Value="Man" />
                                        <telerik:RadComboBoxItem runat="server" Text="Woman" Value="Woman" />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                        <tr>
                            <td>Looking for a</td>
                            <td>
                                <telerik:RadComboBox ID="RadComboBox2" Runat="server" >
                                    <Items>
                                        <telerik:RadComboBoxItem runat="server" Text="Man" Value="Man" />
                                        <telerik:RadComboBoxItem runat="server" Selected="True" Text="Woman" Value="Woman" />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                        <tr>
                            <td>Select your State</td>
                            <td>
                                <telerik:RadComboBox ID="cbxStates"
                                                     runat="server"
                                                     CssClass="ComboBox_Continents"
                                                     OnClientSelectedIndexChanging="LoadStates"
                                                     OnItemsRequested="cbxStates_ItemsRequested" />
                            </td>
                        </tr>
                        <tr>
                            <td>Select your City</td>
                            <td>
                                <telerik:RadComboBox ID="cbxCities"
                                                     runat="server"
                                                     CssClass="ComboBox_Continents"
                                                     OnClientSelectedIndexChanging="LoadCities"
                                                     OnItemsRequested="cbxCities_ItemsRequested" />
                            </td>
                        </tr>
                        <tr>
                            <td> </td>
                            <td>
                                <asp:Button ID="Button1" runat="server" Text="Explore"
                                            OnClick="Button1_Click" />
                                <asp:Literal runat="server" ID="Literal1"></asp:Literal>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //global variables for the countries and cities comboboxes
        var StatesCombo;
        var citiesCombo;

        function pageLoad() {
            // initialize the global variables
            // in this event all client objects
            // are already created and initialized
            statesCombo = $find("<%= cbxStates.ClientID%>");
            citiesCombo = $find("<%= cbxCities.ClientID%>");
        }

        function LoadStates(sender, eventArgs) {
            var item = eventArgs.get_item();
            statesCombo.set_text("Loading...");
            citiesCombo.clearSelection();

            // if a continent is selected
            if (item.get_index() > 0) {
                // this will fire the ItemsRequested event of the
                // countries combobox passing the continentID as a parameter
                statesCombo.requestItems(item.get_value(), false);
            }
            else {
                // the -Select a continent- item was chosen
                statesCombo.set_text(" ");
                statesCombo.clearItems();

                citiesCombo.set_text(" ");
                citiesCombo.clearItems();
            }
        }

        function LoadCities(sender, eventArgs) {
            var item = eventArgs.get_item();

            citiesCombo.set_text("Loading...");
            // this will fire the ItemsRequested event of the
            // cities combobox passing the countryID as a parameter
            citiesCombo.requestItems(item.get_value(), false);
        }

        function ItemsLoaded(sender, eventArgs) {
            if (sender.get_items().get_count() > 0) {
                // pre-select the first item
                sender.set_text(sender.get_items().getItem(0).get_text());
                sender.get_items().getItem(0).highlight();
            }

            sender.showDropDown();
        }
    </script>
</asp:Content>

[Nencho]

Hello Aaron,

Since you are trying to implement a relation between two RadComboBoxes, you should invoke the java script function LoadCities at the OnClientSelectedIndexChanging client-side event of the State RadComboBox. Also, instead of using the OnClientSelectedIndexChanging event of the second RadComboBox, you could use the ItemsLoaded at the OnClientItemsRequested client side event. The registration of the RadComboBoxes should look as follows :

<td>
     Select your State
 </td>
 <td>
     <telerik:RadComboBox ID="cbxStates" runat="server" CssClass="ComboBox_Continents"
         OnClientSelectedIndexChanging="LoadCities" OnItemsRequested="cbxStates_ItemsRequested" />
 </td>
 <td>
     Select your City
 </td>
 <td>
     <telerik:RadComboBox ID="cbxCities" runat="server" CssClass="ComboBox_Continents"
         OnClientItemsRequested="ItemsLoaded" OnItemsRequested="cbxCities_ItemsRequested" />
 </td>

Regards,
Nencho
the Telerik team

[Aaron]

My Page Now looks like this....  and it still doesnt work..

<%@ Page Title="" Language="VB" MasterPageFile="~/sitemasterpage.master" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="main-content-container">
        <div id="home-container">
            <div id="home-search-text">
                <h2>Join for free and start searching...</h2>
                <p>Once you sign up, you're free to search our members and start finding your perfect match.</p>
                <div id="home-search-content">
                    <table cellpadding="2" class="home-search-table">
                        <tr>
                            <td>
                                I'm a
                            </td>
                            <td>
                                <telerik:RadComboBox ID="RadComboBox1" Runat="server" >
                                    <Items>
                                        <telerik:RadComboBoxItem runat="server" Selected="True" Text="Man" Value="Man" />
                                        <telerik:RadComboBoxItem runat="server" Text="Woman" Value="Woman" />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                        <tr>
                            <td>Looking for a</td>
                            <td>
                                <telerik:RadComboBox ID="RadComboBox2" Runat="server" >
                                    <Items>
                                        <telerik:RadComboBoxItem runat="server" Text="Man" Value="Man" />
                                        <telerik:RadComboBoxItem runat="server" Selected="True" Text="Woman" Value="Woman" />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                        <tr>
                            <td>Select your State</td>
                            <td>
                                <telerik:RadComboBox ID="cbxStates" runat="server" CssClass="ComboBox_Continents"
                                                     OnClientSelectedIndexChanging="LoadCities" OnItemsRequested="cbxStates_ItemsRequested" />
                            </td>
                        </tr>
                        <tr>
                            <td>Select your City</td>
                            <td>
                                <telerik:RadComboBox ID="cbxCities" runat="server" CssClass="ComboBox_Continents"
                                                     OnClientItemsRequested="ItemsLoaded" OnItemsRequested="cbxCities_ItemsRequested" />
                            </td>
                        </tr>
                        <tr>
                            <td> </td>
                            <td>
                                <asp:Button ID="Button1" runat="server" Text="Explore"
                                            OnClick="Button1_Click" />
                                <asp:Literal runat="server" ID="Literal1"></asp:Literal>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //global variables for the countries and cities comboboxes
        var StatesCombo;
        var citiesCombo;

        function pageLoad() {
            // initialize the global variables
            // in this event all client objects
            // are already created and initialized
            statesCombo = $find("<%= cbxStates.ClientID%>");
            citiesCombo = $find("<%= cbxCities.ClientID%>");
        }

        function LoadStates(sender, eventArgs) {
            var item = eventArgs.get_item();
            statesCombo.set_text("Loading...");
            citiesCombo.clearSelection();

            // if a continent is selected
            if (item.get_index() > 0) {
                // this will fire the ItemsRequested event of the
                // countries combobox passing the continentID as a parameter
                statesCombo.requestItems(item.get_value(), false);
            }
            else {
                // the -Select a continent- item was chosen
                statesCombo.set_text(" ");
                statesCombo.clearItems();

                citiesCombo.set_text(" ");
                citiesCombo.clearItems();
            }
        }

        function LoadCities(sender, eventArgs) {
            var item = eventArgs.get_item();

            citiesCombo.set_text("Loading...");
            // this will fire the ItemsRequested event of the
            // cities combobox passing the countryID as a parameter
            citiesCombo.requestItems(item.get_value(), false);
        }

        function ItemsLoaded(sender, eventArgs) {
            if (sender.get_items().get_count() > 0) {
                // pre-select the first item
                sender.set_text(sender.get_items().getItem(0).get_text());
                sender.get_items().getItem(0).highlight();
            }

            sender.showDropDown();
        }
    </script>
</asp:Content>

[Nencho]

Hi Aaron,

I have prepared a sample for you, where the described approach is implemented. Please find the attached sample.

Regards,
Nencho
the Telerik team