RadComboBox not restoring items on postback

4 posts, 0 answers
  1. William
    William avatar
    5 posts
    Member since:
    Jul 2012

    Posted 09 Aug 2012 Link to this post

    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);
            }
        }
    }
  2. Nencho
    Admin
    Nencho avatar
    1796 posts

    Posted 10 Aug 2012 Link to this post

    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.
  3. William
    William avatar
    5 posts
    Member since:
    Jul 2012

    Posted 10 Aug 2012 Link to this post

    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;
  4. Nencho
    Admin
    Nencho avatar
    1796 posts

    Posted 13 Aug 2012 Link to this post

    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.
Back to Top