Cascading combobox country to states

4 posts, 0 answers
  1. Kris
    Kris avatar
    20 posts
    Member since:
    Jun 2010

    Posted 05 Sep 2010 Link to this post

    What I am trying to do is to have a country combobox that updates a state/region combobox, but if the country has no known state/region then hid the combobox and show a RadInput box.  I have the cascading drop downs working but cannot get it to hide the combobox and display the text box. any help would be appreciated.

     

    .
    .
    .
    .
    <tr>
                    <td colspan="2" class="t12_BlackBold"><div align="right">
                      Country:  <span class="t12_red">*</span>
                    </div></td>
                    <td><div align="left">
                        <telerik:RadComboBox ID="frm_sCountry_cd" Runat="server" DataTextField="sCountry" 
                            DataValueField="sCountry_cd" EmptyMessage="-Select Country-" 
                            ErrorMessage="Required field." 
                            Skin="Outlook" 
                            Width="180px" 
                            DropDownWidth="240px" 
                            MaxHeight="300px"
                            onclientselectedindexchanged="LoadStates"
                            OnItemsRequested="frm_sCountry_cd_ItemsRequested">
                        </telerik:RadComboBox>
                        </div></td>
                  </tr>
                  <tr>
                    <td colspan="2" class="t12_BlackBold"><div align="right">
                      State/Region: <span class="t12_red">*</span>
                    </div></td>
                    <td><div align="left">
                        <telerik:RadComboBox ID="frm_sState" Runat="server" 
                            DataTextField="sStateDesc" DataValueField="sState" 
                            EmptyMessage="-Select State-" 
                            ErrorMessage="Required field." 
                            Skin="Outlook" Width="180px" 
                            MaxHeight="300px"
                            DropDownWidth="200px"
                            OnClientItemsRequested="ItemsLoaded"
                            OnItemsRequested="frm_sState_ItemsRequested" >
                        </telerik:RadComboBox><asp:TextBox  ID="sState" MaxLength="20" 
                            Width="150px" runat="server"></asp:TextBox>
                        </div></td>
                  </tr>
    .
    .
    .
    .
    <script type="text/javascript">
    //global variables for the countries and cities comboboxes
    var sStatesCombo;
    var sStateText;
      
    function pageLoad()
    {
        // initialize the global variables
        // in this event all client objects 
        // are already created and initialized 
        sStatesCombo = $find("<%= frm_sState.ClientID%>");
        sStateText = $find("<%= sState.ClientID %>");  
      
    }
      
    function LoadStates(combo, eventArqs)
    {
        var item = eventArqs.get_item();
          
        sStatesCombo.set_text("Loading...");
          
        // if a continent is selected
        if (item.get_index() > -1)
        {        
         // this will fire the ItemsRequested event of the 
         // countries combobox passing the sCountry_id as a parameter 
            sStatesCombo.requestItems(item.get_value(), false);
      
            sStatesCombo.set_text("-Select State/Region-");
      
            if (sStatesCombo.get_items().get_count() > 0) {
                //trying to get the number of item if > 0 then I have state for the selected country.
                sStateText.style.display = "block";
                sStatesCombo.style.display = "none";
            }
            else {
                sStateText.style.display = "none";
                sStateText.set_visible(true);
                sStatesCombo.style.display = "block"; 
                //tried a number of different approaches
            }
         }
        else
        {
         // the -Select a continent- item was chosen
            sStatesCombo.set_text("-Select Country first-");
            sStatesCombo.clearItems();
        }
    }
      
    function ItemsLoaded(combo, eventArqs) {
        if (combo.get_items().get_count() > 0) {
            // pre-select the first item
            combo.set_text(combo.get_items().getItem(0).get_text());
            combo.get_items().getItem(0).highlight();
        }
        combo.showDropDown();
    }
     </script>
      
      
    <telerik:RadInputManager ID="RadInputManager1" runat="server" Skin="Outlook">
        <telerik:RegExpTextBoxSetting BehaviorID="sEmailAddress" 
            EmptyMessage="-Enter an Email address here-" 
            ErrorMessage="Invalid Email address" IsRequiredFields="True" 
            SelectionOnFocus="SelectAll" 
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
            <TargetControls>
                <telerik:TargetInput ControlID="sEmailAddress" />
            </TargetControls>
        </telerik:RegExpTextBoxSetting>
        <telerik:TextBoxSetting BehaviorID="sFName" EmptyMessage="-Enter first name-" 
            ErrorMessage="First name is required." 
            SelectionOnFocus="SelectAll" 
            Validation-IsRequired="True">
            <TargetControls>
                <telerik:TargetInput ControlID="sFName" />
            </TargetControls>
            <Validation IsRequired="True"></Validation>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting BehaviorID="sMName" EmptyMessage="-Enter middle name-" 
            SelectionOnFocus="SelectAll">
            <TargetControls>
                <telerik:TargetInput ControlID="sMName" />
            </TargetControls>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting BehaviorID="sLName" EmptyMessage="-Enter last name-" 
            ErrorMessage="Last name is required." 
            SelectionOnFocus="SelectAll" 
            Validation-IsRequired="True">
            <TargetControls>
                <telerik:TargetInput ControlID="sLName" />
            </TargetControls>
            <Validation IsRequired="True"></Validation>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting BehaviorID="sAddressLine1" EmptyMessage="-Enter address-" 
            ErrorMessage="Address is required." 
            SelectionOnFocus="SelectAll" 
            Validation-IsRequired="True">
            <TargetControls>
                <telerik:TargetInput ControlID="sAddressLine1" />
            </TargetControls>
            <Validation IsRequired="True"></Validation>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting BehaviorID="sCity" EmptyMessage="-Enter city-" 
            ErrorMessage="City is required." 
            SelectionOnFocus="SelectAll" 
            Validation-IsRequired="True">
            <TargetControls>
                <telerik:TargetInput ControlID="sCity" />
            </TargetControls>
            <Validation IsRequired="True"></Validation>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting BehaviorID="sState" EmptyMessage="-Enter State/Region-" 
            ErrorMessage="State/Regopm is required." 
            SelectionOnFocus="SelectAll" 
            Validation-IsRequired="True">
            <TargetControls>
                <telerik:TargetInput ControlID="sState" />
            </TargetControls>
            <Validation IsRequired="True"></Validation>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting BehaviorID="sZipCode" EmptyMessage="-Enter zip code/postal code-" 
            ErrorMessage="This is a required field." 
            SelectionOnFocus="SelectAll" 
            Validation-IsRequired="True">
            <TargetControls>
                <telerik:TargetInput ControlID="sCity" />
            </TargetControls>
            <Validation IsRequired="True"></Validation>
        </telerik:TextBoxSetting>
        <telerik:RegExpTextBoxSetting BehaviorID="sHPhone" 
            EmptyMessage="-Enter Cell or Home No.-" ErrorMessage="Enter a valid number." 
            SelectionOnFocus="SelectAll" 
            ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}">
            <TargetControls>
                <telerik:TargetInput ControlID="sHPhone" />
            </TargetControls>
        </telerik:RegExpTextBoxSetting>
        <telerik:RegExpTextBoxSetting BehaviorID="sWPhone" 
            EmptyMessage="-Enter Work number-" ErrorMessage="Enter a valid number." 
            SelectionOnFocus="SelectAll" 
            ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}">
            <TargetControls>
                <telerik:TargetInput ControlID="sWPhone" />
            </TargetControls>
        </telerik:RegExpTextBoxSetting>
      
        <telerik:DateInputSetting BehaviorID="dBirthDate" Culture="en-US" 
            DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" 
            EmptyMessage="-Enter birth date-" 
            ErrorMessage="Enter a valid birth date." MaxDate="2010-09-03" 
            MinDate="1900-01-01" SelectionOnFocus="SelectAll">
            <TargetControls>
                <telerik:TargetInput ControlID="dBirthDate" />
            </TargetControls>
            <Validation IsRequired="True"></Validation>
        </telerik:DateInputSetting>
      
    </telerik:RadInputManager>

    vb code...
    Partial
    Class MemberApplication
        Inherits PortalModuleBase
        Implements IActionable
      
    #Region "Event Handlers"
      
        ''' -----------------------------------------------------------------------------
        ''' Page_Load runs when the control is loaded
        ''' -----------------------------------------------------------------------------
        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load, Me.Load
            Try
      
                If Not Page.IsPostBack Then
                    'fill the continents combo
                    LoadCountries()
                End If
      
      
            Catch exc As Exception        'Module failed to load
                ProcessModuleLoadException(Me, exc)
            End Try
        End Sub
      
        Protected Sub LoadCountries()
            Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("AAU_StoreCS").ConnectionString)
      
            Dim adapter As New SqlDataAdapter("SELECT Value AS sCountry_cd, Text AS sCountry, EntryID AS ParentID, 0 as sOrder FROM Mstr_Lists WHERE (ListName = 'Country') AND (Value = 'US') UNION SELECT Value AS sCountry_cd, Text AS sCountry, EntryID AS ParentID, 1 as sOrder FROM Mstr_Lists AS Mstr_Lists_1 WHERE (ListName = 'Country') Order by sOrder, sCountry", connection)
            Dim dt As New DataTable()
            Adapter.Fill(dt)
      
            frm_sCountry_cd.DataTextField = "sCountry"
            frm_sCountry_cd.DataValueField = "sCountry_cd"
            frm_sCountry_cd.DataSource = dt
            frm_sCountry_cd.DataBind()
            'insert the first item
            'frm_sCountry_cd.Items.Insert(0, New RadComboBoxItem("-Select a Country-"))
            LoadStates("US")
            sState.Visible = False
      
        End Sub
      
      
        Protected Sub LoadStates(ByVal sCountry_cd As String)
            Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("AAU_StoreCS").ConnectionString)
      
            'Select states/regions based on the sCountry_cd
            Dim adapter As New SqlDataAdapter("SELECT Value AS sState, Text AS sStateDesc, ParentID FROM Mstr_Lists WHERE (ListName = 'Region') AND (ParentID = (SELECT EntryID FROM Mstr_Lists AS Mstr_Lists_1 WHERE (ListName = 'Country') AND (Value = @Country_cd))) ORDER BY sStateDesc", connection)
            adapter.SelectCommand.Parameters.AddWithValue("@Country_cd", sCountry_cd)
      
            Dim dt As New DataTable()
            adapter.Fill(dt)
            frm_sState.DataTextField = "sStateDesc"
            frm_sState.DataValueField = "sState"
            frm_sState.DataSource = dt
            frm_sState.DataBind()
              
      
      
        End Sub
      
        Protected Sub frm_sCountry_cd_ItemsRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs) Handles frm_sCountry_cd.ItemsRequested
            LoadCountries()
        End Sub
      
      
        Protected Sub frm_sState_ItemsRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs) Handles frm_sState.ItemsRequested
            LoadStates(e.Text)
      
        End Sub
      
    #End Region
  2. Yana
    Admin
    Yana avatar
    4865 posts

    Posted 09 Sep 2010 Link to this post

    Hello Kris,

    Here are the errors in your code:

    First, sState is an asp textbox, so you cannot access it on the client with $find method - it's used only to get the client-side object of RadControls. I suggest you replace it with RadTextBox:

    <telerik:RadTextBox ID="sState" MaxLength="20" Width="150px" runat="server" />

    And the other problem is that this textbox is set Visible="false" on the server, so it's not rendered on the page and cannot be accessed on the client. To fix this you should set it invisible on the client in Page_Load:

    function pageLoad() {
        // initialize the global variables
        // in this event all client objects
        // are already created and initialized
        sStatesCombo = $find("<%= frm_sState.ClientID%>");
        sStateText = $find("<%=sState.ClientID %>");
        sStateText.set_visible(false);
     
    }


    I've attached my test page for a reference.

    Greetings,
    Yana
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Kris
    Kris avatar
    20 posts
    Member since:
    Jun 2010

    Posted 09 Sep 2010 Link to this post

    Thanks Yana,

    That as very helpfull.  One more question on this issue.  I trying to make the sStateText visible is the RadComboBox does not have any rows, not sure this is correct I get mixed results.

    this is the line I'm not sure of: if (sStatesCombo.get_items().get_count() > 0) 
    <tr>
                    <td colspan="2" class="t12_BlackBold"><div align="right">
                      Country:  <span class="t12_red">*</span>
                    </div></td>
                    <td><div align="left">
                        <telerik:RadComboBox ID="frm_sCountry_cd" Runat="server" DataTextField="sCountry" 
                            DataValueField="sCountry_cd" EmptyMessage="-Select Country-" 
                            ErrorMessage="Required field." 
                            Skin="Outlook" 
                            Width="180px" 
                            DropDownWidth="240px" 
                            MaxHeight="300px"
                            onclientselectedindexchanged="LoadStates"
                            OnItemsRequested="frm_sCountry_cd_ItemsRequested">
                        </telerik:RadComboBox>
                        </div></td>
                  </tr>
                  <tr>
                    <td colspan="2" class="t12_BlackBold"><div align="right">
                      State/Region: <span class="t12_red">*</span>
                    </div></td>
                    <td><div align="left">
                        <telerik:RadComboBox ID="frm_sState" Runat="server" 
                            DataTextField="sStateDesc" DataValueField="sState" 
                            EmptyMessage="-Select State-" 
                            ErrorMessage="Required field." 
                            Skin="Outlook" Width="180px" 
                            MaxHeight="300px"
                            DropDownWidth="200px"
                            OnClientItemsRequested="ItemsLoaded"
                            OnItemsRequested="frm_sState_ItemsRequested" >
                        </telerik:RadComboBox>
                        <telerik:RadTextBox ID="sStateTxt" Runat="server" 
                            Skin="Outlook" Width="100px" MaxLength="20">
                        </telerik:RadTextBox>
                        </div></td>
                  </tr>
    var sStatesCombo;
    var sStateText;
      
    function pageLoad()
    {
        // initialize the global variables
        // in this event all client objects 
        // are already created and initialized 
        sStatesCombo = $find("<%= frm_sState.ClientID%>");
        sStateText = $find("<%= sStateTxt.ClientID %>");
      
      
        //Hide State text boxes on new record.
        sStateText.set_visible(false);
    }
      
    function LoadStates(combo, eventArqs)
    {
        var item = eventArqs.get_item();
          
        sStatesCombo.set_text("Loading...");
          
        // if a continent is selected
        if (item.get_index() > -1)
        {        
         // this will fire the ItemsRequested event of the 
         // countries combobox passing the sCountry_id as a parameter 
            sStatesCombo.requestItems(item.get_value(), false);
            sStatesCombo.set_text("-Select State/Region-");
      
            if (sStatesCombo.get_items().get_count() > 0) 
            {
                sStateText.set_visible(false);
                sStatesCombo.set_visible(true);
            }
            else 
            {
                sStateText.set_visible(true);
                sStatesCombo.clearItems();
                sStatesCombo.set_visible(false);
            }
        }
        else
        {
         // the -Select a Country item was chosen
            sStatesCombo.set_text("-Select Country first-");
            sStatesCombo.clearItems();
        }
    }
  4. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 13 Sep 2010 Link to this post

    Hello Kris,

    The if-clause

    if (sStatesCombo.get_items().get_count() > 0)

    will be true when there *are* Items in the RadComboBox. I guess you need the code the other way around, i.e. show the TextBox when the above condition is true and hide it otherwise.

    I hope I am not missing something.

    All the best,
    Simon
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top