ASP.NET with VB. ListBox adding and removing items - asp.net

Hiya i'm creating a web form and i want a user to be able to make certain selections and then add the selections to a text box or listbox.
Basically i want them to be able to type someone name in a text box ... check some check boxes and for it up date either a text for or a list box with the result on button click...
e.g.
John Smith Check1 Check3 Check5
any help would be great .. thanks

I will show you a basic example of a TextBox, Button and a ListBox. When the button is clicked the text will be added to the listbox.
// in your .aspx file
<asp:TextBox ID="yourTextBox" runat="server" /><br />
<asp:Button ID="yourButton" runat="server" Text="Add" OnClick="yourButton_Click" /><br />
<asp:ListBox ID="yourListBox" runat="server" /><br />
// in your codebehind .cs file
protected void yourButton_Click(object sender, EventArgs e)
{
yourListBox.Items.Add(yourTextBox.Text);
}
If you want to use javascript / jquery to do this your could just omit the server side event and just add the following function to the Click property of the button.
$(document).ready(function()
{
$("#yourButton").click(function()
{
$("#yourListBox").append(
new Option($('input[name=yourTextBox]').val(),
'Add value here if you need a value'));
});
});

Lets Suppose you have a gridview which is being populated on Searching happened using Textbox.
Gridivew got some checkboxes and after selection of these checkboxes you wanted to add into listbox
Here is the javascript which will help you to add into listbox.
Please modify as per your requirement,I have less time giving you only a javascript.
function addItmList(idv,valItem) {
var list =document.getElementById('ctl00_ContentPlaceHolder1_MyList');
//var generatedName = "newItem" + ( list.options.length + 1 );
list.Add(idv,valItem);
}
function checkitemvalues()
{
var gvET = document.getElementById("ctl00_ContentPlaceHolder1_grd");
var target = document.getElementById('ctl00_ContentPlaceHolder1_lstIControl');
var newOption = window.document.createElement('OPTION');
var rCount = gvET.rows.length;
var rowIdx = 0;
var tcount = 1;
for (rowIdx; rowIdx<=rCount-1; rowIdx++) {
var rowElement = gvET.rows[rowIdx];
var chkBox = rowElement.cells[0].firstChild;
var cod = rowElement.cells[1].innerText;
var desc = rowElement.cells[2].innerText;
if (chkBox.checked == true){
addItmList(rowElement.cells[1].innerText,rowElement.cells[2].innerText);
}
}
}

Related

How we can group radio buttons inside a repeater?

I have a radio button inside a repeater as follow.
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<asp:RadioButton ID="rbtnCityName" runat="server" Text='<%# Bind("CityName") %>'
GroupName="Cities" />
</ItemTemplate>
</asp:Repeater>
Now problem is that how I can select a single radio button across multiples.
Even though I have given a groupname for radio button, I am not able to select any of them.
<script type="text/javascript" language="javascript">
function fnCheckUnCheck(objId)
{
var grd = document.getElementById("<%= rpt.ClientID %>");
var rdoArray = grd.getElementsByTagName("input");
for(i=0;i<=rdoArray.length-1;i++)
{
if(rdoArray[i].type == 'radio')
{
if(rdoArray[i].id != objId)
{
rdoArray[i].checked = false;
}
}
}
}
</script>
call this function on click of radiobutton
onclick="fnCheckUnCheck(this.id);"
the best solution for me was to simlpy create an html input control inside the repeater:
<input type="radio" name="yourGroup" value='<%# Eval("Value") %>'/>
got the solution from Radio button repeater problem solved
Just adding another solution in case someone else is still running into this in 2020...
It does use JavaScript.
If you inspect the radio button in the browser's dev tools you'll see that the RadioButton control is rendered as a span with an input inside it, just like other input controls such as CheckBox.
So this:
<asp:RadioButton runat="server" class="my-class" name="myGroup" value="myGroupOption1" />
Ends up as something like this:
<span name="myGroup" class="my-class">
<input id="(long generated id)" type="radio" name="(generated name)" value="myRadioButton">
</span>
Notice I didn't use ASP.NET's GroupName attribute. If you use that it will end up as a name attribute on the input, replaced with the generated value that is causing problems here. Just use the regular name attribute and it gets moved to the span.
Now, to fix the names in the browser you can do something like this. I used JQuery, but you could accomplish the same with pure JavaScript.
$(document).ready(function () {
$('.my-class').each(function () { // find all the spans
if ($(this).attr('name')) {
var groupName = $(this).attr('name'); // save the group name
$(this).children('input').each(function () { // find the input
$(this).attr('name', groupName); // fix the name attribute
});
}
});
});
Now the radio buttons are grouped properly.
So add a unique CSS class to your radio buttons and run that function on page load.
$('#SubmitAnswers').click(function () {
var names = [];
$('input[type="radio"]').each(function () {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
});
// Goes through all the names and make sure there's at least one checked.
for (name in names) {
var radio_buttons = $("input[name='" + name + "']");
if (radio_buttons.filter(':checked').length == 0) {
// alert('none checked in ' + name);
$('#Group'+ name).css("visibility", "visible");
}
else {
// If you need to use the result you can do so without
// another (costly) jQuery selector call:
var val = radio_buttons.val();
$('#Group' + name).css("visibility", "hidden");
}
}
});

Telerik RadWindow Javascript return values to ASP.NET

I have a parent page that launches a telerik radwindow and passes it an argument.
Once the radwindow is done processeing the value, I need it to return it to the parent page, and I would like the parent page to have access to this value in my code behind page.
I have tried to pass the value to a hidden field on my page and then trigger a page refresh and my code behind watches to see if the value is working.
I can't seem to get this to work. I get the return value in the parent javascript, but i can't get it from my hidden field from the code behind.
I even get it into the text box like i need to but, when i find the Hidden field in the codebehind, there is no value set.
Where I have set alerts, I am getting the values displayed as i need to.
I suspect that the reason I can't see my return value in the code behind file, is that when the page is refreshed, I am getting a new page and not only causing a post back.
And is there not a better way i can do this.
here is my code in the parent page:
Parent ASPX:
<script type="text/javascript">
function OpenWnd() {
var oWnd = radopen(null, "RadWindow1");
}
function OnClientShow(oWnd) {
//Create a new Object to be used as an argument to the radWindow
var arg = new Object();
//Using an Object as a argument is convenient as it allows setting many properties.
arg.text = document.getElementById("TextBox1").value;
//Set the argument object to the radWindow
oWnd.Argument = arg;
}
function ClientCallBackFunction(radWindow, returnValue) {
//check if a value is returned from the dialog
if (returnValue.newtext) {
document.getElementById("Hidden1").value = returnValue.newtext;
alert("HiddenValue: " + document.getElementById("Hidden1").value);
}
}
</script>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div>
<telerik:RadWindowManager ID="RadWindowManager2" runat="server">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server" OnClientShow="OnClientShow" ClientCallBackFunction="ClientCallBackFunction"
NavigateUrl="Dialog2.aspx" />
</Windows>
</telerik:RadWindowManager>
</div>
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
<input type="button" value="Send content to dialog page" onclick="OpenWnd()" />
<p>
<input id="Hidden1" type="hidden" runat="server" />
</p>
</form>
Parent Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
HtmlInputHidden hidden = (HtmlInputHidden)Page.FindControl("Hidden1");
if (IsPostBack && !string.IsNullOrEmpty(hidden.Value))
{
//Code Here
}
}
Here is my Dialog code:
Dialog ASPX:
<script type="text/javascript">
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
function ConfigureDialog() {
//Get a reference to the radWindow wrapper
var oWindow = GetRadWindow();
//Obtain the argument
var oArg = oWindow.Argument;
//Use the argument
var oArea = document.getElementById("TextBox1");
oArea.value = oArg.text;
}
function SendAndClose() {
var oWindow = GetRadWindow();
//Get current content of text area
var arg = new Object();
arg.newtext = document.getElementById("TextBox1").value;
oWindow.Close(arg);
RefreshParentPage();
}
function RefreshParentPage() {
GetRadWindow().BrowserWindow.location.reload();
alert("RefreshParentPage");
}
</script>
Thanks for all the help
Ian
You are doing the following
GetRadWindow().BrowserWindow.location.reload();
But that wont cause a postback it will simply reload the parent page, you need to cause a potback.
You could try adding a button to the parent form with the style set 'display:none', and handling the click event in the code behind, you can fire this button off from your js code.
In Parent Page :
<asp:Button runat="server" id="btnClick" Style="display:none" OnClick="btnClick_Click"/>
protected void btnClick_Click(object sender,EventArgs e)
{
string val = this.Hidden1.Value; //Code goes here
}
You can invoke from your javascript like this (non jQuery), place this in your callback
document.getElementById('<%= btnClick.ClientID').click();
A better approach would be this on the aspx side:
<%=this.ClientScript.GetPostBackEventReference(new System.Web.UI.PostBackOptions(btnClick))%>

Check box in gridview with button

In button click event how can I check all check boxes in gridview?
I dont need header checkbox.
Please provide your knowledge
awaiting your response....
Thanks
<input id="btncheckall" type="button" value="select all" />
add click event handler to button above (with jQuery)
<script type="text/javascript">
$(function(){
$("#btncheckall").click(function(){
$("#gridview input:checkbox").attr("checked","checked");
});
});
</script>
or you can use checkbox.
this is a checkbox outside gridview
<input id="checkall" type="checkbox" />
add change event handler to checkbox above (with jQuery)
<script type="text/javascript">
$(function(){
$("#checkall").change(function(){
$("#gridview input:checkbox").val( $(this).val() );
});
});
</script>
Assign a class to all your grid row check boxes and use the below script to get them all.
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
And you've to call it this way:
var messages = getElementsByClass("childbox");
Assign a class childbox to grid row child box.
document.getElementById("parentbox").onclick = function() {
for(var index=0; index < messages.length; index++) {
// prompt the content of the div
//message[index].checked = (message[index].checked) ? false : true;
}
}
you'll assign the parentbox class to the parent checkbox which is in grid header.
You don't need to define them - parentbox and childbox.
C#
Let's say you have a check all button
<asp:CheckBox ID="chkSelectAll" runat="server" Text="SelectAll"
AutoPostBack="true" OnCheckedChanged="chkSelectAll_CheckedChanged" />
and in that click event you would do something like:
protected void chkSelectAll_CheckedChanged(object sender, EventArgs e)
{
CheckBox chk; //assuming your gridview id=GridView1
foreach (GridViewRow rowItem in GridView1.Rows)
{
chk = (CheckBox)(rowItem.Cells[0].FindControl("chk1"));
chk.Checked =((CheckBox)sender).Checked;
}
}
javascript approach:
<script language="javascript">
function SelectAllCheckboxes(spanChk){
// Added as ASPX uses SPAN for checkbox
var oItem = spanChk.children;
var theBox= (spanChk.type=="checkbox") ?
spanChk : spanChk.children.item[0];
xState=theBox.checked;
elm=theBox.form.elements;
for(i=0;i<elm.length;i++)
if(elm[i].type=="checkbox" &&
elm[i].id!=theBox.id)
{
//elm[i].click();
if(elm[i].checked!=xState)
elm[i].click();
//elm[i].checked=xState;
}
}
</script>
Checkbox field as so:
<asp:CheckBox ID="chkAll" runat="server" Text="SelectAll"
onclick="javascript:SelectAllCheckboxes(this);" />
Hai Dominic,
If you want javascript look at this
https://web.archive.org/web/20210304130956/https://www.4guysfromrolla.com/articles/052406-1.aspx#postadlink
or
Check box in gridview with button
Jquery can make this easier. Hook into the external boxes onslected event, and inside there iterate the grid boxes selecting them all.
This is a great example of the evils of asp.net and how it's use by new developers really cripples them into thinking that all processing and interaction takes place server side, and all sorts of crazy hacks take place to maintain this illusion. It's backwards and insane.
Try this:
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<HeaderTemplate><asp:CheckBox ID="SelectUnSelectAllCheckBox" runat="server" /></HeaderTemplate>
<ItemTemplate><asp:CheckBox ID="SelectCheckBox" runat="server" /></ItemTemplate>
</asp:TemplateField>
<!-- Other columns are omitted -->
</Columns>
</asp:GridView>
<script type="text/javascript">
$(document).ready(function(e) {
$("input[id$='SelectUnSelectAllCheckBox']").change(function() {
$("input[id$='SelectCheckBox']").attr("checked", this.checked);
});
});
</script>
If you're using jquery you could use the $('input:checkbox') selector so something like
<script type="text/javascript">
$(function() {
$('#NameOfButtonToSelectAll').click( function() {
$('input:checkbox').each( function() {
this.checked = !this.checked;
});
});
});
</script>
Kindly check it out and let me know when you got it worked.
Using Javascript :
http://wiki.asp.net/page.aspx/281/check-uncheck-checkboxes-in-gridview-using-javascript/
Using Serverside Script: (VB.Net)
https://web.archive.org/web/20211020145756/https://aspnet.4guysfromrolla.com/articles/052406-1.aspx
Using jQuery:
$('#SelectAll').click(function(){
var checked = $(this).is(':checked');
var allCheckboxes = $('table input:checkbox');
if(checked)
allCheckboxes.attr('checked','checked');
else
allCheckboxes.removeAttr('checked');
});
You probably want to change the selectors, assuming you have a class for your grid and checkbox.

ASP.NET + jQuery + Dynamically Created HyperLink controls

I have an ASP.NET application that uses jQuery. My ASP.NET application dynamically generates some HyperLink elements based on some values in a database. When a user clicks one of these HyperLink elements, I want to display a jQuery dialog box that allows the user to edit the text of the HyperLink. I have this part working.
When a user clicks the "Save" button, I need to read the values of the HyperLink elements and save them back to the database. Currently, I get the initial values of the HyperLink elements. However, I cannot get any modified values. How do I get the values that were provided by the user? I have provided my .aspx and .aspx.cs code here:
test
Report:
<div id="recommendDialog" title="Number">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>Number</td></tr>
<tr><td><input id="optionName" type="text" /></td></tr>
</table>
</div>
<asp:Button ID="saveButton" runat="server" Text="Save" OnClick="saveButton_Click" />
</div>
</form>
<script type="text/javascript">
var editingID = null;
$("#recommendDialog").dialog({
autoOpen: false,
height: 200,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'OK': function() {
var newValue = $("#optionName").val();
if (editingID != null) {
$(editingID).attr("name", newValue);
$(editingID).html(newValue);
}
$(this).dialog('close');
}
},
close: function() {
}
});
function update_Click(link) {
editingID = "#" + link.id;
$("#optionName").val(link.name);
$('#recommendDialog').dialog('open');
}
</script>
Here is my code-behind:
public partial class _Default : System.Web.UI.Page
{
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
AddHyperlinks();
}
protected void Page_Load(object sender, EventArgs e)
{}
protected void saveButton_Click(object sender, EventArgs e)
{
foreach (TableCell cell in reportTable.Rows[0].Cells)
{
HyperLink h = (HyperLink)(cell.Controls[0]);
string newValue = h.Attributes["name"];
// Save value to database here. newValue does not show
// changed values.
Console.WriteLine(newValue);
}
}
private void AddHyperlinks()
{
TableRow row = new TableRow();
for (int i = 1; i < 11; i++)
{
HyperLink hyperlink = new HyperLink();
hyperlink.NavigateUrl = "#";
hyperlink.Text = i.ToString();
hyperlink.Attributes.Add("id", "h" + i);
hyperlink.Attributes.Add("name", i.ToString());
hyperlink.Attributes.Add("onclick", "update_Click(this);");
AddLinkButtonToRow(hyperlink, row);
}
reportTable.Rows.Add(row);
}
private void AddLinkButtonToRow(HyperLink linkButton, TableRow row)
{
TableCell cell = new TableCell();
cell.Controls.Add(linkButton);
row.Cells.Add(cell);
}
}
What you're trying to do isn't possible that way. You create links every time the page is created. Although you change the name of these links in JavaScript, these values are not posted back to you.
On Sumbit, only form elements get posted back to the server (<input>s, for example), not <a> elements, so your server doesn't "know" the changes were made.
Secondly, even if you'll change the <a>s to <input>s, you still have a problem: you won't be able to find these values in reportTable.Rows[0].Cells as you expect. Normally asp.net will fill these values correctly, even for dynamically generated controls, but not here - since you've changed their names! Asp.net cannot rebind these values.
So, what should you do? One option is to add an hidden field to every cell.
On AddLinkButtonToRow, add the following:
HtmlInputHidden hidden = new HtmlInputHidden();
hidden.ID = "hidden" + linkButton.ID;
hidden.Name = hidden.ID; //so it will be posted!
hidden.Style["display"] = "none"; //better to have a CssClass
Using jQuery, which you seem to know, change the values of these input fields, not their names (something like $(editingID).parent().find(":hidden")).
Next, you might not see the values on the controls, but you can find them at Request.Form["hiddenh1"] ... Request.Form["hiddenh11"] - All input fields will names will be posted, and you know their names this time.
I'm not sure where or what "ReportTable" and it's tablecells are, but I'm guessing your problem is that you're manipulating the value of some tags on the client using jQuery, and expecting them to be posted back to the server?
This won't work. The page got rendered with known values of your HyperLink controls in ViewState. Since tags are not input types, they will not post a value back to the server on a postback, and ViewState will always re-initialize them with their original values. Any manipulation must be done on the server side.
I would recommend doing what ScottE suggests and do your update with jquery ajax.

ASP.NET RadioButton messing with the name (groupname)

I got a templated control (a repeater) listing some text and other markup. Each item has a radiobutton associated with it, making it possible for the user to select ONE of the items created by the repeater.
The repeater writes the radiobutton setting its id and name generated with the default ASP.NET naming convention making each radiobutton a full 'group'. This means all radiobuttons are independent on each other, which again unfortunately means I can select all radiobuttons at the same time. The radiobutton has the clever attribute 'groupname' used to set a common name, so they get grouped together and thus should be dependant (so I can only select one at a time). The problem is - this doesn't work - the repeater makes sure the id and thus the name (which controls the grouping) are different.
Since I use a repeater (could have been a listview or any other templated databound control) I can't use the RadioButtonList. So where does that leave me?
I know I've had this problem before and solved it. I know almost every ASP.NET programmer must have had it too, so why can't I google and find a solid solution to the problem? I came across solutions to enforce the grouping by JavaScript (ugly!) or even to handle the radiobuttons as non-server controls, forcing me to do a Request.Form[name] to read the status. I also tried experimenting with overriding the name attribute on the PreRender event - unfortunately the owning page and masterpage again overrides this name to reflect the full id/name, so I end up with the same wrong result.
If you have no better solution than what I posted, you are still very welcome to post your thoughts - at least I'll know that my friend 'jack' is right about how messed up ASP.NET is sometimes ;)
ASP.NET Tip: Using RadioButton Controls in a Repeater
This is the code for the JavaScript 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;
}
The code is linked to the Repeater through the ItemDataBound event. For it to work properly, you need to know the name of the Repeater control, as well as the GroupName you're assigning to the RadioButtons. In this case, I'm using rptPortfolios as the name of the Repeater, and Portfolios as the group name:
protected void rptPortfolios_ItemDataBound(object sender,
RepeaterItemEventArgs e)
{
if (e.Item.ItemType != ListItemType.Item && e.Item.ItemType
!= ListItemType.AlternatingItem)
return;
RadioButton rdo = (RadioButton)e.Item.FindControl("rdoSelected");
string script =
"SetUniqueRadioButton('rptPortfolios.*Portfolios',this)";
rdo.Attributes.Add("onclick", script);
}
REF: http://www.codeguru.com/csharp/csharp/cs_controls/custom/article.php/c12371/
Google-fu: asp.net radiobutton repeater problem
Indeed an unfortunate consequence of the id mangling. My take would be creating a - or picking one of the many available - custom control that adds support for same name on the client.
Vladimir Smirnov has already created a great custom control that resolves this issue. We have been using the GroupRadioButton in our projects and it has been working perfectly with radio buttons created inside of a repeater and others outside the repeater all being a part of the same group.
I use jQuery script:
<script type="text/javascript">
function norm_radio_name() {
$("[type=radio]").each(function (i) {
var name = $(this).attr("name");
var splitted = name.split("$");
$(this).attr("name", splitted[splitted.length - 1]);
});
};
$(document).ready(function () {
norm_radio_name();
});
// for UpdatePannel
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
norm_radio_name();
});
</script>
I know this is an old post, but here's what I ended up doing with a listview. My listview is bound in VB codebehind, so I'm not sure if this will work well with a repeater, but I imagine it could be similar.
What I did was handle the OnCheckChanged event of the radiobuttons with a function that unselected any other radio buttons. Then I looked for the selected radio button when I navigated away from the page.
This solution avoids JavaScript and jQuery, and ignores the GroupName issue completely. It's not ideal, but it functions as (I) expected. I hope it's helpful for others.
Markup:
<asp:ListView ID="lvw" runat="server">
<LayoutTemplate>`
<table>
<th>Radio</th>
<tr id="itemPlaceholder"></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><asp:RadioButton ID="rdbSelect" runat="server" AutoPostBack="true"
OnCheckedChanged="rdbSelect_Changed"/></td>
</tr>
</ItemTemplate>
</asp:ListView>
Code:
Protected Sub rdbSelect_Changed(ByVal sender As Object, ByVal e As System.EventArgs)
Dim rb1 As RadioButton = CType(sender, RadioButton)
For Each row As ListViewItem In lvw.Items
Dim rb As RadioButton = row.FindControl("rdbSelect")
If rb IsNot Nothing AndAlso rb.Checked Then
rb.Checked = False
End If
Next
rb1.Checked = True
End Sub
And then when the Submit button is clicked:
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
For Each row As ListViewItem In lvw.Items
Dim rb As RadioButton = row.FindControl("rdbSelect")
Dim lbl As Label
If rb IsNot Nothing AndAlso rb.Checked = True Then
lbl = row.FindControl("StudentID")
Session("StudentID") = lbl.Text
End If
Next
Response.Redirect("~/TransferStudent.aspx")
End Sub
This might be a little better..
I have a usercontrol which is essentially a set of radiobuttons inside a repeater, each instance of the usercontrol has a public property called FilterTitle, which is unique per instance.
add these two properties to your radiobutton replacing FilterTitle with your own public property name
onclick='<%# "$(\"input[name$=btngroup_" + FilterTitle + "]\").removeAttr(\"checked\"); $(this).attr(\"checked\",\"checked\");" %>' GroupName='<%# "btngroup_" + FilterTitle %>'
more simply..
onclick="$('input[name$=btngroup1]').removeAttr('checked'); $(this).attr('checked','checked');" GroupName="btngroup1"
Here's a pure Javascript solution for the sake of completeness.
Just add this onclick attribute to your RadioButton element(replace GroupName with your RadioButton's GroupName):
<asp:RadioButton ... GroupName="GroupName" onclick="SelectRadioButton('GroupName$',this)" ... />
And include this Javascript in your page:
<script type="text/javascript">
function SelectRadioButton(regexPattern, selectedRadioButton)
{
regex = new RegExp(regexPattern);
for (i = 0; i < document.forms[0].elements.length; i++)
{
element = document.forms[0].elements[i];
if (element.type == 'radio' && regex.test(element.name))
{
element.checked = false;
}
}
selectedRadioButton.checked = true;
}
</script>
Create a Custom Control and override UniqueID to the listview UniqueID + GroupName
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MYCONTROLS
{
[ToolboxData("<{0}:MYRADIOBUTTON runat=server></{0}:MYRADIOBUTTON >")]
public class MYRADIOBUTTON : RadioButton
{
public override string UniqueID
{
get
{
string uid = base.UniqueID;
//Fix groupname in lisview
if (this.Parent is ListViewDataItem && GroupName != "")
{
uid = this.Parent.UniqueID;
uid = uid.Remove(uid.LastIndexOf('$'));
uid += "$" + GroupName;
}
return uid;
}
}
}
}
It’s a custom control that inherits from RadioButton (public class MYRADIOBUTTON : RadioButton).
If you do nothing in the class you get a normal RadioButton. Overriding the UniqueId you can change the logic for how the name attribute is rendered.
To still keep the name unique to other controls on the page (outside the listview) you can get the UniqueId from the ListView and add GroupName to that and add it to the RadioButton.
This fix the problem with Grouping RadioButtons on different rows in a listview. You may want to add some more logic with a property to turn this feature on/off so it behaves like a normal RadioButton.
I know this question is bit old, but I think it might help somebody, therefore posting my solution to this issue.
This issue has 2 parts:
To prevent selection of more than one radio button at a time.
To know which radio button was clicked in server-side code.
I had the similar issue with Radio button in Repeater. I found partial solution here:
Simple fix for Radio Button controls in an ASP.NET Repeater using jQuery
Please read the above article to get the understanding of the issue. I referred this article and it was good help. As mentioned above this issue has two parts, first is to prevent selection of more than one radio button at a time. Second, to know which radio button was clicked in server-side code. The solution posted in above article worked for me only for the first part. However code written there as well as updates to solution posted there did not work for me. So I had to modify it a bit to get it working. Here is my solution.
I wanted to create poll with Vote button. Name of my radio button (ID) is PollGroupValue with Groupname set to PollGroup in a repeater. Remember Groupname attribute in ASP.net is rendered as name attribute in generated html. My code is as follows:
<script type="text/javascript">
/* Step-01: */
$(document).ready(function () {
/* Step-02: */
$("[name*='PollGroup']").each(function () {
$(this).attr('ci-name', $(this).attr('name'));
});
/* Step-03: */
$("[name*='PollGroup']").attr("name", $("[name*='PollGroup']").attr("name"));
$('#Poll1_BtnVote').click(function (e) {
/* Step - 04: */
if ($("[name*='PollGroup']").filter(':checked').length == 0) {
alert('Please select an option.');
e.preventDefault();
}
/* Step - 05: */
$("[name*='PollGroup']").each(function () {
$(this).attr('name', $(this).attr('ci-name'));
});
});
});
Step 1:
Whenever a radio button is used in repeater, its groupname gets changed, since asp.net changes it so as to make it unique. Therefore each radio button gets different groupname (name attribute in client-side generated markup). Due to this, user is able to select all of the options at the same time. This issue is resolved by using jquery code as explained by subsequent comments.
Step 2:
This block of code creates a new custome attribute called ci-name and copies original value of name attribute into this new custom attribute. This process repeats for every radio button in poll. This step would help us in later step.
Step 3:
This block of code sets the value of name attributes of all radio buttons in poll to the value of name attribute of first radio button. This step prevents user from selecting more than one option at a time.
Step 4:
This code inside event handler of vote button click event, checks whether user has checked at least one option. If he hasn't, an error message is shown.
Step 5:
This code inside event handler of vote button click event, sets value of name attribute of all radio buttons to their original values. This is achieved by copying value from custom attribute ci-name. This allows asp.net server side code to know which button was actually clicked.
I was also baffled by this bug and decided to just drop the repeater in favor of dynamically building a table with the controls inside. In your user control or on your page, simply add the following elements:
<asp:Table ID="theTable" runat="server">
<asp:TableHeaderRow runat="server">
<asp:TableHeaderCell runat="server" Text="Column 1"/>
<asp:TableHeaderCell runat="server" Text="Column 2"/>
<asp:TableHeaderCell runat="server" Text="Column 3"/>
</asp:TableHeaderRow>
</asp:Table>
Then add the data rows in the code behind with radio buttons and other required controls. You can of course do the same with other elements like the DIV:
<div runat="server" ID=theDiv">
</div>
But let us still hope for the ASP.NET team to get around to fixing this unfortunate issue with repeaters and list views. I still like the repeater control and use it whenever possible.
This is a pure server side approach using reflection. The RadioButton control uses the UniqueGroupName property to determine the group name. The group name is cached inside the _uniqueGroupName field. By setting this field using reflection, we can override the default group name and use a group name that is the same across all radio buttons in a repeater. Please note this code must be run in the 'PreRender' event of the 'RadioButton' control to ensure the new group name is persisted across post backs.
protected void rbOption_PreRender(object sender, EventArgs e)
{
// Get the radio button.
RadioButton rbOption = (RadioButton) sender;
// Set the group name.
var groupNameField = typeof(RadioButton).GetField("_uniqueGroupName", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance);
groupNameField.SetValue(rbOption, "MyGroupName");
// Set the radio button to checked if it was selected at the last post back.
var groupValue = Request.Form["MyGroupName"];
if(rbOption.Attributes["value"] == groupValue)
{
rbOption.Checked = true;
}
}
RadioButton source code: http://reflector.webtropy.com/default.aspx/Net/Net/3#5#50727#3053/DEVDIV/depot/DevDiv/releases/whidbey/netfxsp/ndp/fx/src/xsp/System/Web/UI/WebControls/RadioButton#cs/2/RadioButton#cs
This may not be the ideal solution for everyone, but I did the following using jQuery.
<asp:RadioButton ID="rbtnButton1" groupName="Group1" runat="server" />
<asp:RadioButton ID="rbtnButton2" groupName="Group1" runat="server" />
etc...
Then include the following code in your master page. (or all your pages)
$(function() {
//This is a workaround for Microsoft's GroupName bug.
//Set the radio button's groupName attribute to make it work.
$('span[groupName] > input').click(function() {
var element = this;
var span = $(element).parent();
if (element.checked) {
var groupName = $(span).attr('groupName');
var inputs = $('span[groupName=' + groupName + '] > input')
inputs.each(function() {
if (element != this)
this.checked = false;
});
}
});
});
A custom control/override to work around the HtmlInputControl.RenderAttributes() method by ignoring the RenderedNameAttribute property:
/// <summary>
/// HACK: For Microsoft&apos;s bug whereby they mash-up value of the "name" attribute.
/// </summary>
public class NameFixHtmlInputRadioButton : HtmlInputRadioButton
{
protected override void RenderAttributes(HtmlTextWriter writer)
{
// BUG: Usage of 'HtmlInputControl.RenderedNameAttribute'
// writer.WriteAttribute("name", this.RenderedNameAttribute);
writer.WriteAttribute(#"name", Attributes[#"Name"]);
Attributes.Remove(#"name");
var flag = false;
var type = Type;
if (! string.IsNullOrEmpty(type))
{
writer.WriteAttribute(#"type", type);
Attributes.Remove(#"type");
flag = true;
}
base.RenderAttributes(writer);
if (flag && DesignMode)
{
Attributes.Add(#"type", type);
}
writer.Write(#" /");
}
}
I used same Technic to uncheck other radio with jquery please find below code
<asp:RadioButton ID="rbSelectShiptoShop" runat="server" onchange="UnCheckRadio(this);" CssClass="radioShop" />
and script below
function UnCheckRadio(obj) {
$('.radioShop input[type="radio"]').attr('checked', false);
$(obj).children().attr('checked', true);
}

Resources