This is a migrated thread and some comments may be shown as answers.

Update ComboBox 2 from ComboBox1

3 Answers 60 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

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>

<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

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.

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>

<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>

answered on 24 Aug 2012, 02:32 PM

sample.zip

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