A developer is asking how to select one radio
button at a time if the radio
button is inside the GridView. As you may know setting the group name attribute of radio
button will not work if the radio
button is located within a Data Representation control like GridView. This because the radio
button inside the gridview bahaves differentely. Since a gridview is rendered as table element , at run time it will assign different "name" to each radio
button. Hence you are able to select multiple rows. In this post I'm going to demonstrate how select one radio
button at a time in gridview and add a simple validation on it. To get started let's go ahead and fire up visual studio and the create a new web application / website project. Add a WebForm and then add gridview. The mark up would look something like this: <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton ID="rb" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
<asp:BoundField DataField="Col1" HeaderText="First Column" />
<asp:BoundField DataField="Col2" HeaderText="Second Column" />
</Columns>
</asp:GridView>
Noticed that I've added a templatefield column so that we can add the radio
button there. Also I have set up some BoundField columns and set the DataFields as RowNumber, Col1 and Col2. These columns are just dummy columns and i used it for the simplicity of this example. Now where these columns came from? These columns are created by hand at the code behind file of the ASPX. Here's the code below:
private DataTable FillData() {
DataTable dt = new DataTable();
DataRow dr = null;
//Create DataTable columns
dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
dt.Columns.Add(new DataColumn("Col1", typeof(string)));
dt.Columns.Add(new DataColumn("Col2", typeof(string)));
//Create Row for each columns
dr = dt.NewRow();
dr["RowNumber"] = 1;
dr["Col1"] = "A";
dr["Col2"] = "B";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 2;
dr["Col1"] = "AA";
dr["Col2"] = "BB";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 3;
dr["Col1"] = "A";
dr["Col2"] = "B";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 4;
dr["Col1"] = "A";
dr["Col2"] = "B";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 5;
dr["Col1"] = "A";
dr["Col2"] = "B";
dt.Rows.Add(dr);
return dt;
}
And here's the code for binding the GridView with the dummy data above.
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
GridView1.DataSource = FillData();
GridView1.DataBind();
}
}
Okay we have now a GridView data with a radio
button on each row. Now lets go ahead and switch back to ASPX mark up. In this example I'm going to use a JavaScript for validating the radio
button to select one radio
button at a time. Here's the javascript code below:
function CheckOtherIsCheckedByGVID(rb) {
var isChecked = rb.checked;
var row = rb.parentNode.parentNode;
if (isChecked) {
row.style.backgroundColor = '#B6C4DE';
row.style.color = 'black';
}
var currentRdbID = rb.id;
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].parentNode.parentNode.style.backgroundColor = 'white';
items[i].parentNode.parentNode.style.color = '#696969';
}
}
}
}
The function above sets the row of the current selected radio
button's style to determine that the row is selected and then loops through the radio buttons in the gridview and then de-select the previous selected radio
button and set the row style back to its default. You can then call the javascript function above at onlick
event of radio
button like below:
<asp:RadioButton ID="rb" runat="server" onclick="javascript:CheckOtherIsCheckedByGVID(this);" />
Here's the output below:
On Load:
After Selecting a Radio Button:
As you have noticed, on initial load there's no default selected radio in the GridView. Now let's add a simple validation for that. We will basically display an error message if a user clicks a
button that triggers a postback without selecting a radio
button in the GridView. Here's the javascript for the validation:
function ValidateRadioButton(sender, args) {
var gv = document.getElementById("<%= GridView1.ClientID %>");
var items = gv.getElementsByTagName('input');
for (var i = 0; i < items.length ; i++) {
if (items[i].type == "radio") {
if (items[i].checked) {
args.IsValid = true;
return;
}
else {
args.IsValid = false;
}
}
}
}
The function above loops through the rows in gridview and find all the radio buttons within it. It will then check each radio
button checked property. If a radio is checked then set IsValid to true else set it to false. The reason why I'm using IsValid is because I'm using the ASP validator control for validation. Now add the following mark up below under the GridView declaration:
<br />
<asp:Label ID="lblMessage" runat="server" />
<br />
<asp:Button ID="btn" runat="server" Text="POST" onclick="btn_Click" ValidationGroup="GroupA" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please select row in the grid." ClientValidationFunction="ValidateRadioButton" ValidationGroup="GroupA" style="display:none"></asp:CustomValidator>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="GroupA" HeaderText="Error List:" DisplayMode="BulletList" ForeColor="Red" />
And then at
Button Click
event add this simple code below just to test if the validation works:
protected void btn_Click(object sender, EventArgs e) {
lblMessage.Text = "Postback at: " + DateTime.Now.ToString("hh:mm:ss tt");
}
Here's the output below that you can see in the browser:
That's it! I hope someone find this post useful!
Technorati Tags: ASP.NET,JavaScript,GridView
