Add radio button control to Grid View and make only one selected radio button using JavaScript in, C#

In this blog, I am going to show how to add radio button to the gridview and only one radio button selection at a time using JavaScript.

  • First of all, add the below javascript code inside your <head> tag which is responsible for only single readio button selected ::

    <style type="text/css">
<script language="javascript" type="text/javascript">
    function SelectSingleRadiobutton(rdbtnid) {
        var rdBtn = document.getElementById(rdbtnid);
        var rdBtnList = document.getElementsByTagName("input");
        for (i = 0; i < rdBtnList.length; i++) {
            if (rdBtnList[i].type == "radio" && rdBtnList[i].id != {
                rdBtnList[i].checked = false;

  • Now, add following code inside your <body> tag which holds gridview with additonal column having radio button with javascript code.

    <asp:GridView ID="gvdata" Width="700px" runat="server" CssClass="Gridview" AutoGenerateColumns="false" DataKeyNames="UserId" HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White">
<asp:RadioButton id="rdbUser" runat="server" OnClick="javascript:SelectSingleRadiobutton(" />
<asp:BoundField DataField="UserId" HeaderText="User Id"/>
<asp:BoundField DataField ="Name" ItemStyle-Width="100px" HeaderText="Name" />
<asp:BoundField DataField="Designation" ItemStyle-Width="350px" HeaderText="Designation" />
<asp:BoundField DataField="Department" ItemStyle-Width="300px" HeaderText="Department" />
<asp:BoundField DataField="Image" HeaderText="Image" />

  • Now in the code behind file(aspx.cs) write down the following code::

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;

public partial class RadioGridview : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
    protected void BindGrid()

        DataTable dt = new DataTable();
        dt.Columns.Add("UserId", typeof(Int32));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Designation", typeof(string));
        dt.Columns.Add("Department", typeof(string));
        dt.Columns.Add("Image", typeof(string));

        DataRow dr = dt.NewRow();
        dr["UserId"] = 1;
        dr["Name"] = "Aayush";
        dr["Designation"] = "Associate Technical Consultant";
        dr["Department"] = null;
        dr["Image"] = "images/large/image1.jpg";

        dr = dt.NewRow();
        dr["UserId"] = 2;
        dr["Name"] = "Anish";
        dr["Designation"] = null;
        dr["Department"] = null;
        dr["Image"] = null;

        dr = dt.NewRow();
        dr["UserId"] = 3;
        dr["Name"] = "Manish";
        dr["Designation"] = null;
        dr["Department"] = "Navision";
        dr["Image"] = null;

        dr = dt.NewRow();
        dr["UserId"] = 4;
        dr["Name"] = "Ravish";
        dr["Designation"] = "Tech Lead";
        dr["Department"] = "CRM";
        dr["Image"] = null;

        for (int i = 0; i < dt.Rows.Count; i++)
            for (int j = 0; j < dt.Columns.Count; j++)
                if (string.IsNullOrEmpty(dt.Rows[i][j].ToString()))
                    dt.Rows[i][j] = "Data Not Available";
        gvdata.DataSource = dt;

Output ::


Popular posts from this blog

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

Dumps for Microsoft Dynamics CRM MB2-703 Practice Exam Questions Free

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

Show GridView row details in tooltip on mouseover with jQuery using inside GridView in c#

go to top image