[Solved] Cascading combobox country to states

[Kris]

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.

[Yana]

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

[Kris]

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();

    }

}

[Simon]

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