Asked by:
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:
CSprotected 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" />
Wednesday, July 29, 2009 7:54 PM
All replies
-
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)
Thursday, July 30, 2009 12:37 AM -
User339582107 posted
Thanks masterpass, but that replacement of code didn't work.
This has me stumped.
Any other suggestions?Thursday, July 30, 2009 6:05 PM -
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.
Friday, March 12, 2010 1:59 AM -
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
Friday, March 12, 2010 2:07 AM