[Solved] Related ComboBox not working

[3ms]

I used the multiple combo box page for a template for my page.  I have the page built but my first combobox doesn't respond, my other controls on the page function.  I don't know if this matters but I have a master page associated to this page.  Thanks for any help.

ASPX Code

<

 

asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

 

 

<table class="style11">

 

 

<tr>

 

 

<td class="style12" valign="top">

 

 

<asp:Label ID="Label3" runat="server" Font-Names="Calibri" Font-Size="Medium"

 

 

Text="Select State:"></asp:Label>

 

 

</td>

 

 

<td class="style13">

 

 

<telerik:RadComboBox ID="RadComboBox1" Runat="server" width= "186px"

 

 

OnClientSelectedIndexChanging="LoadStates"

 

 

OnItemsRequested="RadComboBox1_ItemsRequested"

 

 

Skin="Sunset" Height="19px" EnableLoadOnDemand="False">

 

 

</telerik:RadComboBox>

 

 

</td>

 

 

<td class="style14" valign="top">

 

 

<asp:Label ID="Label4" runat="server" Font-Names="Calibri" Font-Size="Medium"

 

 

Text="Select Site:"></asp:Label>

 

 

</td>

 

 

<td valign="top">

 

 

<telerik:RadComboBox ID="RadComboBox2" Runat="server"

 

 

Width="186px"

 

 

OnClientSelectedIndexChanging="LoadProperties"

 

 

OnClientItemsRequested="ItemsLoaded"

 

 

OnItemsRequested="RadComboBox2_ItemsRequested" Height="19px"

 

 

Skin="Sunset" >

 

 

</telerik:RadComboBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td class="style12">

 

 

&nbsp;</td>

 

 

<td colspan="3">

 

 

&nbsp;</td>

 

 

</tr>

 

 

</table>

 

 

<script type="text/javascript">

 

 

//global variables for the Properties combobox

 

 

var propertiesCombo;

 

 

function pageLoad() {

 

 

// initialize the global variables

 

 

// in this event all client objects

 

 

// are already created and initialized

 

propertiesCombo = $find(

"<%= RadComboBox2.ClientID %>");

 

}

 

function LoadProperties(combo, eventArqs) {

 

 

var item = eventArqs.get_item();

 

propertiesCombo.set_text(

"Loading...");

 

 

// if a continent is selected

 

 

if (item.get_index() > 0) {

 

 

// this will fire the ItemsRequested event of the

 

 

// properties combobox passing the State as a parameter

 

propertiesCombo.requestItems(item.get_value(),

false);

 

}

 

else {

 

 

// the -Select a continent- item was chosen

 

propertiesCombo.set_text(

" ");

 

propertiesCombo.clearItems();

}

}

 

function ItemsLoaded(combo, eventArqs) {

 

propertiesCombo = $find(

"<%= RadComboBox2.ClientID %>");

 

 

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>

 

 

</asp:Content>

C# Code

 

 

protected void Page_Load(object sender, EventArgs e)

 

{

 

if (!Page.IsPostBack)

 

{

 

//fill the continents combo

 

 

 

 

LoadStates();

}

 

}

 

protected void LoadStates()

 

{

 

string path = Server.MapPath("~/App_Data/xxx.mdb");

 

 

OleDbConnection dbCon = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + path);

 

dbCon.Open();

 

 

OleDbDataAdapter adapter = new OleDbDataAdapter("SELECT State, PropertyNumber FROM tblSiteInfo ORDER By PropertyNumber", dbCon);

 

 

DataTable dt = new DataTable();

 

adapter.Fill(dt);

dbCon.Close();

RadComboBox1.DataTextField =

"State";

 

RadComboBox1.DataValueField =

"State";

 

RadComboBox1.DataSource = dt;

RadComboBox1.DataBind();

 

//insert the first item

 

 

 

 

RadComboBox1.Items.Insert(0,

new RadComboBoxItem("- Select a state -"));

 

 

foreach (RadComboBoxItem item in RadComboBox1.Items)

 

{

item.ToolTip = item.Text;

}

}

 

protected void LoadProperties(string State)

 

{

 

string path = Server.MapPath("~/App_Data/xxx.mdb");

 

 

OleDbConnection dbCon = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + path);

 

dbCon.Open();

 

//select a Property number based on the state

 

 

 

 

 

OleDbDataAdapter adapter = new OleDbDataAdapter("SELECT State, PropertyNumber FROM tblSiteInfo WHERE State=@State ORDER By PropertNumber", dbCon);

 

adapter.SelectCommand.Parameters.AddWithValue(

"@State", State);

 

 

DataTable dt = new DataTable();

 

adapter.Fill(dt);

dbCon.Close();

RadComboBox2.DataTextField =

"PropertyNumber";

 

RadComboBox2.DataValueField =

"PropertyNumber";

 

RadComboBox2.DataSource = dt;

RadComboBox2.DataBind();

 

foreach (RadComboBoxItem item in RadComboBox2.Items)

 

{

item.ToolTip = item.Text;

}

}

 

protected void RadComboBox1_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)

 

{

LoadStates();

}

 

protected void RadComboBox2_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)

 

{

 

// e.Text is the first parameter of the requestItems method

 

 

 

 

 

// invoked in LoadCountries method

 

 

 

 

LoadProperties(e.Text);

}

 

}

[Grace Tsang]

I am extremely frustrated with this related combobox. Like 3ms, I use this in a master page, but don't think it matters, because I created a brand new AjaxEnabledWebSite from Visual Studio and it is not working there either.

 

Telerik - can you provide a step by step document or video that explains how the related comboboxes are implemented???

 

From the example in this link http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx, I figure the following so far:

1. In a brand new Ajax enabled web application, I added a RadComboBox in the form (RadComboBox1)
2. Set EnableLoadOnDemand of RadComboBox1 to true
3. Register the ItemsRequested event for this combobox
4. In the RadComboBox1_ItemsRequested function, add code to populate RadComboBox1

So far the above works, when I click on the combo box, I see the items in the dropdown list, but adding the following steps will make things stop working:

5. Next, in RadComboBox1 OnClientSelectItemChanging event, I add the name of the funtion that loads the second combobox

After I completed #5, then RadComboBox1 will start to fail, clicking on the down arrow will fail, nothing will show up.

Someone from Telerik please help!  I need a solution fast!
Thanks,
G

 

[Veselin Vasilev]

Hi guys,

Here is how the example works:

When the page is loaded (!IsPostBack) the first combobox is filled with the continents:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        //fill the continents combo
         LoadContinents();
    }
}

When you select a continent the OnClientSelectedIndexChanging event is fired and here is its handler:

function LoadCountries(combo, eventArqs)
{
    var item = eventArqs.get_item();
    countriesCombo.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
        countriesCombo.requestItems(item.get_value(), false);
    }
    else
    {
     // the -Select a continent- item was chosen
        countriesCombo.set_text(" ");
        countriesCombo.clearItems();

        citiesCombo.set_text(" ");
        citiesCombo.clearItems();
    }
}

The event handler checks if a continent is selected and then calls the requestItems method of the countries combobox. That causes the ItemsRequested server event of the countries combobox to fire and this loads the countries for the selected continent.

Similarly, when you select a country, the OnClientSelectedIndexChanging event is fired and the cities are loaded:

function LoadCities(combo, eventArqs)
{
    var item = eventArqs.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);
}

You see that here we call the requestItems method of the cities combobox which causes the ItemsRequested event of the cities combo to fire.

This is how the comboboxes are populated.


Regards,
Veselin Vasilev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[3ms]

Thank Veselin, I finally found the error.  Your reply helped me understand the flow.

[Grace Tsang]

Veselin,

Thanks for your help, I finally got the related comboboxes working.

However, I am now faced with a differnet dilema. On the page where the related comboboxes are, once I selected the values in them, I proceed to select values in other (unrelated) combobox to fill out the form. However, if I drop down the list from the other comboboxes a few times, the selected values in the related comboboxes will disappear.

Can you offer some advise? THis is becoming quite urgent. THanks.

Grace 

[Grace Tsang]

Hi,

My comboboxes were in a RADPanel and I removed the panel and it seems to help. I will look into it some more. No need to investigate this issue further for now. THanks.

Grace

[Grace Tsang]

Hi Telerik support,

my related comboboxes are working perfectly until I add them to an RADAjaxPanel. When i hit the submit button, some of the values displayed in the related comboboxes are lost.

What is the proper way to use related combobox and AJAX?

thanks for your help,
Grace

[Helen]

Hi Grace,

When RadAjaxPanel is used, the proper way is to use the RadComboBox in server mode(building the second combobox in the SelectedIndexChanged server event of the first combobox). Please see the attached files for reference.

Regards,
Helen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.