JavaScript not working with RadComboBox (but works with asp DDL)

Reply

Member

15 Points

JavaScript not working with RadComboBox (but works with asp DDL)

Jul 29, 2009 07:54 PM|FattMatt|LINK

I have an asp:DropDownList inside an asp:FormView.

When the user selects the specific value of the ddl, the panel (incorporating a text box) is shown, otherwise the panel is hidden.

This all works as it should.

However, when I attempt to replace the asp:DropDownList with a telerik.RadComboBox, the javascript fails to fire.

Any suggestions?

Here is my code:

CS

protected void FormViewSkillDetails_DataBound(object sender, EventArgs e)
	{
		//START: HIDE / SHOW THE EDIT SKILL OWN HEADING DETERMINED BY THE VALUE IN THE DROP DOWN LIST.
		if (FormViewSkillDetails.CurrentMode == FormViewMode.Edit)
		{
			FormViewSkillDetails.Focus(); //place the cursor on the 1st available field of the form view.


			//DropDownList ddl = (DropDownList)FormViewSkillDetails.FindControl("DropDownListSkillTypeEditDisplay"); //THIS IS THE WORKING ASP/JAVASCRIPT CODE.
			RadComboBox ddl = (RadComboBox)FormViewSkillDetails.FindControl("RadComboBox1"); //THIS IS THE NON-WORKING TELERIK/JAVASCRIPT CODE.
			Panel p = (Panel)FormViewSkillDetails.FindControl("PanelSkillOwnHeadingEditItem");
			RequiredFieldValidator rfv = (RequiredFieldValidator)FormViewSkillDetails.FindControl("RequiredFieldValidatorClientSideSkillOwnHeadingEdit");
			CustomValidator cvss = (CustomValidator)FormViewSkillDetails.FindControl("CustomValidatorServerSideSkillOwnHeadingEditItemBlank");
			ddl.Attributes.Add("onchange", "JavaScript:selectInputEditChange('" + ddl.ClientID + "', '" + p.ClientID + "', '" + rfv.ClientID + "', '" + cvss.ClientID + "');");
		}
		//FINISH: HIDE / SHOW THE EDIT SKILL OWN HEADING DETERMINED BY THE VALUE IN THE DROP DOWN LIST.
	}

JAVASCRIPT

<script type="text/javascript">
	function selectInputEditChange(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>

HTML / ASP / TELERIK

(This code resides inside a form view edit item template - FormViewSkillDetails)

<div class="standardDisplay">
	<div class="prompt_right_insert_20">
		<asp:Label ID="LabelSkillTypeInsertItemPrompt" Runat="Server" Text="<%$ Resources:SkillPromptSkillType.Text %>" />
	</div>
		<div class="display_left_80">
								
			<telerik:RadComboBox ID="RadComboBox1" 
					DataSourceID="ObjectDataSourceSkillDetailsSkillType" 
					DataTextField="SkillTypeDescriptionIntl" 
					 DataValueField="SkillTypeID" 
					Runat="server" 
					Skin="Black" >
			</telerik:RadComboBox>
							
			<asp:DropDownList ID="DropDownListSkillTypeInsertDisplay" 
					CssClass="si" 
					DataSourceID="ObjectDataSourceSkillDetailsSkillType" 
					DataTextField="SkillTypeDescriptionIntl" 
					DataValueField="SkillTypeID" 															 
					Runat="Server" 
					SelectedValue='<%# Bind("SkillTypeID")%>'  />
																
			<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" />