Using Radio Button in GridView With JavaScript Validation

Article

Introduction

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 a radio button will not work if the radio button is located within a data representation control like a GridView. This is because the radio button inside a GridView behaves differently. Since a GridView is rendered as a table element, at run time it will assign a different "name" to each radio button. Hence you are able to select multiple rows.

In this article I'm going to show how to select one radio button at a time in GridView and add a simple validation to it using plain JavaScript. To get started let's go ahead and fire up Visual Studio and then create a new web application / website project. Add a WebForm and then grab 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>

If you notice 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 are used for the simplicity of this example. Now where do these columns come 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();
}
}

As simple as that, we now have a GridView data with a radio button on each row. Now let's 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. (You could also use jQuery to take advantage of the jQuery selectors for easy DOM manipulation.) 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, de-select the previous selected radio button and set the row style back to its default. The next thing is to call the JavaScript function above in the onclick event of the radio button as in the following:

<asp:RadioButton ID="rb" runat="server" onclick="javascript:CheckOtherIsCheckedByGVID(this);" />

Here's the output below:

On Load:

After selecting a Radio Button:

As you can see, 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:

unction 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's 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 markup 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" />