Add radio button control to Grid View and make only one selected radio button using JavaScript in Asp.net, 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">
.Gridview
{
font-family:Verdana;
font-size:10pt;
font-weight:normal;
color:black;
width:300px;
border-color:black;
}
</style>
<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 != rdBtn.id) {
                rdBtnList[i].checked = false;
            }
        }
    }
</script>


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


<div>
    <asp:GridView ID="gvdata" Width="700px" runat="server" CssClass="Gridview" AutoGenerateColumns="false" DataKeyNames="UserId" HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton id="rdbUser" runat="server" OnClick="javascript:SelectSingleRadiobutton(this.id)" />
</ItemTemplate>
</asp:TemplateField>
<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" />
</Columns>
</asp:GridView>
    </div>



  • 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)
        {
            BindGrid();
        }
    }
    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";
        dt.Rows.Add(dr);

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

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

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

        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;
        gvdata.DataBind();
    }
}

Output ::


Comments

Popular posts from this blog

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

How to import CSV files into DataTable in C#

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

go to top image