Blog Archives

show textbox on radio button selection in gridview

7/4/2012

In this article i will explain that how can we show TextBox on selection of radio button in gridview.

In this article two columns will display in gridview. In one column radio button is showing and in second column Textbox will show. But i want that when user select radio button then TextBox should show otherwise it should invisible. So below i will explain how can we accomplish this.

following is the javascript function that will show textbox.
<script>
function ShowText(radio, textBox) {
var RadioButton = document.getElementById(radio);
if (RadioButton.checked == true) {
document.getElementById(textBox).style.visibility = "visible";
}
}
</script>

following is html code to show gridview on page

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None"
onrowdatabound="GridView1_RowDataBound">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton ID="aRadioButton" runat="server" Text="test" Checked="false"/>
<asp:Label ID="Label1" runat="server" Text='Show'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>

following method is page_load event that will fill the gridview. In this i am adding only one columns value for just explaination.

protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.Add("ID");
for (int i = 0; i < 10; i++)
{
dt.Rows.Add();
dt.Rows[i]["ID"] = i;
}
GridView1.DataSource = dt;
GridView1.DataBind();
}

folloing method will add the onclick attribute to radio button. It will set calling of javascript function.
this is rowdatabound method of gridview so for each row of gridview it will set this functionality.

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
RadioButton aRadioButton = (RadioButton)e.Row.FindControl("aRadioButton");
TextBox textBox1 = (TextBox)e.Row.FindControl("TextBox3");
aRadioButton.Attributes.Add("onClick", "JavaScript:ShowText('" + aRadioButton.ClientID + "','" + textBox1.ClientID + "')");
}
}

after doing above all methods and javascript function we will run the application and we will get the desire output.

I hope it will usefull to you.

0 Comments

select radio button in gridview through keyboard's keys using JavaScript

7/4/2012

0 Comments

In this article i will explain how we can select radio button in gridview through keys of keyboard using javascript.

I was working on asp.net application. i had requirement of selecting radio button in gridview from keyboard.
then I implemented this task with the help of Asp.net forum. Now i am posting this article because i think any other also has same requirement. So record will be show in gridview and when user select a key with alt key from keyboard then Approved radio button will be select in gridview.
similarly when we press n key with alt key from keyboard then 'Not Approved' radio button will be select.

Step: 1. Firstly we will create the asp.net web application and add a new web form. Now we will add Gridview on page.
for explaination of this article i am taking single column in gridview in which i will take two radio buttons.
first radio button ill be Approved and second radio button will be of Not Approved. HTML code is shown below:
<br/><pre lang="HTML"><asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton ID="aRadioButton" runat="server" Text="Approved" GroupName="f" Checked="false" />
<asp:RadioButton ID="dRadioButton" runat="server" Text="Not Approved" GroupName="f" Checked="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView></pre><br/>

Step: 2. In this step we will add rows in gridview using code-behind. which is as follows:
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
for (int i = 0; i < 10; i++)
{
dt.Rows.Add();
}
GridView1.DataSource = dt;
GridView1.DataBind();
}

Step: 3. In this step we will add javascript code for selecting radio buttons. We will perform 'onkeydown' event of document.
In following code we are using the key code of keyboards like we use code 65, 97, 78, 110. these code are for Keys 'a' and 'n'.

<script >
document.onkeydown = clickRadio;

function clickRadio(e) {
if (window.event)
var keyCode = window.event.keyCode; // IE
else
var keyCode = e.which;
if (e.altKey && (keyCode == 65 || keyCode == 97 || keyCode == 78 || keyCode == 110)) {
setRadioButton(keyCode);
}
}
function setRadioButton(whichKey) {
//alert(whichKey + "\nhi" + String.fromCharCode(whichKey))
//get reference of GridView control
var grid = document.getElementById("<%= GridView1.ClientID %>");
//variable to contain the cell of the grid

var cell;
var approvedvalue = false;
var disapprovedvalue = false;

if (grid.rows.length > 0)
{
//loop starts from 1. rows[0] points to the header.
for (i = 1; i < grid.rows.length; i++) {
//get the reference of first column
cell = grid.rows[i].cells[0];
approvedvalue = false;
disapprovedvalue = false;
//loop according to the number of childNodes in the cell
for (j = 0; j < cell.childNodes.length; j++)
{
//if childNode type is RadioButton

if (cell.childNodes[j].type == "radio")
{
if (cell.childNodes[j].value == "aRadioButton") {
if (cell.childNodes[j].checked == false) {
approvedvalue = false;
}
else {
approvedvalue = true;
}
}
if (cell.childNodes[j].value == "dRadioButton")
{
if (cell.childNodes[j].checked == false)
{
disapprovedvalue = false;
}
else
{
disapprovedvalue = true;
}
}
}
}
for (j = 0; j < cell.childNodes.length; j++) {
if (approvedvalue == false && disapprovedvalue == false) {
if (whichKey == 65 || whichKey == 97) {
if (cell.childNodes[j].value == "aRadioButton") {
if (cell.childNodes[j].checked == false) {
cell.childNodes[j].checked = true;
return;
}
}
}
else if (whichKey == 78 || whichKey == 110) {
if (cell.childNodes[j].value == "dRadioButton") {
if (cell.childNodes[j].checked == false) {
cell.childNodes[j].checked = true;
return;
}
}
}
}
}

}
}
}
</script>

following are the complete source code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<script >
document.onkeydown = clickRadio;

function clickRadio(e) {
if (window.event)
var keyCode = window.event.keyCode; // IE
else
var keyCode = e.which;
if (e.altKey && (keyCode == 65 || keyCode == 97 || keyCode == 78 || keyCode == 110)) {
setRadioButton(keyCode);
}
}
function setRadioButton(whichKey) {
//alert(whichKey + "\nhi" + String.fromCharCode(whichKey))
//get reference of GridView control
var grid = document.getElementById("<%= GridView1.ClientID %>");
//variable to contain the cell of the grid

var cell;
var approvedvalue = false;
var disapprovedvalue = false;

if (grid.rows.length > 0)
{
//loop starts from 1. rows[0] points to the header.
for (i = 1; i < grid.rows.length; i++) {
//get the reference of first column
cell = grid.rows[i].cells[0];
approvedvalue = false;
disapprovedvalue = false;
//loop according to the number of childNodes in the cell
for (j = 0; j < cell.childNodes.length; j++)
{
//if childNode type is RadioButton

if (cell.childNodes[j].type == "radio")
{
if (cell.childNodes[j].value == "aRadioButton") {
if (cell.childNodes[j].checked == false) {
approvedvalue = false;
}
else {
approvedvalue = true;
}
}
if (cell.childNodes[j].value == "dRadioButton")
{
if (cell.childNodes[j].checked == false)
{
disapprovedvalue = false;
}
else
{
disapprovedvalue = true;
}
}
}
}
for (j = 0; j < cell.childNodes.length; j++) {
if (approvedvalue == false && disapprovedvalue == false) {
if (whichKey == 65 || whichKey == 97) {
if (cell.childNodes[j].value == "aRadioButton") {
if (cell.childNodes[j].checked == false) {
cell.childNodes[j].checked = true;
return;
}
}
}
else if (whichKey == 78 || whichKey == 110) {
if (cell.childNodes[j].value == "dRadioButton") {
if (cell.childNodes[j].checked == false) {
cell.childNodes[j].checked = true;
return;
}
}
}
}
}

}
}
}
</script>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton ID="aRadioButton" runat="server" Text="approved" GroupName="f" Checked="false" />
<asp:RadioButton ID="dRadioButton" runat="server" Text="disapproved" GroupName="f" Checked="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

</form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
for (int i = 0; i < 10; i++)
{
dt.Rows.Add();
}
GridView1.DataSource = dt;
GridView1.DataBind();
}

I hope it will help you.

0 Comments

show textbox on radio button selection in gridview

select radio button in gridview through keyboard's keys using JavaScript

Archives

Categories