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

RadComboBox not restoring items on postback

3 Answers 417 Views

ComboBox

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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;

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.