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

RadComboBox and ItemRequested Event Problem

14 Answers 690 Views

ComboBox

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

Asa'ad asked on 21 Feb 2013, 10:50 AM

Hi All

I have three rad combo box in my form, countries, states and cities.

When a country is selected its states should be loaded into the states list and so when a state is selected its cities should be loaded into the cities list.

i want to do this using client side APIs

after searching your form i found an solution and apply it as the following code:-

my form source

<table>

<tr>

<td class="RC1" style="width:10%;">

<asp:Label ID="lblCountry" runat="server" ></asp:Label>

</td>

<td style="width:90%;" class="RC2">

<telerik:RadComboBox ID="lstCountries" Runat="server" Width="200px"

Filter="StartsWith" onclientdropdownopening="DropDownOpening" ValidationGroup="ValAddressInfo" OnClientSelectedIndexChanged="loadStates">

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="reqCountry" runat="server"

ControlToValidate="lstCountries" CssClass="Validator" ValidationGroup="ValAddressInfo">*</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td class="RC1" style="width:20%;" >

<asp:Label ID="lblStates" runat="server" ></asp:Label>

</td>

<td class="RC2" style="width:80%;">

<telerik:RadComboBox ID="lstStates" Runat="server"

Width="200px"

Filter="StartsWith" onclientdropdownopening="DropDownOpening"

OnClientSelectedIndexChanged="loadCities"

onitemsrequested="lstStates_ItemsRequested" OnClientItemsRequesting="statesItemRequesting" EnableLoadOnDemand ="true" >

<CollapseAnimation Type="OutQuint" Duration="200" />

</telerik:RadComboBox>

</tr>

<tr>

<td class="RC1" style="width:20%;">

<asp:Label ID="lblCities" runat="server" ></asp:Label>

</td>

<td class="RC2" style="width:80%;">

<telerik:RadComboBox ID="lstCities" Runat="server" Width="200px" Filter="StartsWith" onclientdropdownopening="DropDownOpening" onitemsrequested="lstCities_ItemsRequested" OnClientItemsRequesting="citiesItemRequesting" EnableLoadOnDemand ="true" >

</telerik:RadComboBox>

</td>

</tr>

</table>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript" language="javascript">

function loadStates(sender, args) {

var listStates = $find("<%=lstStates.ClientID %>");

var item = args.get_item();

if (item.get_index() > 0)

{

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

}

else

{

}

function statesItemRequesting(sender, args) {

var lst1 = $find("<%=lstCountries.ClientID %>");

var context = args.get_context();

context["country_code"] = lst1.get_selectedItem().get_value();

}

function loadCities(sender, args) {

var listCities = $find("<%=lstCities.ClientID %>");

var item = args.get_item();

if (item.get_index() > 0) {

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

}

else {

}

function citiesItemRequesting(sender, args) {

var lst1 = $find("<%=lstCountries.ClientID %>");

var lst2 = $find("<%=lstStates.ClientID %>");

var context = args.get_context();

context["country_code"] = lst1.get_selectedItem().get_value();

context["state_code"] = lst2.get_selectedItem().get_value();

}

</script>

</telerik:RadScriptBlock>

in the code behind

protected void lstStates_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

int iCountryCode = Convert.ToInt32(Convert.ToInt32(e.Context["country_code"]));

bindList(iCountryCode,0,lstStates,2);

}

protected void lstCities_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

int iCountryCode = Convert.ToInt32(Convert.ToInt32(e.Context["country_code"]));

int iStateCode = Convert.ToInt32(Convert.ToInt32(e.Context["state_code"]));

bindList(iCountryCode, iStateCode, lstCities, 3);

}

and the bindList is where i get the data from data base tables and fill it in the lists.

all are ok,,,,

BUT

i noticed that when i try to open the states combo box for example, it sticks then i should click any where in the form then try again to open it again so the items appear...

all functions are called and executed and the lists are filled...

but what is the reson for this behaviour?
this can ne be acceptable since the user may think that the list is stuck!!!

please help

asaad

14 Answers, 1 is accepted

answered on 26 Feb 2013, 11:09 AM

Hello,

Your observations are absolutely correct and the described behavior is caused by initiating a load-on-demand callback request using the following method of RadComboBox client-side object - requestItems(string text, Boolean). The second Boolean parameter instructs the RadComboBox to append the new items (true) or clear items (false). In your case setting that Boolean parameter to false causes clearing the new items. When user clicks again on your RadComboBox the OnItemsRequested server-side event is fired again and populates the items properly.
I would recommend setting the second Boolean parameter to true instead to false in order to append the child items populated from the OnItemsRequested server-side event handler.
Here you may find more information about RadComboBox client-side programming.

Regards,
Boyan Dimitrov
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.

answered on 06 Mar 2013, 06:56 AM

exception.png

Hi Boyan,,,
thank you for your post which is very helpful....

i changed the parameter to true as you suggested and the behavior is correct now....

but i noticed that the states list append the new items each time the requestItem event is called to the already existing ones and this is because of the true value of the second parameter in the call of this function

listStates.requestItems(item.get_value(),

true);

and i need the list to be cleared at first then to be filled by the new items!!!!
so i called the the following functions

listStates.clearItems();

listStates.clearSelection();
before calling the requestItems method above!!!
and also i called this line

listStates.set_text(

'(select)');

after it ==>

function loadStates(sender, args) {

var listStates = $find("<%=lstStates.ClientID %>");

var listCities = $find("<%=lstCities.ClientID %>");

var item = args.get_item();

if (item.get_index() > 0) {

listStates.clearItems();

listStates.clearSelection();

listStates.requestItems(item.get_value(), true);

listStates.set_text('(select)');

listCities.clearItems();

}

else

{

}

function loadCities(sender, args) {

var listCities = $find("<%=lstCities.ClientID %>");

var item = args.get_item();

if (item.get_index() > 0) {

listCities.clearItems();

listCities.clearSelection();

listCities.requestItems(item.get_value(), true);

listCities.set_text('(select)');

}

else {

}

and the behavior becomes as my expectation.What i need also and didn't find a good solution is how to clear the cities list when filling the states list; and this is because when selecting a new country its states will be loaded in the list of states and the cities list should be empty until a state is selected!!!

i tried to call the clearItems and clearSelection for the cities list after calling this line
listStates.requestItems(item.get_value(), true);

but at runtime when click first the cities list it gives me an exception as the attached image file...
but if i choose a state then click the cities list it will stick first then when i open it again it loads the items....

the behavior is not good as this,,,

what should i do !!!!
my form should fill the states list according to country then if a state is selected the cities list will be filled according to the country and state....so this is why i need to clear cities list whenever the states list is filled.

please help...
asa'ad

answered on 11 Mar 2013, 11:49 AM

RadComboBoxClearItems.zip

Hello,

I would suggest using the RadComboBox EmptyMessage property and clear items and selection of the specific RadComboBox controls as shown in the attached project. The empty message will be displayed each time when your custom logic clears the current RadComboBox selection.

Regards,
Boyan Dimitrov
the Telerik team

answered on 12 Mar 2013, 09:21 AM

Hi Boyan again

thanks for your comment...

but still the exception occurred if not country and state are selected and i click the cities list.

so i updated the default page as you can see in the atttached file....

and the exception doesn't appear now,,,,,BUT

i noticed that if item1 in country list was the selected at first the states are loaded correctly and if i choosed another country item2 for example the states list will loaded again too which is correct behaviour BUT if i select the item1 from the country list again nothing happens the old states items remains as before,, the

OnClientSelectedIndexChanged of the country list has not been fires!!!

is this a bug in the IE8 or what?

please help...

thanks

asa'ad...

answered on 12 Mar 2013, 09:24 AM

<%@ Page Language="C#" AutoEventWireup="true" Inherits="Default" Codebehind="Default.aspx.cs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript" language="javascript">

function loadStates(sender, args) {

var txt = $find("<%=txtCountrySelected.ClientID %>");

txt.set_value('Yes');

var listStates = $find("<%=lstStates.ClientID %>");

var listCities = $find("<%=lstCities.ClientID %>");

var item = args.get_item();

if (item.get_index() > 0) {

listStates.clearItems();

listStates.clearSelection();

listCities.clearItems();

listCities.clearSelection();

listStates.requestItems(item.get_value(), true);

}

else {

}

function statesItemRequesting(sender, args) {

var lst1 = $find("<%=lstCountries.ClientID %>");

var txt = $find("<%=txtCountrySelected.ClientID %>");

if (txt.get_value() == 'Yes')

{

var context = args.get_context();

context["country_code"] = lst1.get_selectedItem().get_value();

}

else

args.set_cancel(true);

}

function loadCities(sender, args) {

var txt = $find("<%=txtCountrySelected.ClientID %>");

txt.set_value('Yes');

var txt1 = $find("<%=txtStateSelected.ClientID %>");

txt1.set_value('Yes');

var listCities = $find("<%=lstCities.ClientID %>");

var item = args.get_item();

if (item.get_index() > 0) {

listCities.clearItems();

listCities.clearSelection();

listCities.requestItems(item.get_value(), true);

}

else {

}

function citiesItemRequesting(sender, args) {

var lst1 = $find("<%=lstCountries.ClientID %>");

var lst2 = $find("<%=lstStates.ClientID %>");

var txt = $find("<%=txtCountrySelected.ClientID %>");

var txt1 = $find("<%=txtStateSelected.ClientID %>");

if (txt.get_value() == 'Yes' && txt1.get_value() == 'Yes')

{

var context = args.get_context();

context["country_code"] = lst1.get_selectedItem().get_value();

context["state_code"] = lst2.get_selectedItem().get_value();

}

else

args.set_cancel(true);

}

</script>

</telerik:RadScriptBlock>

<table>

<tr>

<td class="RC1" style="width:10%;">

<asp:Label ID="lblCountry" runat="server" ></asp:Label>

</td>

<td style="width:90%;" class="RC2">

<telerik:RadComboBox ID="lstCountries" EmptyMessage="Select Coutry..." Runat="server" Width="200px"

Filter="StartsWith" _onclientdropdownopening="DropDownOpening" ValidationGroup="ValAddressInfo" OnClientSelectedIndexChanged="loadStates">

<Items>

<telerik:RadComboBoxItem Text="Item 1" Value="1" />

<telerik:RadComboBoxItem Text="Item 2" Value="2" />

<telerik:RadComboBoxItem Text="Item 3" Value="3" />

</Items>

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="reqCountry" runat="server"

ControlToValidate="lstCountries" CssClass="Validator" ValidationGroup="ValAddressInfo">*</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td class="RC1" style="width:20%;" >

<asp:Label ID="lblStates" runat="server" ></asp:Label>

</td>

<td class="RC2" style="width:80%;">

<telerik:RadComboBox ID="lstStates" Runat="server" EmptyMessage="Select State..."

Width="200px"

Filter="StartsWith" _onclientdropdownopening="DropDownOpening"

OnClientSelectedIndexChanged="loadCities"

onitemsrequested="lstStates_ItemsRequested" OnClientItemsRequesting="statesItemRequesting" EnableLoadOnDemand ="true" >

<CollapseAnimation Type="OutQuint" Duration="200" />

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="reqState" runat="server"

ControlToValidate="lstStates" CssClass="Validator" ValidationGroup="ValAddressInfo">*</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td class="RC1" style="width:20%;">

<asp:Label ID="lblCities" runat="server" ></asp:Label>

</td>

<td class="RC2" style="width:80%;">

<telerik:RadComboBox ID="lstCities" EmptyMessage="Select City..." Runat="server" Width="200px" Filter="StartsWith" _onclientdropdownopening="DropDownOpening" onitemsrequested="lstCities_ItemsRequested" OnClientItemsRequesting="citiesItemRequesting" EnableLoadOnDemand ="true" >

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="reqCities" runat="server"

ControlToValidate="lstCities" CssClass="Validator" ValidationGroup="ValAddressInfo">*</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td colspan="2">

<telerik:RadTextBox ID="txtCountrySelected" runat="server" Text="No">

</telerik:RadTextBox>

<telerik:RadTextBox ID="txtStateSelected" runat="server" Text="No">

</telerik:RadTextBox>

<telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" ValidationGroup="ValAddressInfo" >

</telerik:RadButton>

</td>

</tr>

</table>

</form>

</body>

</html>

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

using System.Data.SqlClient;

using System.Drawing;

public partial class Default : System.Web.UI.Page

{

protected void lstStates_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

for (int i = 0; i < 3; i++)

{

lstStates.Items.Add(new RadComboBoxItem("Item" + i, i.ToString()));

}

protected void lstCities_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

for (int i = 0; i < 3; i++)

{

lstCities.Items.Add(new RadComboBoxItem("Item" + i, i.ToString()));

}

i couldn't attached the files,i post the code above...

thanks

Accepted

answered on 15 Mar 2013, 08:04 AM

Hello,

Your observations are absolutely correct and the reason for the described behavior is caused by the conditional statement in your loadStates client-side function implementation and specifically -

if (item.get_index() > 0) {

Actually your fist item has index 0, so your code execution will not step into your code located inside that code block, because first item's index is not greater than 0. An easy and convenient way of solving this behavior would to modify your conditional statement as follows:

if (item.get_index() >= 0) {

I would recommend updating loadCities client-side function, since it has same conditional statement for checking the current item's index.

Hope that this will be helpful.

Regards,
Boyan Dimitrov
the Telerik team

answered on 21 Mar 2013, 12:02 PM

Hi Boyan

thank you for your suggestion and the filling operation of the related combobox are correct now...

BUT i have a save button on my form so when clicked,, the the selecetd values of countries, states and cities will be saved server side in a database tables.

i noticed that the selected value of the state and city is always -1 which the value of the first item (Select One);;; i mean the real selected value of the state and city is not reflected correctly in code behinde?

is is related to post back issues and shall i should an ajax manager and if so what is the benfits from using client side filling of these related comboboxes?

please help...

thanks
asaad...

answered on 22 Mar 2013, 04:12 PM

RadComboClientLoadOnDemand.zip

Hello,

Since I am not able to reproduce that unusual behavior at my side, I have attached a sample project to this response that implements very similar scenario. Please try to reproduce the described issue and let me know how can I replicate it locally. This way I will be able to inspect that behavior and be more helpful.

Regards,
Boyan Dimitrov
the Telerik team

answered on 27 Mar 2013, 08:11 AM

Hi Boyan again...

i updated my form as your sample form and the above case disappeared.

i did some more modification on the form as my form expected to work and the following happned:-

1- If the page is not post back; the first country will be selected by default; its first state too and this state's first city will selected too.

2- If you choose another country, state and city and clicked the button; the label text has the correct selected values of state and city.

3- but i opened the states and cities lists; the old values of each one will be shown; the old states and the old cities that had been loaded in the first time when the page is not post back?????!!!!

4- i don't know the reason for this; but this happens after clicking the button.

5- Please send me your feed back as soon as possible; this is very important.

this is the form codes:-

<%@ Page Language="C#" AutoEventWireup="true" Inherits="RadComboClientSideLoadOnDemand" Codebehind="RadComboClientSideLoadOnDemand.aspx.cs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript" language="javascript">

function loadStates(sender, args) {

var txt = $find("<%=txtCountrySelected.ClientID %>");

txt.set_value('Yes');

var listStates = $find("<%=lstStates.ClientID %>");

var listCities = $find("<%=lstCities.ClientID %>");

var item = args.get_item();

if (item.get_index() >= 0) {

listStates.clearItems();

listStates.clearSelection();

listCities.clearItems();

listCities.clearSelection();

listStates.requestItems(item.get_value(), true);

}

else {

}

function statesItemRequesting(sender, args) {

var lst1 = $find("<%=lstCountries.ClientID %>");

var txt = $find("<%=txtCountrySelected.ClientID %>");

if (txt.get_value() == 'Yes') {

var context = args.get_context();

context["country_code"] = lst1.get_selectedItem().get_value();

}

else

args.set_cancel(true);

}

function loadCities(sender, args) {

var txt = $find("<%=txtCountrySelected.ClientID %>");

txt.set_value('Yes');

var txt1 = $find("<%=txtStateSelected.ClientID %>");

txt1.set_value('Yes');

var listCities = $find("<%=lstCities.ClientID %>");

var item = args.get_item();

if (item.get_index() >= 0) {

listCities.clearItems();

listCities.clearSelection();

listCities.requestItems(item.get_value(), true);

}

else {

}

function citiesItemRequesting(sender, args) {

var lst1 = $find("<%=lstCountries.ClientID %>");

var lst2 = $find("<%=lstStates.ClientID %>");

var txt = $find("<%=txtCountrySelected.ClientID %>");

var txt1 = $find("<%=txtStateSelected.ClientID %>");

if (txt.get_value() == 'Yes' && txt1.get_value() == 'Yes') {

var context = args.get_context();

if (lst1.get_selectedItem() != null) {

context["country_code"] = lst1.get_selectedItem().get_value();

}

if (lst2.get_selectedItem() != null) {

context["state_code"] = lst2.get_selectedItem().get_value();

}

else

args.set_cancel(true);

}

</script>

</telerik:RadScriptBlock>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="600px" Width="300px">

<table>

<tr>

<td class="RC1" style="width:10%;">

<asp:Label ID="lblCountry" runat="server" ></asp:Label>

</td>

<td style="width:90%;" class="RC2">

<telerik:RadComboBox ID="lstCountries" EmptyMessage="Select Country..." Runat="server" Width="200px"

Filter="StartsWith" _onclientdropdownopening="DropDownOpening" ValidationGroup="ValAddressInfo" OnClientSelectedIndexChanged="loadStates">

<Items>

<telerik:RadComboBoxItem Text="Country 1" Value="1" />

<telerik:RadComboBoxItem Text="Country 2" Value="2" />

<telerik:RadComboBoxItem Text="Country 3" Value="3" />

</Items>

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="reqCountry" runat="server"

ControlToValidate="lstCountries" CssClass="Validator" ValidationGroup="ValAddressInfo">*</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td class="RC1" style="width:20%;" >

<asp:Label ID="lblStates" runat="server" ></asp:Label>

</td>

<td class="RC2" style="width:80%;">

<telerik:RadComboBox ID="lstStates" Runat="server" EmptyMessage="Select State..."

Width="200px"

Filter="StartsWith" _onclientdropdownopening="DropDownOpening"

OnClientSelectedIndexChanged="loadCities"

onitemsrequested="lstStates_ItemsRequested" OnClientItemsRequesting="statesItemRequesting" EnableLoadOnDemand ="true" >

<CollapseAnimation Type="OutQuint" Duration="200" />

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="reqState" runat="server"

ControlToValidate="lstStates" CssClass="Validator" ValidationGroup="ValAddressInfo">*</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td class="RC1" style="width:20%;">

<asp:Label ID="lblCities" runat="server" ></asp:Label>

</td>

<td class="RC2" style="width:80%;">

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="reqCities" runat="server"

ControlToValidate="lstCities" CssClass="Validator" ValidationGroup="ValAddressInfo">*</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td colspan="2">

<telerik:RadTextBox ID="txtCountrySelected" runat="server" Text="No">

</telerik:RadTextBox>

<telerik:RadTextBox ID="txtStateSelected" runat="server" Text="No">

</telerik:RadTextBox>

<telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" ValidationGroup="ValAddressInfo" OnClick="RadButton1_Click">

</telerik:RadButton>

<asp:Label ID="Label1" runat="server"></asp:Label>

</td>

</tr>

</table>

</telerik:RadAjaxPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"

Skin="Default">

</telerik:RadAjaxLoadingPanel>

</form>

</body>

</html>

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

using System.Data.SqlClient;

using System.Drawing;

public partial class RadComboClientSideLoadOnDemand : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

lstCountries.FindItemByValue("1").Selected = true;

for (int i = 0; i < 3; i++)

{

lstStates.Items.Add(new RadComboBoxItem("Country_1_State_" + i, i.ToString()));

}

lstStates.FindItemByValue("0").Selected = true;

for (int i = 0; i < 3; i++)

{

lstCities.Items.Add(new RadComboBoxItem("State_0_City_" + i, i.ToString()));

}

lstCities.FindItemByValue("0").Selected = true;

}

protected void lstStates_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

lstStates.Items.Clear();

if (e.Context["country_code"].ToString() == "1")

{

for (int i = 0; i < 3; i++)

{

lstStates.Items.Add(new RadComboBoxItem("Country_1_State_" + i, i.ToString()));

}

else if (e.Context["country_code"].ToString() == "2")

{

for (int i = 0; i < 3; i++)

{

lstStates.Items.Add(new RadComboBoxItem("Country_2_State_" + i, i.ToString()));

}

else if (e.Context["country_code"].ToString() == "3")

{

for (int i = 0; i < 3; i++)

{

lstStates.Items.Add(new RadComboBoxItem("Country_3_State_" + i, i.ToString()));

}

protected void RadButton1_Click(object sender, EventArgs e)

{

Label1.Text = "Selected state value: " + lstStates.SelectedValue + " and selected city value: " + lstCities.SelectedValue;

}

protected void lstCities_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

lstCities.Items.Clear();

int iCountryCode = Convert.ToInt32(Convert.ToInt32(e.Context["country_code"]));

int iStateCode = Convert.ToInt32(Convert.ToInt32(e.Context["state_code"]));

if (iStateCode == 0)

{

for (int i = 0; i < 3; i++)

{

lstCities.Items.Add(new RadComboBoxItem("State_0_City_" + i, i.ToString()));

}

else if (iStateCode == 1)

{

for (int i = 0; i < 3; i++)

{

lstCities.Items.Add(new RadComboBoxItem("State_1_City_" + i, i.ToString()));

}

else if (iStateCode == 2)

{

for (int i = 0; i < 3; i++)

{

lstCities.Items.Add(new RadComboBoxItem("State_2_City_" + i, i.ToString()));

}

answered on 28 Mar 2013, 12:25 PM

Hello,

I have prepared a sample project using the provide markup and code behind, but I am not able to replicate the described behavior. Here you can watch the project behavior at my side and specifically opening the state and city RadComboBox controls after the button was clicked.
When I select a different country, the states RadComboBox is populated with the correct items based on country selection and same pattern is applied for the cities RadComboBox. Could you please explain how exactly the old values are loaded?

Regards,
Boyan Dimitrov
the Telerik team

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 and ItemRequested Event Problem

14 Answers, 1 is accepted