This is a migrated thread and some comments may be shown as answers.
Update ComboBox 2 from ComboBox1
3 Answers 28 Views
This is a migrated thread and some comments may be shown as answers.
Aaron
Top achievements
Rank 1
Aaron asked on 23 Aug 2012, 07:32 PM
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>

3 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 24 Aug 2012, 07:36 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Aaron
Top achievements
Rank 1
answered on 24 Aug 2012, 11:18 AM
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>

0
Nencho
Telerik team
answered on 24 Aug 2012, 02:32 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Asked by
Aaron
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Aaron
Top achievements
Rank 1
Share this question
or