[Solved] ComboBox not firing show/hide panel

[Matt]

I have an asp:DropDownListlist control that when a specific value is selected, a panel containing a textbox is shown or hidden using JavaScript. This works OK.

When I replace the asp:DropDownList control with the rad combobox control, the panel is permanently hidden.

I thought it may have someting to do with the onchange event (line 13 below), so I played around, changing that to OnClientSelectedIndexChanged & onclientitemrequested (and other things), but to no avail.

If someone could give me a hand in getting this code to work with the combobox, I would be greatly appreciated.

Here is my server side code:

	protected void FormViewSkillDetails_DataBound(object sender, EventArgs e)
	{
	//START: CODE REQUIREMENTS OF THE INSERT ITEM TEMPLATE OF THE FORM VIEW CONTROL.
	if (FormViewSkillDetails.CurrentMode == FormViewMode.Insert)
	{
	FormViewSkillDetails.Focus(); //place the cursor on the 1st available field of the form view.
	//START: HIDE / SHOW THE INSERT SKILL OWN HEADING DETERMINED BY THE VALUE IN THE DROP DOWN LIST.
	RadComboBox ddl = (RadComboBox)FormViewSkillDetails.FindControl("RadComboBoxSkillTypeInsertDisplay");
	Panel p = (Panel)FormViewSkillDetails.FindControl("PanelSkillOwnHeadingInsertItem");
	RequiredFieldValidator rfv = (RequiredFieldValidator)FormViewSkillDetails.FindControl("RequiredFieldValidatorClientSideSkillOwnHeadingInsert");
	CustomValidator cvss = (CustomValidator)FormViewSkillDetails.FindControl("CustomValidatorServerSideSkillOwnHeadingInsertItemBlank");
	ddl.Attributes.Add("onchange", "JavaScript:selectInputInsertChange('" + ddl.ClientID + "', '" + p.ClientID + "', '" + rfv.ClientID + "', '" + cvss.ClientID + "');");
	//FINISH: HIDE / SHOW THE INSERT SKILL OWN HEADING DETERMINED BY THE VALUE IN THE DROP DOWN LIST.
	}
	//FINISH: CODE REQUIREMENTS OF THE INSERT ITEM TEMPLATE OF THE FORM VIEW CONTROL.
	}

Here is my javascript code:

	<script type="text/javascript">
	function selectInputInsertChange(ddl_id, pan_id, rfv_id, cvss_id) {
	var ddl = document.getElementById(ddl_id);
	var pan = document.getElementById(pan_id);
	var rfv = document.getElementById(rfv_id);
	var cvss = document.getElementById(cvss_id);
	if (ddl.value == "817") {
	pan.style.display = 'inline';
	ddl.focus();
	rfv.enabled = true;
	cvss.enabled = true;
	}
	else {
	pan.style.display = 'none';
	ddl.focus();
	rfv.enabled = false;
	cvss.enabled = false;
	}
	}
	</script>

Here is my aspx code:
(This code is inside a form view insert item template and I have left the asp:DropDownList control in the code for reference)

	<telerik:RadComboBox ID="RadComboBoxSkillTypeInsertDisplay"
	DataSourceID="ObjectDataSourceSkillDetailsSkillType"
	DataTextField="SkillTypeDescriptionIntl"
	DataValueField="SkillTypeID"
	Dir="<%$ Resources:Resource, TextDirection %>"
	Runat="server"
	SelectedValue='<%# Bind("SkillTypeID")%>'
	Skin="Black" />
	<asp:DropDownList ID="DropDownListSkillTypeInsertDisplay"
	CssClass="si"
	DataSourceID="ObjectDataSourceSkillDetailsSkillType"
	DataTextField="SkillTypeDescriptionIntl"
	DataValueField="SkillTypeID"
	onBlur="TBC(this,0)"
	onFocus="TBC(this,1)"
	Runat="Server"
	SkinID="DropDownListStandard" />
	<asp:RequiredFieldValidator ID="RequiredFieldValidatorRadComboBoxSkillTypeInsertDisplay" ControlToValidate="RadComboBoxSkillTypeInsertDisplay" Display="None" EnableClientScript="true" ErrorMessage="<%$ Resources:SkillErrorMessageSkillType.Text %>" InitialValue="0" Runat="Server" SetFocusOnError="true" />
	<asp:Image ID="ImageRequiredSkillTypeInsertItem" BorderWidth="0" ImageUrl="~/Images/icon_required.gif" Runat="Server" />
	<asp:RequiredFieldValidator ID="RequiredFieldValidatorSkillTypeInsert" ControlToValidate="DropDownListSkillTypeInsertDisplay" Display="None" EnableClientScript="true" ErrorMessage="<%$ Resources:SkillErrorMessageSkillType.Text %>" InitialValue="0" Runat="Server" SetFocusOnError="true" />
	</div>
	</div>
	<asp:Panel ID="PanelSkillOwnHeadingInsertItem" CssClass="noFlickering" runat="server" >
	<div class="standardDisplay">
	<div class="prompt_right_insert_20">
	<asp:Label ID="LabelSkillOwnHeadingInsertItemPrompt" Runat="Server" Text="<%$ Resources:SkillPromptOwnSkillType.Text %>" Visible="false" />
	</div>
	<div class="display_left_80">
	<asp:TextBox ID="TextBoxSkillOwnHeadingInsertDisplay" CssClass="si" MaxLength="150" onBlur="TBC(this,0)" onFocus="TBC(this,1)" Runat="Server" SkinID="TextBoxStandard" Text='<%# Bind("SkillOwnHeading")%>' Width="75%" />
	<asp:Image ID="ImageRequiredSkillOwnHeadingInsert" BorderWidth="0" ImageUrl="~/Images/icon_required.gif" Runat="Server" />
	<asp:RequiredFieldValidator ID="RequiredFieldValidatorClientSideSkillOwnHeadingInsert" ControlToValidate="TextBoxSkillOwnHeadingInsertDisplay" Display="None" Enabled="false" ErrorMessage="<%$ Resources:SkillErrorMessageSkillOwnHeading.Text %>" Runat="Server" SetFocusOnError="true" />
	<asp:CustomValidator ID="CustomValidatorServerSideSkillOwnHeadingInsertItemBlank" ControlToValidate="TextBoxSkillOwnHeadingInsertDisplay" Display="None" Enabled="false" ErrorMessage="<%$ Resources:SkillErrorMessageSkillOwnHeading.Text %>" OnServerValidate="CustomValidatorItemBlank_ServerValidate" Runat="Server" SetFocusOnError="true" ValidateEmptyText="True" />
	</div>
	</div>
	</asp:Panel>
	<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtenderSkillOwnHeadingInsert" runat="server" Collapsed="true" CollapsedSize="0" SuppressPostBack="true" TargetControlID="PanelSkillOwnHeadingInsertItem" />

[Yana]

Hello Matt,

I've prepared a simple page based on your code to show you how to use RadComboBox. Please download it and give it a try.

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Matt]

Thank you.