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#

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

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

How to import CSV files into DataTable in C#

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

go to top image