When you use RadioButton control inside templated data bound control i.e. GridView, Repeater, and RadioButton's GroupName property is set because you want radio buttons to be mutually exclusive you may notice that actualy radio buttons aren't mutually exclusive, see kb article this also applies to .net framework 2.0/3.5. As a workaround for this issue I've implemented Ajax Control Extender. I hope this will be useful.
Client Side Behavior:
[code:js]
///
///
///
///
Type.registerNamespace('RadioGroupExtender');
RadioGroupExtender.RadioGroupBehavior = function(element) {
RadioGroupExtender.RadioGroupBehavior.initializeBase(this, [element]);
//
this._groupName = null;
this._clickDelegate = null;
}
RadioGroupExtender.RadioGroupBehavior.Groups = new Array();
RadioGroupExtender.RadioGroupBehavior.prototype = {
initialize : function() {
RadioGroupExtender.RadioGroupBehavior.callBaseMethod(this, 'initialize');
var containsGroup = false;
for(i = 0;i < RadioGroupExtender.RadioGroupBehavior.Groups.length;i++){
if(RadioGroupExtender.RadioGroupBehavior.Groups[i].groupName == this._groupName){
containsGroup = true;
break;
}
}
if(!containsGroup){
Array.add(RadioGroupExtender.RadioGroupBehavior.Groups, { groupName: this._groupName, elements: new Array() });
}
Sys.Debug.trace(RadioGroupExtender.RadioGroupBehavior.Groups.length);
for(i = 0;i < RadioGroupExtender.RadioGroupBehavior.Groups.length;i++){
if(RadioGroupExtender.RadioGroupBehavior.Groups[i].groupName == this._groupName)
{
if(!Array.contains(RadioGroupExtender.RadioGroupBehavior.Groups[i].elements, this))
{
Array.add(RadioGroupExtender.RadioGroupBehavior.Groups[i].elements, this);
}
break;
}
}
var element = this.get_element();
if (this._clickDelegate === null) {
this._clickDelegate = Function.createDelegate(this, this._clickHandler);
}
Sys.UI.DomEvent.addHandler(element, 'click', this._clickDelegate);
},
dispose : function() {
var element = this.get_element();
if (this._clickDelegate) {
Sys.UI.DomEvent.removeHandler(element, 'click', this._clickDelegate);
delete this._clickDelegate;
}
RadioGroupExtender.RadioGroupBehavior.callBaseMethod(this, 'dispose');
},
get_GroupName : function() {
return this._groupName;
},
set_GroupName : function(value) {
this._groupName = value;
},
add_click: function(handler) {
this.get_events().addHandler('click', handler);
},
remove_click: function(handler) {
this.get_events().removeHandler('click', handler);
},
_clickHandler : function(event){
for(i = 0;i < RadioGroupExtender.RadioGroupBehavior.Groups.length;i++){
if(RadioGroupExtender.RadioGroupBehavior.Groups[i].groupName == this._groupName){
for(j = 0;j < RadioGroupExtender.RadioGroupBehavior.Groups[i].elements.length;j++){
var elm = RadioGroupExtender.RadioGroupBehavior.Groups[i].elements[j].get_element();
elm.checked = false;
}
break;
}
}
var element = this.get_element();
element.checked = true;
var h = this.get_events().getHandler('click');
if (h) h(this, Sys.EventArgs.Empty);
}
}
RadioGroupExtender.RadioGroupBehavior.registerClass(
'RadioGroupExtender.RadioGroupBehavior',
AjaxControlToolkit.BehaviorBase);
[/code]
Extender Server Control:
[code:c#]
using System;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.ComponentModel;
using System.ComponentModel.Design;
using AjaxControlToolkit;
[assembly: System.Web.UI.WebResource("RadioGroupExtender.RadioGroupBehavior.js", "text/javascript")]
namespace RadioGroupExtender
{
[Designer(typeof(RadioGroupDesigner))]
[ClientScriptResource("RadioGroupExtender.RadioGroupBehavior", "RadioGroupExtender.RadioGroupBehavior.js")]
[TargetControlType(typeof(RadioButton))]
public class RadioGroupExtender : ExtenderControlBase
{
[ExtenderControlProperty]
[DefaultValue("")]
public string GroupName
{
get
{
return GetPropertyValue("GroupName", "");
}
set
{
SetPropertyValue("GroupName", value);
}
}
}
}
[/code]
If you having problems using code, download source code
here.