Update ComboBox 2 from ComboBox1

4 posts, 0 answers
  1. Aaron
    Aaron avatar
    5 posts
    Member since:
    Dec 2011

    Posted 23 Aug 2012 Link to this post

    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>
  2. Nencho
    Admin
    Nencho avatar
    1799 posts

    Posted 24 Aug 2012 Link to this post

    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.
  3. Aaron
    Aaron avatar
    5 posts
    Member since:
    Dec 2011

    Posted 24 Aug 2012 Link to this post

    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>

  4. Nencho
    Admin
    Nencho avatar
    1799 posts

    Posted 24 Aug 2012 Link to this post

    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.
Back to Top