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

RadComboBox not restoring items on postback

3 Answers 333 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);

}

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

RadComboBox not restoring items on postback

3 Answers, 1 is accepted