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

Cascading Comboboxes

2 Answers 149 Views

ComboBox

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

Ian asked on 07 Apr 2012, 06:39 AM

Hi Guys, I have been playing with this and can't figure it out.

The setup. I have two comboboxes. The first is a list of countries. The second is a cascading box and displays States, dependent on the country selected in the first combo box. Here is how I want it to work.

1. When the page loads, the Countries Combobox (RadCombobox1) is visible and lists the countries. The States Combobox (RadCombobox2) is not visible.

2. After the user selects a country, it fires the OnClientSelectedIndexChanged="fired" javascript function which in turn fires the RadComboBox2 requestItems event passing the countryID value.

3. The RadComboBox2 requestItems event then populates the state list for Australia (Country ID 1), Canada (Country ID 7) or the USA (Country ID 45), or nothing if it is any other country. Then I want the RadComboBox2 to be visible and dropped down if the country is Australia, Canada, or the USA, and if it is not then I want it to be visible but looking like a text box (RadComboBox2.ShowToggleImage = False

,RadComboBox2.ShowDropDownOnTextboxClick = False) so that they can type in their state.

4. All seems to work ok, except that the RadComboBox2.ShowToggleImage = False and RadComboBox2.ShowDropDownOnTextboxClick = False does not work unless there is a postback (such as clicking the button).

5.If I use RadAjaxManager (on RadCombobox1 to update RadCombobox2) then it doesn't work because the requiredfieldvalidator on name won't allow the postback unless a the name field is filled out. This is a striped down version, in real life there will be many textbox inputs above and below the country and state comboboxes, and they will have requiredfieldvalidators. Is there a way of turning these validators off for the RadAjaxManager postback?

6. On another note, was there a simpler way of hiding RadComboBox2 when the page was first loaded instead of using a literal to insert javascript. HideCombo does not work. If I change the visibility then it does not render, so that doesn't work. If I use set_visibile(false) in the pageload()then it disappears on postback.

Many thanks in advance.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Combopostback.aspx.vb" Inherits="Combobox_Combopostback" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

Select a Country:

<telerik:RadComboBox ID="RadComboBox1" runat="server" Height="140px"

Width="150px"

Skin="Vista"

EmptyMessage="Type an Country"

markfirstmatch="true"

EnableLoadOnDemand="True"

OnItemsRequested="RadComboBox1_ItemsRequested"

OnClientSelectedIndexChanged="fired"

<br />

State (select country first):

<telerik:RadComboBox ID="RadComboBox2" runat="server" Height="140px"

Width="150px"

Skin="Vista"

EmptyMessage="Type your State"

markfirstmatch="true"

AllowCustomText="true"

<br />

Name: <asp:Textbox id="tbxFirstName" runat="server" />

<asp:RequiredFieldValidator id="UsernameRequiredValidator" runat="server"

ControlToValidate="tbxFirstName" ForeColor="red"

Display="Static" ErrorMessage="Required" />

<br />

<asp:Button ID="Button1" runat="server" Text="Button" />

</div>

var countriesCombo;

function pageLoad() {

// initialize the global variables

// in this event all client objects

// are already created and initialized

StatesCombo = $find("<%= RadComboBox2.ClientID %>");

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

}

function fired(sender, eventArgs) {

var item = eventArgs.get_item();

StatesCombo.trackChanges()

StatesCombo.set_visible(true);

//For Australia (1), Canada (7), and the US (45) you will load in the states

if (item.get_value() == 1 || item.get_value() == 7 || item.get_value() == 45) {

StatesCombo.showDropDown();

}

else{

StatesCombo.hideDropDown();

}

StatesCombo.requestItems(item.get_value(), false);

StatesCombo.commitChanges()

}

</script>

</div>

</form>

</body>

</html>

Here is the codebehind

Imports System.Data.SqlClient

Imports System.Data

Imports System

Imports System.Configuration

Imports Telerik.Web.UI

Partial Class Combobox_Combopostback

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

' Fill the Countries combo.

LoadCountries()

'Hide the state combo box, this literal puts it in the javascript page load only for the first time the page is opened

Literal1.Text = "StatesCombo.set_visible(false);"

ElseIf Not Page.IsCallback Then

LoadStates(RadComboBox1.SelectedValue)

Literal1.Text = ""

End If

End Sub

Protected Sub LoadCountries()

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

'This is a simple table that has two fields, Country, and CountryID

Dim adapter As New SqlDataAdapter("SELECT * FROM Country ORDER By Country", connection)

Dim dt As New DataTable()

adapter.Fill(dt)

RadComboBox1.DataTextField = "Country"

RadComboBox1.DataValueField = "CountryID"

RadComboBox1.DataSource = dt

' Insert the first item.

Dim item1 As New RadComboBoxItem()

item1.Text = "Type your Country"

item1.Value = 0

RadComboBox1.Items.Add(item1)

RadComboBox1.DataBind()

End Sub

Protected Sub LoadStates(ByVal countryID As String)

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

' This table has 3 fields, StateName, StateID, and CountryID, depending on the countryID passed into the sub it loads the states for that country.

Dim adapter As New SqlDataAdapter("SELECT * FROM State WHERE CountryID=@CountryID ORDER By StateName", connection)

adapter.SelectCommand.Parameters.AddWithValue("@CountryID", countryID)

Dim dt As New DataTable()

adapter.Fill(dt)

RadComboBox2.DataTextField = "StateName"

RadComboBox2.DataValueField = "StateID"

RadComboBox2.DataSource = dt

'********** I want these two items to fire when RadComboBox2.ItemsRequested fires, but they only fire after a postback (such as when the button is pressed)

If countryID = 1 Or countryID = 7 Or countryID = 45 Then

RadComboBox2.ShowToggleImage = True

RadComboBox2.ShowDropDownOnTextboxClick = True

Else

'This is to enable them to enter their state

RadComboBox2.ShowToggleImage = False

RadComboBox2.ShowDropDownOnTextboxClick = False

End If

'******************************************

Dim item2 As New RadComboBoxItem()

item2.Text = "Type your State"

item2.Value = 0

RadComboBox2.Items.Add(item2)

RadComboBox2.DataBind()

End Sub

Protected Sub RadComboBox1_ItemsRequested(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles RadComboBox1.ItemsRequested

End Sub

Protected Sub RadComboBox2_ItemsRequested(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles RadComboBox2.ItemsRequested

LoadStates(e.Text)

End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

Response.Write("Postback Event")

End Sub

End Class

2 Answers, 1 is accepted

answered on 11 Apr 2012, 09:29 PM

Hi Ian,

When RadComboBox is loading its items on demand nothing but the items added in the ItemsRequested event handler is sent from the server to the client. There is no HTML sent to the client therefore if properties that require changes in the HTML of the control are set, as in your case ShowToggleImage that removes the drop-down arrow, those changes will not be mirrored on the client.

For your scenario, you could either use the following approach to enable/disable the RadComboBox on the client when loading items on demand:

function OnClientItemsRequested(sender, args) {

if (sender.get_items().get_count() != 0) {

sender.set_enabled(true);

sender.set_text("");

sender.showDropDown();

}

else {

sender.set_enabled(false);

sender.set_text("items not loaded");

}

<telerik:RadComboBox ID="RadComboBox2" runat="server" Height="140px" Width="150px"

Skin="Vista" EmptyMessage="Type your State" MarkFirstMatch="true" AllowCustomText="true"

OnItemsRequested="RadComboBox2_ItemsRequested" OnClientItemsRequested="OnClientItemsRequested" />

Or, you could load items for the second RadComboBox when the selected index of the first one is changed (in the SelectedIndexChanged event handler):

<telerik:RadComboBox ID="RadComboBox1" runat="server" Height="140px" Width="150px"

Skin="Vista" EmptyMessage="Type an Country" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"

AutoPostBack="true" />

<telerik:RadComboBox ID="RadComboBox2" runat="server" Height="140px" Width="150px"

Visible="false" Skin="Vista" EmptyMessage="Type your State" MarkFirstMatch="true"

AllowCustomText="true" />

Protected Sub RadComboBox1_SelectedIndexChanged(sender As Object, e As RadComboBoxSelectedIndexChangedEventArgs)

If RadComboBox2.Visible = False Then

RadComboBox2.Enabled = True

End If

If e.Value = "0" OrElse e.Value = "1" Then

LoadStates(e.Value)

RadComboBox2.ShowDropDownOnTextboxClick = True

RadComboBox2.ShowToggleImage = True

Else

RadComboBox2.ShowDropDownOnTextboxClick = False

RadComboBox2.ShowToggleImage = False

End If

End Sub

Greetings,
Ivana
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.