locked
JavaScript not working with RadComboBox (but works with asp DDL) RRS feed

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