Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

A developer is asking how to select one radio button at a time if the radio button is inside the GridView.  As you may know setting the group name attribute of radio button will not work if the radio button is located within a Data Representation control like GridView. This because the radio button inside the gridview bahaves differentely. Since a gridview is rendered as table element , at run time it will assign different "name" to each radio button. Hence you are able to select multiple rows.

In this post I'm going to demonstrate how select one radio button at a time in gridview and add a simple validation on it. To get started let's go ahead and fire up visual studio and the create a new web application / website project. Add a WebForm and then add gridview. The mark up would look something like this:

 

<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>

 

Noticed that I've added a templatefield column so that we can add the radio button there. Also I have set up some BoundField columns and set the DataFields as RowNumber, Col1 and Col2. These columns are just dummy columns and i used it for the simplicity of this example. Now where these columns came from? These columns are created by hand at the code behind file of the ASPX. Here's the code below:

 

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;
}

 

And here's the code for binding the GridView with the dummy data above.

protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                GridView1.DataSource = FillData();
                GridView1.DataBind();
            }
}

 

Okay we have now a GridView data with a radio button on each row. Now lets go ahead and switch back to ASPX mark up. In this example I'm going to use a JavaScript for validating the radio button to select one radio button at a time. Here's the javascript code below:

function CheckOtherIsCheckedByGVID(rb) {
        var isChecked = rb.checked;
        var row = rb.parentNode.parentNode;
        if (isChecked) {
            row.style.backgroundColor = '#B6C4DE';
            row.style.color = 'black';
        }
        var currentRdbID = rb.id;
        parent = document.getElementById("<%= GridView1.ClientID %>");
        var items = parent.getElementsByTagName('input');

        for (i = 0; i < items.length; i++) {
            if (items[i].id != currentRdbID && items[i].type == "radio") {
                if (items[i].checked) {
                    items[i].checked = false;
                    items[i].parentNode.parentNode.style.backgroundColor = 'white';
                    items[i].parentNode.parentNode.style.color = '#696969';
                }
            }
        }
}

 

The function above sets the row of the current selected radio button's style to determine that the row is selected and then loops through the radio buttons in the gridview and then de-select the previous selected radio button and set the row style back to its default. You can then call the javascript function above at onlick event of radio button like below:

 

<asp:RadioButton ID="rb" runat="server" onclick="javascript:CheckOtherIsCheckedByGVID(this);" />

 

Here's the output below:

On Load:

After Selecting a Radio Button:

As you have noticed, on initial load there's no default selected radio in the GridView. Now let's add a simple validation for that. We will basically display an error message if a user clicks a button that triggers a postback without selecting  a radio button in the GridView. Here's the javascript for the validation:

 

function ValidateRadioButton(sender, args) {
        var gv = document.getElementById("<%= GridView1.ClientID %>");
        var items = gv.getElementsByTagName('input');
        for (var i = 0; i < items.length ; i++) {
            if (items[i].type == "radio") {
                if (items[i].checked) {
                    args.IsValid = true;
                    return;
                }
                else {
                    args.IsValid = false;
                }
            }
        }
}

 

The function above loops through the rows in gridview and find all the radio buttons within it. It will then check each radio button checked property. If a radio is checked then set IsValid to true else set it to false.  The reason why I'm using IsValid is because I'm using the ASP validator control for validation. Now add the following mark up below under the GridView declaration:

 

    <br />
    <asp:Label ID="lblMessage" runat="server" />
    <br />
    <asp:Button ID="btn" runat="server" Text="POST" onclick="btn_Click" ValidationGroup="GroupA" />
    <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please select row in the grid." ClientValidationFunction="ValidateRadioButton" ValidationGroup="GroupA" style="display:none"></asp:CustomValidator>
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="GroupA" HeaderText="Error List:" DisplayMode="BulletList" ForeColor="Red" />

 

And then at Button Click event add this simple code below just to test if  the validation works:

 

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

Here's the output below that you can see in the browser:

 

That's it! I hope someone find this post useful!

Technorati Tags: ,,
Posted on Thursday, March 3, 2011 5:20 PM ASP.NET , JavaScript , GridView | Back to top


Comments on this post: Using Radio Button in GridView with Validation

# re: Using Radio Button in GridView with Validation
Requesting Gravatar...
Thanks a lot for your useful article
with the wish all goodness 4U
Left by NIK on May 09, 2011 11:08 PM

# re: Using Radio Button in GridView with Validation
Requesting Gravatar...
Everything looks good except what is missing, which is on the button click how do you retrieve the selected radio buttons row number?
Left by x4 on Oct 29, 2011 6:05 AM

# re: Using Radio Button in GridView with Validation
Requesting Gravatar...
Good stuff! Very helpful - thanks.

The only bug was that IE8 was having a js error ("Not Implemented") on the line:
parent = document.getElementById("<%= GridView1.ClientID %>");

where it worked fine in Firefox V6.0.2. This was fixed simply by adding 'var' to declare the 'parent' variable.

I would also suggest using CSS and a class for the styles, replacing the backgroundColor and color with:
row.setAttribute('class', 'selected');
...
items[i].parentNode.parentNode.setAttribute('class', 'notselected');

Regardless, thanks! Much less hassle than using an HTML input and integrating with code behind.
Left by David Carr on Nov 05, 2011 9:02 AM

# re: Using Radio Button in GridView with Validation
Requesting Gravatar...
@X4,

You can get the rowindex as follows.
protected void btn_Click(object sender, EventArgs e)
{
//First create an object to GridViewRow and type cast as follows.

GridViewRow gvrow = ((Button)sender).Parent.Parent as GridViewRow;
int rowindex = gvrow.RowIndex;

.......
}
we are using the Parent twice the reason is
Parent to Button is Cell and Parent to Cell is Row.

I hope this will help you.

Thanks
Mourya

Left by Mourya on Nov 26, 2011 11:36 PM

# re: Using Radio Button in GridView with Validation
Requesting Gravatar...
This code only used for IE.
Left by indhunathan on Jan 07, 2012 2:39 PM

# re: Using Radio Button in GridView with Validation
Requesting Gravatar...
it is so hard to find civilized codes like this on many other forums. nice, clean easy to follow formatts. Great!!
Left by Everel on Jan 14, 2012 4:16 AM

# re: Using Radio Button in GridView with Validation
Requesting Gravatar...
Nice job! Fantastic pure javascript solution.

I see only one potential problem if work also with the code behind:
The selection made by javascript persists on a postback. While the code behind won't be able to read it.

It requires some additional tricks to have this work also with the code behind, particularly with the "enable" attribute that exists on most Asp.net server controls.

Again, thank you !
Left by captainst on Apr 30, 2012 9:27 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net