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

related combobox values on postback

18 Answers 402 Views

ComboBox

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

Beth Wetherbee asked on 26 May 2010, 03:00 AM

I want to implement related RadComboBoxes and have been studying the demo in \RadControls for ASP.NET AJAX Q1 2010\Live Demos\ComboBox\Examples\Functionality\MultipleComboBoxes. I added a Submit button to see what would happen on postback, and the only combobox that retains its value is the Continent combobox. The Country and City comboboxes lose all their data. I set EnableLoadOnDemand to true for the Country and City comboboxes, and then the selectedvalue and data in the drop-down was retained on postback, but if I try to select a different Country I get: "Conversion failed when converting the nvarchar value 'New Delhi' to data type int." This happens on both the Country and City comboboxes whether EnableViewState is true or false.

What should I do to make the Country and City comboboxes retain the user's selection on postback?

18 Answers, 1 is accepted

answered on 28 May 2010, 02:18 PM

Hi Beth Wetherbee,

The reason that the RadComboBox does not "remember" its text between page postbacks is because it is readonly.

I suggest you set the AllowCustomText property of the RadComboBox controls to "true".

Then if you prefer to forbid typing in the input there is a javascript workaround that you can use - handle the client-side OnClientLoad event as shown below:

function OnClientLoadHandler(sender)

{

sender.get_inputDomElement().readOnly = "readonly";

}

Regards,
Kalina
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.

answered on 09 Jun 2010, 03:27 PM

AllowCustomText does keep the Text after postback, but not the SelectedValue, which is needed to load the children combos. With the help of Telerik support, the final solution was to EnableLoadOnDemand for the Country and City combos, and create an event handler for the OnClientDropDownOpening event of the Country and City combos that finds the value of the parent combo and passes it via requestItems() to the server ItemsRequested event handler.

In case anyone else needs to know how to do this, this is the code. It works with the Telerik.mdf database included with the \RadControls for ASP.NET AJAX Q1 2010\Live Demos\ComboBox\Examples\Functionality\MultipleComboBoxes demo.

aspx:

    
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>  
        
            <%@ Page AutoEventWireup="true" CodeFile="RadComboRelatedWithPostback.aspx.cs" Inherits="Telerik.ComboboxExamplesCS.MultipleComboBoxes.DefaultCS" 
        
                Language="c#" Debug="true" %>  
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <link rel="stylesheet" type="text/css" href="styles.css" />  
        
                <style type="text/css"> 
        
                    #mainForm  
        
                    {  
        
                        width: 873px;  
        
                    }  
        
                </style>  
        
            </head>  
        
            <body>  
        
                <form runat="server" id="mainForm" method="post">  
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                    </telerik:RadScriptManager>  
        
                    <div id="qsfexWrapper">  
        
                        <asp:Label runat="server" AssociatedControlID="RadComboBox1">Continent:</asp:Label>  
        
                        <telerik:RadComboBox ID="RadComboBox1"   
        
                            runat="server"   
        
                            Width="186px"   
        
                            CssClass="ComboBox_Continents"   
        
                            OnClientSelectedIndexChanged="LoadCountries" 
        
                            OnItemsRequested="RadComboBox1_ItemsRequested" />  
        
                        <asp:Label runat="server" AssociatedControlID="RadComboBox2">Country:</asp:Label>  
        
                        <telerik:RadComboBox ID="RadComboBox2"   
        
                            runat="server"   
        
                            Width="186px"   
        
                            CssClass="ComboBox_Countries"   
        
                            OnClientSelectedIndexChanged="LoadCities"   
        
                            OnClientItemsRequested="ItemsLoaded" 
        
                            OnItemsRequested="RadComboBox2_ItemsRequested"   
        
                            EnableViewState="True" OnClientDropDownOpening="rcbClientDropDownOpening" />  
        
                        <asp:Label runat="server" AssociatedControlID="RadComboBox3">City:</asp:Label>  
        
                        <telerik:RadComboBox ID="RadComboBox3"   
        
                            runat="server"   
        
                            Width="186px"   
        
                            CssClass="ComboBox_Cities"   
        
                            OnClientItemsRequested="ItemsLoaded"   
        
                            OnItemsRequested="RadComboBox3_ItemsRequested"   
        
                            EnableViewState="True" OnClientDropDownOpening="rcbClientDropDownOpening"  />  
        
                    </div>  
        
                    <div style="text-align: center">  <asp:Button ID="Button1" runat="server" Text="Submit"/> </div>  
        
            <script type="text/javascript">  
        
            //global variables for the countries and cities comboboxes  
        
            var continentsCombo;  
        
            var countriesCombo;  
        
            var citiesCombo;  
        
            function pageLoad()  
        
            {  
        
                // initialize the global variables  
        
                // in this event all client objects  
        
                // are already created and initialized  
        
                //continentsCombo = $find("<%= RadComboBox1.ClientID %>");  
        
                var continentID = "RadComboBox1";  
        
                continentsCombo = $find(continentID);  // just to show how to $find control with a variable  
        
                countriesCombo = $find("<%= RadComboBox2.ClientID %>");   
        
                citiesCombo = $find("<%= RadComboBox3.ClientID %>");  
        
            }  
        
            function LoadCountries(combo, eventArqs)  
        
            {  
        
                // item is an item in the Continent combo.  Use item.get_comboBox() if you want a reference to the combo.  
        
                var item = eventArqs.get_item();  
        
                //countriesCombo.set_text("Loading...");  
        
                citiesCombo.clearSelection();  
        
                //alert("item.get_index: " + item.get_index());  
        
                // if a continent was selected  
        
                if (item.get_index() >= 0)  
        
                {         
        
                    // this will fire the ItemsRequested event of the  
        
                    // countries combobox passing the continentID as a parameter  
        
                    countriesCombo.add_itemsRequested(ItemsLoaded);  
        
                    countriesCombo.requestItems(item.get_value(), false);                                 
        
                }  
        
                else 
        
                {  
        
                    // In this demo, we don't have the -Select a continent- item, so this should never run.  
        
                    // the -Select a continent- item was chosen  
        
                    countriesCombo.set_text(" ");  
        
                    countriesCombo.clearItems();  
        
                    citiesCombo.set_text(" ");  
        
                    citiesCombo.clearItems();  
        
                }  
        
            }  
        
            function LoadCities(combo, eventArqs)  
        
            {  
        
                // item is an item in the Country combo.  Use item.get_comboBox() if you want a reference to the combo.  
        
                var item = eventArqs.get_item();  
        
                //var combo = item.get_comboBox();  
        
                //alert("LoadCities item.get_text(): " + item.get_text());  
        
                //alert("LoadCities item.combo.get_id(): " + combo.get_id());  
        
                //citiesCombo.set_text("Loading...");  
        
                // The OnClientItemsRequested event handler (ItemsLoaded) forces   
        
                // the first item in the newly-filled combobox to be selected.  
        
                citiesCombo.add_itemsRequested(ItemsLoaded);  
        
                // This will fire the ItemsRequested server event of the  
        
                // cities combobox passing the countryID as e.Text.  
        
                citiesCombo.requestItems(item.get_value(), false);                    
        
            }  
        
            function rcbonLoad(sender) {  
        
                // At one point I was told that AllowCustomText had to be true in order  
        
                // to retain the values after postback, and so we used this to make the  
        
                // combobox be readonly, even though AllowCustomText was true. This isn't used now.  
        
                sender.get_inputDomElement().readOnly = "readonly";  
        
            }  
        
            function rcbClientDropDownOpening(sender, eventArgs) {  
        
                // We need this event handler because EnableLoadOnDemand is true, which makes the  
        
                // ItemsRequested server event fire when the user clicks the dropdown.   
        
                // If we don't have this code, which sends the VALUE (int) of the   
        
                // parent combo as the event argument (e.Text) to ItemsRequested, then  
        
                // the event argument (e.Text) will contain the TEXT (char) of this combo box and make  
        
                // LoadCountries/LoadCities blow an error.  
        
                //alert("continentsCombo.get_value: " + continentsCombo.get_value());  
        
                //alert("sender.get_id: " + sender.get_id());  
        
                // Remove the OnClientItemsRequested event handler because ItemsLoaded  
        
                // selects the first item in the list. When we're requesting the items  
        
                // directly from the combo box, rather than its parent, we want whatever   
        
                // was selected to stay selected, rather than forcing the selection of the first item.  
        
                sender.remove_itemsRequested(ItemsLoaded);  
        
                // Request items for this combobox (which makes server ItemsRequested event fire),  
        
                // passing in the value of the parent combobox.  
        
                switch (sender.get_id()) {   
        
                case "RadComboBox3":  
        
                    sender.requestItems(countriesCombo.get_value(), false);  
        
                    break;  
        
                case "RadComboBox2":        //Country   
        
                    sender.requestItems(continentsCombo.get_value(), false);  
        
                    break;  
        
                default:  
        
                    alert("Which combo is this?");  
        
                }  
        
            } //function rcbCitiesDropDownOpening(sender, eventArgs)  
        
            function ItemsLoaded(combo, eventArqs)  
        
            {     
        
                // This code is (should) only be fired for the child combo  
        
                // when the parent combo loaded the child, not when the child is loading itself,  
        
                // because it selects the first item in the combo.  
        
                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.get_items().getItem(0).select();      // This forces get_value to really return the value.   
        
                }  
        
                //combo.showDropDown();  
        
            }  
        
                </script>  
        
                </form>  
        
            </body>  
        
            </html>

C# CodeBehind:

    
            using System;  
        
            using System.Configuration;  
        
            using System.Data;  
        
            using System.Data.SqlClient;  
        
            using System.Diagnostics;  
        
            using Telerik.Web.UI;  
        
            namespace Telerik.ComboboxExamplesCS.MultipleComboBoxes  
        
            {  
        
                public partial class DefaultCS: System.Web.UI.Page  
        
                {  
        
                    protected void Page_Init(object sender, EventArgs e)  
        
                    {  
        
                        Debug.WriteIf(true, "Page_Init", "Page_Init");  
        
                    }  
        
                    protected void Page_Load(object sender, EventArgs e)  
        
                    {  
        
                        Debug.WriteIf(true, "Page_Load", "Page_Load");  
        
                        if (!Page.IsPostBack)  
        
                        {  
        
                            Debug.WriteIf(true, "NOT postback", "Page_Load");  
        
                            //fill the continents combo  
        
                            LoadContinents();  
        
                            LoadCountries(RadComboBox1.SelectedValue);  
        
                            //RadComboBox2.AllowCustomText = true;      // AllowCustomText was supposed to keep the values after postback, but didn't work consistently  
        
                            RadComboBox2.EnableLoadOnDemand = true;  
        
                            LoadCities(RadComboBox2.SelectedValue);  
        
                            //RadComboBox3.AllowCustomText = true;  
        
                            RadComboBox3.EnableLoadOnDemand = true;  
        
                        }  
        
                        Debug.WriteLineIf(true, "Continents SelectedValue: " + RadComboBox1.SelectedValue.ToString() +  
        
                                 " Text: " + RadComboBox1.Text, "Page_Load");  
        
                        Debug.WriteLineIf(true, "Countries SelectedValue: " + RadComboBox2.SelectedValue.ToString() +  
        
                                " Text: " + RadComboBox2.Text, "Page_Load");  
        
                        Debug.WriteLineIf(true, "Cities SelectedValue: " + RadComboBox3.SelectedValue.ToString() +  
        
                                  " Text: " + RadComboBox3.Text, "Page_Load");  
        
                    }  
        
                    protected void LoadContinents()  
        
                    {  
        
                        SqlConnection connection = new SqlConnection(  
        
                        ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);  
        
                        SqlDataAdapter adapter = new SqlDataAdapter("SELECT * FROM Continents ORDER By Name", connection);   
        
                        DataTable dt = new DataTable();  
        
                        adapter.Fill(dt);                         
        
                        RadComboBox1.DataTextField = "Name";  
        
                        RadComboBox1.DataValueField = "ID";  
        
                        RadComboBox1.DataSource = dt;  
        
                        RadComboBox1.DataBind();  
        
                        //insert the first item  
        
                        //RadComboBox1.Items.Insert(0, new RadComboBoxItem("- Select a continent -"));            
        
                        RadComboBox1.SelectedValue = "4";  //Europe  
        
                    }  
        
                    protected void LoadCountries(string continentID)  
        
                    {  
        
                        SqlConnection connection = new SqlConnection(  
        
                        ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);  
        
                        //select a country based on the continentID  
        
                        SqlDataAdapter adapter = new SqlDataAdapter("SELECT * FROM Countries WHERE ContinentID=@ContinentID ORDER By Name", connection);  
        
                        adapter.SelectCommand.Parameters.AddWithValue("@ContinentID", continentID);  
        
                        DataTable dt = new DataTable();  
        
                        adapter.Fill(dt);  
        
                        RadComboBox2.DataTextField = "Name";  
        
                        RadComboBox2.DataValueField = "ID";  
        
                        RadComboBox2.DataSource = dt;  
        
                        RadComboBox2.DataBind();  
        
                        RadComboBox2.SelectedIndex = 0;  
        
                    }  
        
                    protected void LoadCities(string countryID)  
        
                    {  
        
                        SqlConnection connection = new SqlConnection(  
        
                        ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);  
        
                        //select a city based on the countryID  
        
                        SqlDataAdapter adapter = new SqlDataAdapter("SELECT * FROM Cities WHERE CountryID=@CountryID ORDER By Name", connection);  
        
                        adapter.SelectCommand.Parameters.AddWithValue("@CountryID", countryID);  
        
                        DataTable dt = new DataTable();  
        
                        adapter.Fill(dt);  
        
                        RadComboBox3.DataTextField = "Name";  
        
                        RadComboBox3.DataValueField = "ID";  
        
                        RadComboBox3.DataSource = dt;  
        
                        RadComboBox3.DataBind();  
        
                        RadComboBox3.SelectedIndex = 0;  
        
                    }  
        
                    protected void RadComboBox1_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)  
        
                    {  
        
                        LoadContinents();  
        
                    }  
        
                    protected void RadComboBox2_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)  
        
                    {  
        
                        // e.Text is the first parameter sent from requestItems method   
        
                        // invoked in client LoadCountries method   
        
                        LoadCountries(e.Text);  
        
                    }  
        
                    protected void RadComboBox3_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)  
        
                    {  
        
                        // e.Text is the first parameter sent from requestItems method  
        
                        // invoked in client LoadCities method   
        
                        LoadCities(e.Text);  
        
                    }  
        
                }  
        
            }

answered on 01 Dec 2010, 07:31 PM

Beth,

Thanks for the solution. A couple years ago I went with the MS Ajax Control Toolkit on cascading drop-downs because Telerik's ComboBox hasn't really supported this well. I decided to revisit it again and your solution gets me mostly there. I took out the OnClientItemsRequested="ItemsLoaded" in tags since it calls ItemsLoaded more than once. I also couldn't figure out how to get the readonly working correctly, so I'm just ignoring that for now.

I hope that Telerik improves the level of entry into this because this is a very common use case for drop-downs and they have almost completely replaced what the Ajax Control toolkit offers for my uses anyway. (The other is the Collapsible panels, which I'm going to have to just move over to using JQuery because the PanelBar is just too cumbersome to use for server-side stuff with all the FindControl calls.

Thanks again,
Chris

answered on 14 Jan 2011, 12:11 PM

Hello,
I got issues with that demo too...

I also have 3 related comboboxes, just what I want is filter the third combo with the selected value of both the first and the second combo.
How can I get access to the selectedvalue of the first combo and transmit both value when I call load cities?

I cheated as I found that the value of the first combo could be found in the _callbackText property.
I also cheated by combining the two values in one to be able to send the value to the server where I split them.

What is the correct way of:
- get the selected value from the first value when calling LoadCities
- transmit more then one parameter when requesting the combo items

function LoadCities(combo, eventArqs) {

var item = eventArqs.get_item();

citiesCombo.set_text("Chargement...");

// this will fire the ItemsRequested event of the

// cities combobox passing the countryID as a parameter

citiesCombo.requestItems(item.get_value() + ";" + combo._callbackText, false);

}

By the way, Beth, I'm not sure to understand what is all that code you poste here, doing.
When I set EnableLoadOnDemand="true" I get access to the SelectedValue of the combo...
What is your code adding? Just wondering.

Thank you both for your help,
John.

answered on 03 Jun 2011, 02:23 AM

Simon,

I can't get this to work, I need your assistance. I'm trying to implement Beth's approach for related comboboxes. Take a look at my code.

First, I click on ddlAlmacen to get a valid item, ddlZonas is loaded fine. I click btnMostrar to reload a grid on the page. Everything fine so far.

The problem is when I click on ddlZonas to select one of the items, I got the list reloaded and I'm unable to select another item then the one already selected.

All that I need is two related combos to use them as search parameters. Since I need the lists loaded after postback I use EnableLoadOnDemand, then all the problems begin.

I would appreciate your help.

<table>

<tr>

<td style="width:120px">Almacen: </td>

<td style="width:200px">

<telerik:RadComboBox ID="ddlAlmacen" runat="server"

OnClientSelectedIndexChanging="LoadZonas"

>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td style="width:120px">Zonas: </td>

<td style="width:200px">

<telerik:RadComboBox ID="ddlZonas" runat="server"

OnItemsRequested="ddlZonas_ItemsRequested" EnableLoadOnDemand="true"

EnableViewState="True" OnClientDropDownOpening="rcbClientDropDownOpening"

OnClientItemsRequested="ItemsLoaded"

>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td style="width:120px">Material: </td>

<td style="width:200px">

<telerik:RadTextBox ID="txtMaterial" runat="server">

</telerik:RadTextBox>

</td>

</tr>

<tr style="height:30px">

<td colspan="4">

<telerik:RadButton ID="btnMostrar" runat="server" Text="Mostrar Inventario"

onclick="btnMostrar_Click"></telerik:RadButton>

</td>

</tr>

</table>

<script type="text/javascript">

var zonasCombo;

var almacenesCombo;

function pageLoad() {

zonasCombo = $find("<%= ddlZonas.ClientID %>");

almacenesCombo = $find("<%= ddlAlmacen.ClientID %>");

}

function LoadZonas(combo, eventArqs) {

var item = eventArqs.get_item();

if (item.get_index() > 0) {

zonasCombo.add_itemsRequested(ItemsLoaded);

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

}

else {

zonasCombo.set_text(" ");

zonasCombo.clearItems();

}

function rcbClientDropDownOpening(sender, eventArgs) {

sender.remove_itemsRequested(ItemsLoaded);

switch (sender.get_id()) {

case "ddlZonas":

sender.requestItems(almacenesCombo.get_value(), false);

break;

default:

break;

}

function ItemsLoaded(combo, eventArqs) {

if (combo.get_items().get_count() > 0) {

combo.set_text(combo.get_items().getItem(0).get_text());

combo.get_items().getItem(0).highlight();

combo.get_items().getItem(0).select();

}

</script>

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

LoadAlmacenes();

}

protected void LoadAlmacenes()

{

ddlAlmacen.DataTextField = "Nombre";

ddlAlmacen.DataValueField = "AlmacenId";

ddlAlmacen.DataSource = almacenAdapter.GetDataByUbicacion(Convert.ToInt16(Session["UsuarioUbicacionId"]));

ddlAlmacen.DataBind();

ddlAlmacen.Items.Insert(0, new RadComboBoxItem("- Elija Almacen -","-1"));

}

protected void LoadZonas(short almacenId)

{

ddlZonas.DataTextField = "Nombre";

ddlZonas.DataValueField = "ZonaId";

ddlZonas.DataSource = zonaAdapter.GetDataByAlmacen(almacenId);

ddlZonas.DataBind();

ddlZonas.Items.Insert(0, new RadComboBoxItem("Todas", "0"));

ddlZonas.SelectedIndex = 0;

}

protected void ddlAlmacen_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)

{

LoadAlmacenes();

}

protected void ddlZonas_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)

{

short almacen = 0;

if (short.TryParse(e.Text, out almacen))

{

LoadZonas(almacen);

}

protected void btnMostrar_Click(object sender, EventArgs e)

{

gridInventario.DataBind();

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

related combobox values on postback

18 Answers, 1 is accepted