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

Question

User339582107 posted

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" />

Answer 1

User954302255 posted

can you try this ...

When you are using the RadComboBox

Replace

var ddl = document.getElementById(); 

as

var ddl = <%= RadComboBox1.ClientID %>;(try using this as it is, don't add single quote to the server refrence)

Answer 2

User339582107 posted

Thanks masterpass, but that replacement of code didn't work.

This has me stumped.

Any other suggestions?

Answer 3

User861065282 posted

The event "onchange" is not  a member event of RadCombobox in javascript or in Client event.

I'm error too.

I'm trying:

              ddl.Attributes.Add("onchange", "JavaScript:alert('lmn');")

But it's not work.

who can help.

Answer 4

User-713026820 posted

hi

can you refere these links to do actions in Client Side(Java Script)

http://demos.telerik.com/aspnet-ajax/combobox/examples/programming/clientevents/defaultcs.aspx

http://www.telerik.com/help/aspnet-ajax/combo_clientsidebasics.html

http://www.telerik.com/help/aspnet-ajax/combo_clientsideonclientselectedindexchanged.html