ASP.NET RADIOBUTTON

Select Single Radio Button In Gridview In Asp.Net

DOWNLOAD SOURCE HERE

Introduction:

In this article we will learn how to select only one radiobutton in Gridview which not support to select only one radiobutton.

Back-Ground:

In ASP.Net Gridview control not support to select Single Radiobutton selection which works in a group. Generally all you know radiobutton is the control which work in group for selecting only one option. If we take RadioButtonList control it will work everywhere mean in Gridview also but if we take only one radiobutton control for each row in Gridview it will not allow us to select only one option. Try selecting every row radiobutton it will allow to select multiple option in gridview. Here we will see how to restrict the user to select only one from by Radiobutton control in Gridview.

For doing this task I’ve written some Javascript function. This function actually I got from somewhere while Google search. 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 above you may see that RadioButton control onclick of that I’hd called some Javascript function.

Step 2:

Write the script like bellow for checking the current selection of Radiobutton control if more than one is selected removing other selection. 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’;

}

}

}

}

</script>

Step 3:

Bind your Gridview in aspx.cs page and run the application.

Conclusion:

In this way we can restrict the user to select only one option via RadioButton in gridview.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s