Click here to Skip to main content
14,302,993 members

Simple GridView Radio Button Row Selector

Rate this:
4.28 (15 votes)
Please Sign up or sign in to vote.
4.28 (15 votes)
19 Feb 2008CPOL
A custom web control to add radio button selection to the GridView control.

Image 1


This article provides a drag and drop way of creating radio button GridView row selectors that behave in the same way as the GridView's own "Select" link buttons.


One thing that's always bothered me about the GridView control is the counter-intuitive appearance of the Select link provided to select a single row. Since pretty much every other time you ask your user to select one item in a list you do it with radio buttons, I couldn't help but feel it would have been more intuitive to make the Select button a radio button. As it happens, this was one of the first things I thought when I started learning ASP.NET two years ago. But now, it didn’t exactly prove trivial to implement. I found some articles telling me how to do it, but these involved a bit of wiring per control and, really, if you're going to apply radio button row selection across your entire site, it should be much simpler than that just from a maintainability point of view.

Now that I've had more experience and studied for a few qualifications, I came up against the same issue again, and decided to solve it properly so I wouldn't have to worry about it anymore. I wanted a pure drag and drop control with no wiring, to replace the Select link, and this is what I came up with.

The Code

Since it's a pretty simple piece of code all in all, you can see the control in all its glory below:

public class GridViewRowSelector : RadioButton
    protected override void Render(HtmlTextWriter writer)
        GridViewRow row = (GridViewRow)this.NamingContainer;
        int currentIndex = row.RowIndex;
        GridView grid = (GridView)row.NamingContainer;
        this.Checked = (grid.SelectedIndex == currentIndex);
        this.Attributes.Add("onClick", "javascript:" + 
             "Select$" + currentIndex.ToString(), true));

Using the Code

Using the code is simple, just follow these steps:

  1. Click on your website in the Solution Explorer and click "Add Reference..."
  2. Select the Browse button on the .NET Components tab, or select the Browse tab in VS2008.
  3. Select the DLL provided (this is the Utilities.dll found in the Debug/bin directory on the zip file).

Then, just drag and drop the GridViewRowSelector from your toolbox into a template field on the GridView control.

To create the template field on the GridView, select the Common Functions menu for your GridView (the little arrow at the top right corner in Design view), select Add Column, and then add a TemplateColumn with no header text.

To get the designer up that allows you to drag an element into the template field, select the Common Functions menu again for your GridView, then select “Edit Templates”. You should be able to select the ItemTemplate for your template column and drag the GridViewRowSelector into the appropriate box on the designer. Do not worry that it displays an error – this is simply because I haven’t yet added an appropriate control designer that deals with the design mode. I may do this later, but feel it’s not necessary since the control displays correctly at design time outside of template editing.

Image 2

If you set the GridView's SelectedRow style to display with a different background colour, then your selected row will be highlighted in the colour as well (as shown in the picture at the top of the article).

Points of Interest

The hoops that had to be jumped through to get this working really stem from one major problem in the GridView control: the absence of a SelectRow function that allows you to select a row and fire the GridView.SelectionChanged event. If you can make do without the GridView.SelectionChanged event, then the process of creating a control to select the row isn’t too bad. You can just catch the CheckedChanged event of your RadioButton, update the GridView.SelectedIndex with the row number that the radio button belongs to, and away you go. However, I like using the GridView.SelectionChanged event in my pages to display subsidiary data (particularly now that AJAX is in the mix) so, since I’ll be using this control quite a bit, I really don’t want to work that particular piece of functionality.

Since there isn’t a GridView.SelectRow method and there isn’t a way of invoking the SelectionChanged event on the GridView since it’s protected, the only way I could realistically think to do this was to create a client-side onClick event handler that would fire in exactly the same way as the Select link of the GridView itself, thus fooling it into thinking its own Select link had been clicked.

Of course, you can’t just fire the same JavaScript command to impersonate a postback from the Select link as ASP.NET provides measures against this for security reasons (such as preventing XSS attacks), so you need to register the postback link.

The simple bit was keeping radio button display in line with that of the selected row. The server control itself is just an extended radio button that updates its own Checked property during the Render event by navigating up its control parent hierarchy to reach the GridView row that it’s contained by, then casting to a GridViewRow object and using the Selected property of the row.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Adam Crawford
Web Developer
England England
Adam lives in York and is just starting a new job as a senior web developer for a major travel company in the UK. He holds an MCPD for Web Development in ASP.NET 2 and has an interest in further developing his AJAX skills in the near future and will be practicing by developing his own site: Solid Code

Comments and Discussions

PraiseExcellent A+ Pin
GentiNeon18-Jan-18 0:34
memberGentiNeon18-Jan-18 0:34 
GeneralMy vote of 4 Pin
kaisernayan19-Jul-11 8:08
memberkaisernayan19-Jul-11 8:08 
GeneralMy vote of 4 Pin
Jose Maldonado3-Jan-11 11:01
memberJose Maldonado3-Jan-11 11:01 
QuestionHow can i make this default to checked on page load? Pin
bugnuker24-Mar-09 5:13
memberbugnuker24-Mar-09 5:13 
AnswerRe: How can i make this default to checked on page load? Pin
Adam Crawford17-Jun-09 6:08
memberAdam Crawford17-Jun-09 6:08 
QuestionHow to put in toolbox Pin
bugnuker24-Mar-09 5:12
memberbugnuker24-Mar-09 5:12 
QuestionCan't find it in my toolbox either? Pin
Robert Messina17-Feb-09 11:38
memberRobert Messina17-Feb-09 11:38 
QuestionRe: Can't find it in my toolbox either? Pin
ParthibanSudhaman16-Mar-09 20:49
memberParthibanSudhaman16-Mar-09 20:49 
GeneralNot showing in toolbox Pin
Walter Wells18-Jan-09 3:22
memberWalter Wells18-Jan-09 3:22 
GeneralThanks Pin
Artie29-Sep-08 12:31
memberArtie29-Sep-08 12:31 
GeneralRe: Thanks Pin
beejoy10-Sep-09 23:30
memberbeejoy10-Sep-09 23:30 
GeneralGreat , but after Sorting it still select the same rowIndex Pin
ab_dc16-Sep-08 13:32
memberab_dc16-Sep-08 13:32 
GeneralRe: Great , but after Sorting it still select the same rowIndex Pin
Adam Crawford22-Sep-08 4:20
memberAdam Crawford22-Sep-08 4:20 
QuestionThe Gridview RowSelector Contol Placement Pin
mouli_molly13-Sep-08 23:59
membermouli_molly13-Sep-08 23:59 
AnswerRe: The Gridview RowSelector Contol Placement Pin
Adam Crawford15-Sep-08 2:19
memberAdam Crawford15-Sep-08 2:19 
GeneralNice job Pin
Matware1-Jul-08 20:08
memberMatware1-Jul-08 20:08 
GeneralRe: Nice job Pin
Adam Crawford9-Aug-08 11:38
memberAdam Crawford9-Aug-08 11:38 
GeneralRadio button in DataGrid Pin
chienhui14-Mar-08 0:31
memberchienhui14-Mar-08 0:31 
GeneralVery good article .... but how can I uncheck a radio button by clicking on checked one Pin
Member 125445419-Feb-08 19:33
memberMember 125445419-Feb-08 19:33 
GeneralRe: Very good article .... but how can I uncheck a radio button by clicking on checked one Pin
Anton Afanasyev25-Feb-08 12:03
memberAnton Afanasyev25-Feb-08 12:03 
GeneralRe: Very good article .... but how can I uncheck a radio button by clicking on checked one Pin
Mark Henke27-Feb-08 10:53
memberMark Henke27-Feb-08 10:53 
GeneralRe: Very good article .... but how can I uncheck a radio button by clicking on checked one Pin
Member 36544646-May-09 2:06
memberMember 36544646-May-09 2:06 
GeneralGreat article. Pin
Rajib Ahmed10-Jan-08 15:45
memberRajib Ahmed10-Jan-08 15:45 
GeneralRe: Great article. Pin
Adam Crawford10-Jan-08 23:14
memberAdam Crawford10-Jan-08 23:14 
GeneralRe: Great article. Pin
Rajib Ahmed17-Jan-08 16:29
memberRajib Ahmed17-Jan-08 16:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 10 Jan 2008


33 bookmarked