RadGrid > EditFormType=WebUserControl > Dynamic DropDownLists

[Chris Tallos]

I am using a RadGrid with an EditForm of Type WebUserControl.  My User Control contains a form which has three dropdowns (Country, StateRegion, City).  When a user selects Country then I query and return a list of StateRegion which would then be bound to a RadComboBox for StateRegion.  Then when the user selects StateRegion I would query and return a list of City which would then be bound to a RadComboBox for cities.  Please help me understand how to do this as it appears as though the SelectedIndexChanged and/or TextChanged methods are not being called in my user control, only the Page events are getting called.

[Princy]

Hi Chris Tallos,

Go through the following online demo which demonstrates on how comboboxes on a page can interact with each other using client-side methods and requesting the items on demand. I'm sure this is close to what you are looking for:
Related ComboBoxes

Thanks
Princy.

[Chris Tallos]

Princy,

Thank you for the example. I was able to put this in a seperate project from my own and it ran perfectly.  However, when I implemented this inside my user control which is the Editform for my RadGrid it fails with "Microsoft JScript runtime error: 'LoadStates' is undefined". Here is my code for the UserControl. The codebehind is not far off from what you have shown me.  The trick is this control is an editform for a radgrid. I think it has something to do with containers.

 

 

	<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
	<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ModalAddUpdate.ascx.cs"
	Inherits="Admin_Controls_ModalAddUpdate" %>
	<script type="text/javascript">
	//global variables for the countries and cities comboboxes
	var countryCombo;
	var stateCombo;
	var citiesCombo;
	function pageLoad() {
	debugger;
	// initialize the global variables
	// in this event all client objects
	// are already created and initialized
	countryCombo = $find("<%= rcbValidateCountry.ClientID %>");
	stateCombo = $find("<%= rcbStateRegion.ClientID %>");
	citiesCombo = $find("<%= rcbCity.ClientID %>");
	}
	function LoadStates(combo, eventArqs) {
	debugger;
	var item = eventArqs.get_item();
	stateCombo.set_text("Loading...");
	citiesCombo.clearSelection();
	// if a continent is selected
	if (item.get_index() > 0) {
	// this will fire the ItemsRequested event of the
	// states combobox passing the countryId as a parameter
	stateCombo.requestItems(item.get_value(), false);
	}
	else {
	// the -Select a continent- item was chosen
	stateCombo.set_text(" ");
	stateCombo.clearItems();
	citiesCombo.set_text(" ");
	citiesCombo.clearItems();
	}
	}
	function LoadCities(combo, eventArqs) {
	debugger;
	var item = eventArqs.get_item();
	var val = countryCombo.get_value();
	citiesCombo.set_text("Loading...");
	// this will fire the ItemsRequested event of the
	// cities combobox passing the stateId as a parameter
	citiesCombo.requestItems(item.get_value(), false);
	}
	function ItemsLoaded(combo, eventArqs) {
	if (combo.get_items().get_count() > 0) {
	// pre-select the first item
	combo.set_text(combo.get_items().getItem(0).get_text());
	combo.get_items().getItem(0).highlight();
	}
	//combo.showDropDown();
	}
	</script>
	<table>
	<tr style="height: 25px">
	<td style="width: 250px;">
	<asp:Label ID="lblAddressLineOne" runat="server" Text="Address Line One:"></asp:Label>
	</td>
	<td width="5px">
	&nbsp;
	</td>
	<td align="left">
	<asp:TextBox ID="txtAdressLineOne" runat="server" Width="300px"></asp:TextBox><asp:RequiredFieldValidator
	ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator"
	ControlToValidate="txtAdressLineOne">*</asp:RequiredFieldValidator>
	</td>
	</tr>
	<tr style="height: 25px">
	<td style="width: 250px;">
	<asp:Label ID="lblAddressLineTwo" runat="server" Text="Address Line Two:"></asp:Label>
	</td>
	<td width="5px">
	&nbsp;
	</td>
	<td align="left">
	<asp:TextBox ID="txtAddressLineTwo" runat="server" Width="300px"></asp:TextBox>
	</td>
	</tr>
	<tr style="height: 25px">
	<td style="width: 250px;">
	<asp:Label ID="lblValidateCountry" runat="server" Text="Country:"></asp:Label>
	</td>
	<td width="5px">
	&nbsp;
	</td>
	<td align="left">
	<telerik:RadComboBox ID="rcbValidateCountry" runat="server" DataTextField="ValidateCountryCommonName"
	DataValueField="ValidateCountryId" OnClientSelectedIndexChanging="LoadStates"
	OnItemsRequested="rcbValidateCountry_ItemsRequested">
	</telerik:RadComboBox>
	<asp:RequiredFieldValidator ControlToValidate="rcbValidateCountry" ID="RequiredFieldValidator4"
	runat="server" ErrorMessage="RequiredFieldValidator">*</asp:RequiredFieldValidator>
	</td>
	</tr>
	<tr style="height: 25px">
	<td style="width: 250px;">
	<asp:Label ID="lblValidateStateRegion" runat="server" Text="State/Region:"></asp:Label>
	</td>
	<td width="5px">
	&nbsp;
	</td>
	<td align="left">
	<telerik:RadComboBox ID="rcbStateRegion" runat="server" Width="205px" DataTextField="ValidateProvinceStateRegionName"
	DataValueField="ValidateProvinceStateRegionId" OnClientSelectedIndexChanging="LoadCities"
	OnClientItemsRequested="ItemsLoaded" OnItemsRequested="rcbStateRegion_ItemsRequested">
	</telerik:RadComboBox>
	<asp:RequiredFieldValidator ControlToValidate="rcbStateRegion" ID="RequiredFieldValidator2"
	runat="server" ErrorMessage="RequiredFieldValidator">*</asp:RequiredFieldValidator>
	</td>
	</tr>
	<tr style="height: 25px">
	<td style="width: 250px;">
	<asp:Label ID="lblCity" runat="server" Text="City:"></asp:Label>
	</td>
	<td width="5px">
	&nbsp;
	</td>
	<td align="left">
	<telerik:RadComboBox ID="rcbCity" runat="server" Width="205px" DataTextField="ValidateWorldCityFormalName"
	DataValueField="ValidateWorldCityId" OnClientItemsRequested="ItemsLoaded" OnItemsRequested="rcbCity_ItemsRequested">
	</telerik:RadComboBox>
	<asp:RequiredFieldValidator ControlToValidate="rcbCity" ID="RequiredFieldValidator3"
	runat="server" ErrorMessage="RequiredFieldValidator">*</asp:RequiredFieldValidator>
	</td>
	</tr>
	<tr style="height: 25px">
	<td style="width: 250px;">
	<asp:Label ID="lblZipPostal" runat="server" Text="Zip/Postal Code:"></asp:Label>
	</td>
	<td width="5px">
	&nbsp;
	</td>
	<td align="left">
	<telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" Mask="#####-####"
	TextWithLiterals="-" Width="125px">
	</telerik:RadMaskedTextBox>
	</td>
	</tr>
	<tr>
	<td colspan="3" style="text-align: right;">
	<asp:Button ID="cmdSave" runat="server" Text="Save" />
	<asp:Button ID="cmdCancel" runat="server" CausesValidation="false" Text="Cancel" />
	</td>
	</tr>
	</table>

 

 

 

 

 

[Shaishav Karnani]

Hi,

I am also facing similar issue when using it in a Edit Mode of RadGrid. Edit Mode calls User Control.

Please advice.

Cheers,
Shaishav

[Kiran]

I am facing this issue too... any soln you found for this?

[Kiara]

Guys, I found code library project here which does what you are aiming for with EditItemTemplate. In my case I tested the code with WebUserControl RadGrid edit form and it worked as advertised as well.

Kiara