This is a migrated thread and some comments may be shown as answers.

How to set Ajax for Radio Button

3 Answers 575 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Anto (DLL Version : 2008.3.1314.35) asked on 31 Aug 2010, 03:17 PM

Hi All

Have done a page for questionaire.

It works fine.

There are 10 questions with YES or NO option.

Have a scenario: If 9th question answer is NO. Then the two radio button near by 10th question should be enabled false.

Have done it. But the whole page blinks and the scroll bar again goes to the top.

<table style="width: 100%;">

<tr>

<td>

<table cellpadding="0" cellspacing="0">

<tr>

<td>

<asp:RadioButton ID="rbtnq9_2_Y" GroupName="Group9_2" runat="server" Text="Y" />

</td>

<td>

<asp:RadioButton ID="rbtnq9_2_N" GroupName="Group9_2" runat="server" Text="N" />

</td>

</tr>

</table>

</td>

<td>

</td>

</tr>

</table>

protected void btnqfollowup_Click(object sender, EventArgs e)

{

UDFCheckFollowUp(rbtnq9_1_Y, rbtnq9_1_N);

}

public void UDFCheckFollowUp(RadioButton rbtnq9_1_Y, RadioButton rbtnq9_1_N)

{

if (rbtnq9_1_Y.Checked == true)

{

rbtnq9_2_Y.Enabled = true;

rbtnq9_2_N.Enabled = true;

rbtnq9_3_Y.Enabled = true;

rbtnq9_3_N.Enabled = true;

DropDownListRating9_3.Enabled = true;

}

else if (rbtnq9_1_N.Checked == true)

{

rbtnq9_2_Y.Enabled = false;

rbtnq9_2_N.Enabled = false;

rbtnq9_3_Y.Enabled = false;

rbtnq9_3_N.Enabled = false;

DropDownListRating9_3.Enabled = false;

}

else

{

rbtnq9_2_Y.Enabled = false;

rbtnq9_2_N.Enabled = false;

rbtnq9_3_Y.Enabled = false;

rbtnq9_3_N.Enabled = false;

DropDownListRating9_3.Enabled = false;

}

javascript

function RadioClickFollowUp(radioButton)

{

document.getElementById('btnqfollowup').click();

}

Is there any option to rectify this

Thanking You

-Anto

3 Answers, 1 is accepted

answered on 31 Aug 2010, 04:36 PM

Hello Anto,

The provided information is scarce, but generally, the control for the 9th question should be a postback control, which is set as an AJAX initiator and the updated controls should be the two radio buttons.

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

protected void RadComboBox1_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

RadioButton1.Enabled = RadioButton2.Enabled = !(e.Value == "0");

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadComboBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadioButton1" />

<telerik:AjaxUpdatedControl ControlID="RadioButton2" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true"

OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">

<Items>

<telerik:RadComboBoxItem Value="1" Text="Yes" />

<telerik:RadComboBoxItem Value="0" Text="No" />

</Items>

</telerik:RadComboBox>

<br /><br /><br /><br /><br />

<asp:RadioButton ID="RadioButton1" runat="server" Text="Radio 1" />

<br />

<asp:RadioButton ID="RadioButton2" runat="server" Text="Radio 2" />

</form>

</body>

</html>

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 01 Sep 2010, 10:49 AM

Anto,

You should be able to implement your scenario based on the provided information in my previous message. Here are some more guidelines:

1. Set AutoPostBack="true" for the two RadioButtons for question 9.

2. Use the CheckedChanged event handler of the RadioButtons for question 9 to set the Enabled property for the RadioButtons for question 10.

3. Each RadioButton for question 9 should be set as an AJAX initiator and the updated controls should be the RadioButtons for question 10. For example:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="Radio9y">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Radio10y" />

<telerik:AjaxUpdatedControl ControlID="Radio10n" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="Radio9n">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Radio10y" />

<telerik:AjaxUpdatedControl ControlID="Radio10n" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

On a side note, a simple yes/no question can be implemented with one checkbox instead of two radio buttons. In this case the scenario will be even simpler.

Dimo
the Telerik team