GridView RadioButton and jQuery

I tried to implement this example (http://codeasp.net/blogs/Vinz/microsoft-net/1365/using-radio-button-in-gridview-with-validation) using jQuery. JQuery makes this example way more compact and efficient. Here’s the complete code-sample.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewRadioJQuery.aspx.cs" Inherits="GridViewRadioJQuery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  <script src="Scripts/jtemplates.js" type="text/javascript"></script>
  <script src="Scripts/jquery.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
.CurrFocus
{
    background-color:green;
    border:solid 2px red;
}
</style>
<script type="text/javascript">
  $(document).ready(function () {
  $("#GridView1 :radio[id^='GridView1_rb']").removeAttr('checked');
  $("#btn").click(function (event) {
        if (!$("#GridView1 :radio[id^='GridView1_rb']:checked").val()) {
            alert('Please select a radio button!');
            event.preventDefault();
        }
    })
    ,
     $("#GridView1 :radio[id^='GridView1_rb']").change(function () {
         var newId = this.id;
         $("#GridView1 :radio[id^='GridView1_rb']").removeAttr('checked');
         $("#GridView1 tr").removeClass("CurrFocus");
         $("#GridView1")
         $(this).attr('checked', 'checked');
         $(this).closest('tr').addClass("CurrFocus");
     })
})
</script>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
 <Columns>
  <asp:TemplateField>
        <ItemTemplate>
           <asp:RadioButton ID="rb" runat="server" />
         </ItemTemplate>
   </asp:TemplateField>
   <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
   <asp:BoundField DataField="Col1" HeaderText="First Column" />
   <asp:BoundField DataField="Col2" HeaderText="Second Column" />
 </Columns>
</asp:GridView>
<br />
<asp:Label ID="lblMessage" runat="server" />
<asp:Button ID="btn" runat="server" Text="POST" onclick="btn_Click" ValidationGroup="GroupA" />
 </div>
 </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class GridViewRadioJQuery : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = FillData();
            GridView1.DataBind();
        }
    }

    private DataTable FillData()
    {

        DataTable dt = new DataTable();
        DataRow dr = null;

        //Create DataTable columns
        dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
        dt.Columns.Add(new DataColumn("Col1", typeof(string)));
        dt.Columns.Add(new DataColumn("Col2", typeof(string)));

        //Create Row for each columns
        dr = dt.NewRow();
        dr["RowNumber"] = 1;
        dr["Col1"] = "A";
        dr["Col2"] = "B";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["RowNumber"] = 2;
        dr["Col1"] = "AA";
        dr["Col2"] = "BB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["RowNumber"] = 3;
        dr["Col1"] = "A";
        dr["Col2"] = "B";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["RowNumber"] = 4;
        dr["Col1"] = "A";
        dr["Col2"] = "B";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["RowNumber"] = 5;
        dr["Col1"] = "A";
        dr["Col2"] = "B";
        dt.Rows.Add(dr);

        return dt;
    }

    protected void btn_Click(object sender, EventArgs e)
    {
        lblMessage.Text = "Postback at: " + DateTime.Now.ToString("hh:mm:ss tt");
    }
}

Advertisements
This entry was posted in JQuery. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s