Friday, December 26, 2008

Handling radio buttons using javascript in web applications

In windows application we place radio buttons like male or female, which are required to be grouped in a group box.
Since in web application we don’t have such control to place required radio button with in a group we need to handle it exclusively.

So one option is to post back the page when user clicks on one of the radio button to un check the active option.
This is not effective process of again loading the entire page just because of changing the option. We can write a JavaScript function that checks specific radio button among the group and uncheck the other radio buttons.

Let us consider a grid which has multiple rows and each row having a radio button as a column.
Now when user clicks on any one of these radio buttons available in different rows, we should uncheck the other radio buttons.

1) We shall assign same title for all radio button which belong to same group like (male or female),(married or unmarried) etc…
Each group will have its own title and all radio buttons in a group should have same title.

2) When user clicks on a radio button option, we should call a JavaScript function passing the radio button id which user has clicked. With which we can get the title or group name to which that radio button belongs and there fore Unchecking the other radio buttons which have same title or belong to same group.
Code behind page :

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindGrid();
}
}
private void BindGrid()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
DataRow dr = null;
for (int i = 1; i <= 10; i++)
{
dr = dt.NewRow();
dr["Name"] = i.ToString();
dt.Rows.Add(dr);
}
grdData.DataSource = dt;
grdData.DataBind();
}

}















No comments: