Posts
In this article we will learn how to select only one row of a GridView using RadioButtons whereas normally a RadioButton does not support selection of only one RadioButton within a row.
Background:
In ASP.Net the GridView control does not support selection of a single RadioButton that works as a group across rows. Generally as you know a RadioButton is a control that works in a group for selecting only one option. If we take RadioButtonList control it will work everywhere, which applies to a GridView also but if we use only one RadioButton control for each row in GridView it will not allow us to select only one. Try selecting a RadioButton in every row; it will allow selection of multiple rows in GridView. Here we will see how to restrict the user to select only one RadioButton within a GridView control.
For doing this task need to write some Javascript function. We will step by step follow.
Step 1:
Start new website. Put the GridView control on the Default.aspx page with RadioButton control in TemplateField like bellow.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="AuthId"> <Columns> <asp:TemplateField ShowHeader="false"> <ItemTemplate> <asp:RadioButton ID="rdbauthid" runat="server" onclick="javascript:CheckOtherIsCheckedByGVID(this);" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField HeaderText="AUTHOR NAME" DataField="AuthName" /> <asp:BoundField HeaderText="AUTHOR LOCATION" DataField="AuthLocation" /> </Columns> </asp:GridView>
In the above you may see that in the Click event of the RadioButton control I call a Javascript function.
Step 2:
Write the script as below for checking the current selection of the RadioButton control; if more than one is selected then the other selection is removed. Other than this there are two more methods to do same task.
<script type="text/javascript"> function CheckOtherIsCheckedByGVID(spanChk) {
Background:
In ASP.Net the GridView control does not support selection of a single RadioButton that works as a group across rows. Generally as you know a RadioButton is a control that works in a group for selecting only one option. If we take RadioButtonList control it will work everywhere, which applies to a GridView also but if we use only one RadioButton control for each row in GridView it will not allow us to select only one. Try selecting a RadioButton in every row; it will allow selection of multiple rows in GridView. Here we will see how to restrict the user to select only one RadioButton within a GridView control.
For doing this task need to write some Javascript function. We will step by step follow.
Step 1:
Start new website. Put the GridView control on the Default.aspx page with RadioButton control in TemplateField like bellow.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="AuthId"> <Columns> <asp:TemplateField ShowHeader="false"> <ItemTemplate> <asp:RadioButton ID="rdbauthid" runat="server" onclick="javascript:CheckOtherIsCheckedByGVID(this);" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField HeaderText="AUTHOR NAME" DataField="AuthName" /> <asp:BoundField HeaderText="AUTHOR LOCATION" DataField="AuthLocation" /> </Columns> </asp:GridView>
In the above you may see that in the Click event of the RadioButton control I call a Javascript function.
Step 2:
Write the script as below for checking the current selection of the RadioButton control; if more than one is selected then the other selection is removed. Other than this there are two more methods to do same task.
<script type="text/javascript"> function CheckOtherIsCheckedByGVID(spanChk) {
var IsChecked = spanChk.checked;
if (IsChecked) {
spanChk.parentElement.parentElement.style.backgroundColor = '#228b22';
spanChk.parentElement.parentElement.style.color = 'white';
}
var CurrentRdbID = spanChk.id;
var Chk = spanChk;
Parent = document.getElementById("<%=GridView1.ClientID%>");
var items = Parent.getElementsByTagName('input');
for (i = 0; i < items.length; i++) {
if (items[i].id != CurrentRdbID && items[i].type == "radio") {
if (items[i].checked) {
items[i].checked = false;
items[i].parentElement.parentElement.style.backgroundColor = 'white'
items[i].parentElement.parentElement.style.color = 'black';
}
items[i].parentElement.parentElement.style.color = 'black';
}
}
}
}
</script>
READ MORE>>
</script>
READ MORE>>
great!!heplful ^^