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

RadComboBox not restoring items on postback

3 Answers 230 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
William
Top achievements
Rank 1
William asked on 09 Aug 2012, 04:51 PM
I've ran into a problem with the RadComboBox that can be simulated on your demo page.
http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx 

If the RadComboBox3 (the cities one) has CheckBoxes="true" added to its declaration then, when a normal postback occurs, the list is not repopulated. I can make it repopulate by putting the Page_Load code into the Page_Init event, however this is not suitable as viewstate from other RadComboBox's will not yet have been restored. Code included below.

Markup:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
<%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
<%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
 
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.ComboboxExamplesCS.MultipleComboBoxes.DefaultCS"
    Language="c#" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head runat="server">
    <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#"></qsf:Header>
        <div id="qsfexWrapper">
            <asp:Label runat="server" AssociatedControlID="RadComboBox1">Continent:</asp:Label>
            <telerik:RadComboBox ID="RadComboBox1"
                runat="server"
                Width="186px"
                CssClass="ComboBox_Continents"
                OnClientSelectedIndexChanging="LoadCountries"
                OnItemsRequested="RadComboBox1_ItemsRequested" />
             
            <asp:Label runat="server" AssociatedControlID="RadComboBox2">Country:</asp:Label>
            <telerik:RadComboBox ID="RadComboBox2"
                runat="server"
                EnableViewState="false"
                Width="186px"
                CssClass="ComboBox_Countries"
                OnClientSelectedIndexChanging="LoadCities"
                OnClientItemsRequested="ItemsLoaded"
                OnItemsRequested="RadComboBox2_ItemsRequested" />
             
            <asp:Label runat="server" AssociatedControlID="RadComboBox3">City:</asp:Label>
            <telerik:RadComboBox ID="RadComboBox3" CheckBoxes="true"
                runat="server"
                EnableViewState="false"
                Width="186px"
                CssClass="ComboBox_Cities"
                OnClientItemsRequested="ItemsLoaded"
                OnItemsRequested="RadComboBox3_ItemsRequested" />
 
            <span class="Button_Submit">
                <telerik:RadButton ID="Button1" runat="server" Text="Explore" OnClick="Button1_Click" />
            </span>
            <asp:Label runat="server" ID="Literal1" CssClass="Label_Result" />
 
        </div>
         
 
        <script type="text/javascript">
//global variables for the countries and cities comboboxes
var countriesCombo;
var citiesCombo;
 
function pageLoad()
{
    // initialize the global variables
    // in this event all client objects
    // are already created and initialized
    countriesCombo = $find("<%= RadComboBox2.ClientID %>");
    citiesCombo = $find("<%= RadComboBox3.ClientID %>");
}
 
function LoadCountries(sender, eventArgs)
{  
    var item = eventArgs.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();
    }
}
 
function LoadCities(sender, eventArgs)
{  
    var item = eventArgs.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);                 
}
 
function ItemsLoaded(sender, eventArgs)
{  
    if (sender.get_items().get_count() > 0) {
        // pre-select the first item
        sender.set_text(sender.get_items().getItem(0).get_text());
        sender.get_items().getItem(0).highlight();
    }
 
    sender.showDropDown();
}
        </script>
 
        <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
    </form>
</body>
</html>

Code:
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using Telerik.Web.UI;
 
namespace Telerik.ComboboxExamplesCS.MultipleComboBoxes
{
    public partial class DefaultCS: System.Web.UI.Page
    {
        private const string MessageTemplate = "You chose to explore the city of {0} in {1}, {2}";
 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
                // Fill the continents combo.
                LoadContinents();
            else if (!Page.IsCallback)
            {
                // On regular postbacks restore the items of the related ComboBoxes.
                // Their selected items will be automatically restored from their ClientState.
                LoadCountries(RadComboBox1.SelectedValue);
                LoadCities(RadComboBox2.SelectedValue);
            }
        }
 
        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 -"));           
        }
 
        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();
        }
 
        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();
        }
 
        protected void RadComboBox1_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
        {
            LoadContinents();
        }
 
        protected void RadComboBox2_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
        {
            // e.Text is the first parameter of the requestItems method
            // invoked in LoadCountries method
            LoadCountries(e.Text);
        }
 
        protected void RadComboBox3_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
        {
            // e.Text is the first parameter of the requestItems method
            // invoked in LoadCities method
            LoadCities(e.Text);
        }
 
        protected void Button1_Click(object sender, EventArgs e)
        {
            Literal1.Text = string.Empty;
 
            if (RadComboBox1.SelectedIndex > 0)
                Literal1.Text = string.Format(MessageTemplate, RadComboBox3.Text, RadComboBox2.Text, RadComboBox1.Text);
        }
    }
}

3 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 10 Aug 2012, 08:24 AM
Hi William,

The CheckBox functionality relies on the fact that RadComboBox's items are available server-side, whereas when load on demand is being used they are not. This is mentioned in the following help article regarding the CheckBox functionality.

Regards,
Nencho
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.
0
William
Top achievements
Rank 1
answered on 10 Aug 2012, 10:53 AM
On postback how can I access the comboboxes checked indices then? I can't get to them via RadComboBox3.Checkeditems as this is null. I can read the data manually from the Request.Form collection, but surely this isn't by design?

I've included the code below that I'm using to repopulate the controls state on a standard postback.

foreach (var i in Regex.Match(Request.Form["ctl00_MainContent_Controller1_ddlHospitals_ClientState"], @"(?<=checkedIndices"":\[)[\d,]+").Value.Split(','))
                    ddlHospitals.Items[int.Parse(i)].Checked = true;
0
Nencho
Telerik team
answered on 13 Aug 2012, 11:54 AM
Hello William,

It seems that I could not explain properly in my previous post- by default the checkbox functionality is not compatible with the load on demand mechanism, like it's explained in the help article here. One possible workaround would be to store the checked items of the RadComboBox in a HiddenField and using them to rebind the control, after a postback.


Kind regards,
Nencho
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.
Tags
ComboBox
Asked by
William
Top achievements
Rank 1
Answers by
Nencho
Telerik team
William
Top achievements
Rank 1
Share this question
or