Radio Buttons in a Repeater Control

1025 views
Skip to first unread message

Chuck Hartman

unread,
Mar 23, 2004, 6:03:48 PM3/23/04
to
Is there a workaround or fix for the problem described by KB article
Q316495?

BUG: Radio Buttons Are Not Mutually Exclusive When Used in a Repeater Server
Control

--
Chuck Hartman


Steven Cheng[MSFT]

unread,
Mar 24, 2004, 3:10:30 AM3/24/04
to
Hi Chuck,

Thanks for posting here. As for the BUG you mentioned in ASP.NET server
control. I think we can use some clientside javascript to workaround it.
Since we can specify the GroupName for the RadioButton Control and it is
contained in a certain DataBind List control( such as Repeater, DataList or
DataGrid), though when rendered to client, the html source will be changed
because of the INamingContainer control will make all the control's id and
name unique, but they have some similiar features. Thus, we can make use of
this, first we loop through all the controls with the specified type(radio
or checkbox or...) , then use Regex to compare their name, if is what we
want, then uncheck it. At last, we check the current select one. For
example , here is a js function to perform the function:
function SetUniqueRadioButton(nameregex, current)
{
re = new RegExp(nameregex);

for(i = 0; i < document.forms[0].elements.length; i++)
{

elm = document.forms[0].elements[i]

if (elm.type == 'radio')
{
if (re.test(elm.name))
{
elm.checked = false;
}
}
}

current.checked = true;
}

And we register the "onclick" client event for the RadioButtons in the
certain Repeater(or DataList or..) such as:
private void rptMain_ItemDataBound(object sender,
System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
string script = "SetUniqueRadioButton('rptMain.*MyGroup',this)";
RadioButton rb = (RadioButton)e.Item.FindControl("rbSelect");
rb.Attributes.Add("onclick",script);
}

To make it clearly, here is a demo page I've made ,please refer to it if
you have anything unclear:

==================aspx page====================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>RadioColumn</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<script language="javascript">
function SetUniqueRadioButton(nameregex, current)
{
re = new RegExp(nameregex);

for(i = 0; i < document.forms[0].elements.length; i++)
{

elm = document.forms[0].elements[i]

if (elm.type == 'radio')
{
if (re.test(elm.name))
{
elm.checked = false;
}
}
}

current.checked = true;
}

</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<asp:Repeater id="rptMain" runat="server">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem,"name") %>
:
<asp:RadioButton ID="rbSelect" Runat="server"
GroupName="MyGroup"></asp:RadioButton>
<br />
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
</body>
</HTML>

==============code behind page class=============
public class RadioColumn : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Repeater rptMain;

private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
Bind_Data();
}
}

protected void Bind_Data()
{
DataTable tb = new DataTable();
tb.Columns.Add("index");
tb.Columns.Add("name");
tb.Columns.Add("description");

for(int i=1;i<=10;i++)
{
DataRow row = tb.NewRow();
row["index"] = i.ToString();
row["name"] = "Name" + i.ToString();
row["description"] = "Description" + i.ToString();
tb.Rows.Add(row);
}

rptMain.DataSource = tb;
rptMain.DataBind();
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.rptMain.ItemDataBound += new
System.Web.UI.WebControls.RepeaterItemEventHandler(this.rptMain_ItemDataBoun
d);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void rptMain_ItemDataBound(object sender,
System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
string script = "SetUniqueRadioButton('rptMain.*MyGroup',this)";
RadioButton rb = (RadioButton)e.Item.FindControl("rbSelect");
rb.Attributes.Add("onclick",script);
}
}

======================================================
Hope helps.


Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx

Chuck Hartman

unread,
Mar 25, 2004, 11:13:35 AM3/25/04
to
Steven,

Thanks. This looks like it works.

Chuck

"Steven Cheng[MSFT]" <v-sc...@online.microsoft.com> wrote in message
news:w5qH8dX...@cpmsftngxa06.phx.gbl...

Jeroen Klooster

unread,
Apr 7, 2004, 6:13:45 PM4/7/04
to
Hi all!

Setting the groupname with javascript works ok for me.
In my case however, I also want the radiobutton to autopostback when
the checked state is changed. This works fine too, but it doesn't keep
the viewstate of the radiobutton. When I check a radiobutton, a
roundtrip occurs, and when the page is loaded again, the radiobutton
is unchecked.
Any idea how to solve this issue?

Regards,
Jeroen Klooster

Alvin Bruney [MVP]

unread,
Apr 7, 2004, 6:51:24 PM4/7/04
to
Well, it's the age old problem of dynamic controls being added too late in
the web control hierarchy to participate in view state. The easiest way is
to recreate it. Otherwise you will have to add it very early in the
webcontrol hierarchy.

--
Regards,
Alvin Bruney [ASP.NET MVP]
Got tidbits? Get it here...
http://tinyurl.com/27cok
"Jeroen Klooster" <jeroenk...@hotmail.com> wrote in message
news:77726f87.04040...@posting.google.com...

Jeroen Klooster

unread,
Apr 8, 2004, 3:24:39 AM4/8/04
to
Thanks for your reply!

I don't think that is the issue, because when i do not set the "name"
attribute with javascript for these radiobuttons, the viewstate wíll
be kept. Any other clues what might be causing this?

Kind regards,
Jeroen

Steven Cheng[MSFT]

unread,
Apr 9, 2004, 8:32:50 PM4/9/04
to
Hi Jeroen,

I think this is because the "name" attribute of the ASP.NET rendered server
controls has its meaning to mapping its parent control(container controls)
so that at serverside it can help identify it , also may help mapping its
viewstate info. If we manually modify it at client, these control's
viewstate association at serverside will be corrupted just like if we
change the "__VIEWSTAET" hidden name's name at client via javascirpt, the
whole page's viewstate will be corrupted. Do you think so? Thanks.

Jeroen Klooster

unread,
Apr 13, 2004, 7:46:46 AM4/13/04
to
Hi Steven,

Thanks for your reply. I figured it would be something like that. So
this is a bug you HAVE to work around. I do not use the javascript
currently: when a radiobutton is checked, the page will autopostback
and I will bind the repeater which contains the radiobutton controls
again. This assures there is only one radiobutton checked.
Two downsides:
- It needs another query to the database.
- (picky but true), before autopostback, after radiobuttoncontrol is
checked, for a brief moment, two radiobuttons will be checked.

But I guess this will be the only way.

Regards,
Jeroen

mzo...@gmail.com

unread,
Oct 2, 2018, 7:44:34 AM10/2/18
to
THANK YOU VERY MUCH
Reply all
Reply to author
Forward
0 new messages