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.
<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>
<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>
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 ::
- 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
Post a Comment