ASP Snippets

Categories






Alerts

Free Alerts

Your email will always be
private and will not be shared.




Follow us on twitter.




Zoom In | Zoom Out


Author is awarded Most Valuable Professional award by Microsoft ASP/ASP.Net

Using RadioButtons with ASP.Net GridView Control

Author:Mudassar Khan

In this article I’ll explain how to use RadioButtons in asp.net GridView so that it becomes mutually exclusive so that user can select only one record.

 

Database

For this article I have used the Microsoft Northwind Database which you can download using the link below


Download Northwind Database

 

GridView Markup

<asp:GridView ID="GridView1" runat="server"

HeaderStyle-BackColor = "green"

AutoGenerateColumns = "false" Font-Names = "Arial"

OnPageIndexChanging = "OnPaging"

Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B"

AllowPaging = "true">

<Columns>

<asp:TemplateField>

<ItemTemplate>

    <asp:RadioButton ID="RadioButton1" runat="server"

        onclick = "RadioCheck(this);"/>

    <asp:HiddenField ID="HiddenField1" runat="server"

        Value = '<%#Eval("CustomerID")%>' />

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField ItemStyle-Width="150px" DataField="CustomerID"

    HeaderText="CustomerID"  />

<asp:BoundField ItemStyle-Width="150px" DataField="City"

    HeaderText="City" />

<asp:BoundField ItemStyle-Width="150px" DataField="PostalCode"

    HeaderText="PostalCode"/>

</Columns>

</asp:GridView>

 

You’ll notice I have place a RadioButton and a Hidden Field in the Itemtemplate. The Hidden Field stores the ID of the Customer whose significance is described later

 

Data Binding the GridView

The function below is used to databind the ASP.Net GridView

C#

private void BindGrid()

{

    string strQuery = "select CustomerID,City,PostalCode" +

        " from customers";

    DataTable dt = new DataTable();

    String strConnString = System.Configuration.ConfigurationManager

                .ConnectionStrings["conString"].ConnectionString;

    SqlConnection con = new SqlConnection(strConnString);

    SqlDataAdapter sda = new SqlDataAdapter();

    SqlCommand cmd = new SqlCommand(strQuery);

    cmd.CommandType = CommandType.Text;

    cmd.Connection = con;

    try

    {

        con.Open();

        sda.SelectCommand = cmd;

        sda.Fill(dt);

        GridView1.DataSource = dt;

        GridView1.DataBind();

    }

    catch (Exception ex)

    {

        throw ex;

    }

    finally

    {

        con.Close();

        sda.Dispose();

        con.Dispose();

    }

}

 

VB.Net

Private Sub BindGrid()

   Dim strQuery As String = "select CustomerID,City,PostalCode" & _

            " from customers"

   Dim dt As New DataTable()

   Dim strConnString As String = System.Configuration.ConfigurationManager _

        .ConnectionStrings("conString").ConnectionString

   Dim con As New SqlConnection(strConnString)

   Dim sda As New SqlDataAdapter()

   Dim cmd As New SqlCommand(strQuery)

   cmd.CommandType = CommandType.Text

   cmd.Connection = con

   Try

        con.Open()

        sda.SelectCommand = cmd

        sda.Fill(dt)

        GridView1.DataSource = dt

        GridView1.DataBind()

   Catch ex As Exception

        Throw ex

   Finally

        con.Close()

        sda.Dispose()

        con.Dispose()

   End Try

End Sub

 

As you’ll notice I am simply executing SQL Query on the Customers table and binding the returned data to the ASP.Net GridView control

I am calling the above function in the Page Load event of the page like below

 

C#

protected void Page_Load(object sender, EventArgs e)

{

    GetSelectedRecord();

    BindGrid();           

}

 

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

    GetSelectedRecord()

    BindGrid()  

End Sub

 

Note here I am calling one more function GetSelectedRecord() which will be described later

 

Maintaining state of the RadioButtons

I am using ViewState variable to store the ID of the selected record. This helps me to remember the state of the RadioButtons. To achieve this I am using the following two functions

private void GetSelectedRecord()

{

    for (int i = 0; i < GridView1.Rows.Count; i++)

    {

        RadioButton rb = (RadioButton)GridView1.Rows[i]

                        .Cells[0].FindControl("RadioButton1");

        if (rb != null)

        {

            if (rb.Checked)

            {

                HiddenField hf = (HiddenField)GridView1.Rows[i]

                                .Cells[0].FindControl("HiddenField1");

                if (hf != null)

                {

                    ViewState["SelectedContact"] = hf.Value;

                }

 

                break;

            }

        }

    }

}

 

VB.Net

Private Sub GetSelectedRecord()

        For i As Integer = 0 To GridView1.Rows.Count - 1

            Dim rb As RadioButton = DirectCast(GridView1.Rows(i).Cells(0) _

             .FindControl("RadioButton1"), RadioButton)

            If rb IsNot Nothing Then

                If rb.Checked Then

                    Dim hf As HiddenField = DirectCast(GridView1.Rows(i).Cells(0) _

                     .FindControl("HiddenField1"), HiddenField)

                    If hf IsNot Nothing Then

                        ViewState("SelectedContact") = hf.Value

                    End If

 

                    Exit For

                End If

            End If

        Next

End Sub

 

As the name suggests the above function’s job is to loop through all the records for the page of the ASP.Net GridView Control and if the RadioButton is checked, the ID stored in the corresponding Hidden Field is stored in the ViewState. This method is called in the page load event of the page.

 

C#

private void SetSelectedRecord()

{

    for (int i = 0; i < GridView1.Rows.Count; i++)

    {

        RadioButton rb = (RadioButton)GridView1.Rows[i].Cells[0]

                                        .FindControl("RadioButton1");

        if (rb != null)

        {

            HiddenField hf = (HiddenField)GridView1.Rows[i]

                                .Cells[0].FindControl("HiddenField1");

            if (hf != null && ViewState["SelectedContact"] != null)

            {

                if (hf.Value.Equals(ViewState["SelectedContact"].ToString()))

                {

                    rb.Checked = true;

                    break;

                }

            }

        }

    }

}

 

  

VB.Net

Private Sub SetSelectedRecord()

        For i As Integer = 0 To GridView1.Rows.Count - 1

            Dim rb As RadioButton = DirectCast(GridView1.Rows(i) _

                    .Cells(0).FindControl("RadioButton1"), RadioButton)

            If rb IsNot Nothing Then

                Dim hf As HiddenField = DirectCast(GridView1.Rows(i) _

                    .Cells(0).FindControl("HiddenField1"), HiddenField)

              If hf IsNot Nothing And ViewState("SelectedContact") IsNot Nothing Then

                    If hf.Value.Equals(ViewState("SelectedContact").ToString()) Then

                        rb.Checked = True

                        Exit For

                    End If

              End If

            End If

        Next

End Sub

 

The above function simply loops through the records in the current page of the ASP.Net GridView control and checks if the ID is the ViewState matches any of the rows. If it matches the corresponding RadioButton is checked. This function is called in the OnPageIndexChanging of the ASP.Net GridView control which is described below

 

C#

protected void OnPaging(object sender, GridViewPageEventArgs e)

{

    GridView1.PageIndex = e.NewPageIndex;

    GridView1.DataBind();

    SetSelectedRecord();

}

 

VB.Net

Protected Sub OnPaging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)

        GridView1.PageIndex = e.NewPageIndex

        GridView1.DataBind()

        SetSelectedRecord()

End Sub

 

Client Side JavaScript

In order to make sure that only one RadioButton is checked the following JavaScript function needs to be placed in the head or body section (if using master pages) of the page.

<script type = "text/javascript">

     function RadioCheck(rb) {

        var gv = document.getElementById("<%=GridView1.ClientID%>");

        var rbs = gv.getElementsByTagName("input");

 

        var row = rb.parentNode.parentNode;

        for (var i = 0; i < rbs.length; i++) {

            if (rbs[i].type == "radio") {

                if (rbs[i].checked && rbs[i] != rb) {

                    rbs[i].checked = false;

                    break;

                }

            }

        }

    }    

</script>

 

This function makes sure that only one RadioButton is checked. This function is called up when the RadioButton is clicked by the user. For more information refer the GridView markup given above


ASP.Net GridView with RadioButtonList

To try the live demo click here.

 

Download the sample source code in VB.Net C# using the link below

GridViewRadioButtons.zip (4.66 kb)

Posted: Sep 23 2009, 22:56 by Mudassar Khan | Comments (0) RSS comment feed |
Filed under: ASP.Net | C# | GridView | VB.Net

Views: 6302
Page copy protected against web site content infringement by Copyscape


If you like this article, help us grow by bookmarking this page on any social bookmarking site.
Bookmark and Share





Comments









Community News





Web Hosting SpotLight


Consulting


For consulting and work related queries click here.



Advertise


Advertise with us. For more details click here.


Suggestions


Please provide your valuable suggesstions here.

This Site is hosted on

Lunarpages.com Web Hosting