ASP.NET – Using "radio button" inside grid view

Introduction Hi, in this article I am going to explain you about the use of “radio button” control inside an “ASP.NET Grid View” control. This sounds that it’s easy to put the radio button inside a grid view control, but you are wrong it’s not easy as it sounds. There are many factors which makes this problem complex to solve. But as you know the things looks “impossible”, who ultimately says “I am possible”.  So let’s take a look of this problem and solution for the same.

What is the problem? The problem is, sometimes we (web developers) needs to display a data to the user which requires a radio button control, means for selection purpose or something. Let’s say you have a list of products out of which you want user can select only one product, so radio button help us that user can select only one product. List something like below:

Description of the problem and its solution So in the above displayed case we need to put radio button control inside a column in the grid view. Now as you know in asp.net we use the grid view control to display the data in the tabular format, grid view is an element in which you just need to specify the field name (fields that are present in your dataset) which you want to display. And then it will automatically bind those fields and displays all the data to the user in a tabular format. But according to our problem we need to have a radio button control inside a column in the grid view. In the grid view there are 7 predefined column types using those you can bound text data and controls like button, check box etc in the grid view column. The 7 type of columns are displayed below.

Bound Field Checkbox Field Hyperlink Field Image Field Button Field Command Field and Template Field

There are 2-3 fields present which are meant and developed to bind the controls like checkbox, hyperlink, image, and button. But not for radio button, so if you want to display any other control in the grid view columns other than already there then you have to use the Template Field column. In which you can place any control you want. According to our problem we have to display a radio button inside the grid column then we’ll take the Template field column to get the radio button displayed inside it.

Types of “Radio Button” in ASP.NET Now the complex things start. I don’t know you people are aware of it or not, but there are two types of radio buttons present in the asp.net

HTML radio button control – This is the HTML radio button, this runs on the client side and can’t contact with server directly. Server radio button control – This is the server side radio button you can access this from the server.

Now the question is which type of radio button to choose to get our problem solved. If we choose the “Server radio button control” then it will create problem because the “groupName” property (which is responsible for single radio button selection among the many radio buttons present in the grid) will work only for the radio button present in the same row, not in the different rows, so this will not work and solve our problem. Now the other one “HTML radio button control” which solve our problem because it works for the “name” (which is responsible for single selection) different rows, and also for the same row. That means where ever the HTML radio control will find the radio control which is having “name” property as same it will include that radio control in the group also and only single selection is possible. So the final result of this section is that we’ll go with “HTML Radio Button Control” and we’ll use this in our template field column inside a grid view.

Solution code for the problem I have created an example in Asp.NET (C#) to fill the grid view with a radio button column. Like below:   To demonstrate this problem I have created a table in database, an asp.net application, which I am explaining here and later you can download the full source of it. SQL Table Script: CREATE TABLE radioproblem (     Id INT IDENTITY(1,1),     Name VARCHAR(50) ) INSERT INTO radioproblem VALUES(’Prashant’) INSERT INTO radioproblem VALUES(’Praveen’) INSERT INTO radioproblem VALUES(’Pratik’) INSERT INTO radioproblem VALUES(’Aman’) INSERT INTO radioproblem VALUES(’Shenu’) SELECT * FROM radioproblem ASP.NET Application Asp.net application have a page named “radiosample.aspx”, this page has two Server side buttons (Fill Data and Submit), a label, a grid view and a server side radio button. In the grid view I have a template field (which will contain a HTML radio button control) and two boundfield that are “Id” and “Name”. On the click event of the Fill Data button I am filling the grid with data. When data will be filled in the grid then the Radio button will be automatically rendered in each row, and out of those entire radio buttons you can select only one. Following I am explaining the markup code of the grid view because we have to change some attributes inside markup code of the grid. The code is: <asp:TemplateField>             <ItemTemplate>                 <input                     type=”radio”                     name=”gvradio”                     value=”<%#Eval(”Name”)%>” />             </ItemTemplate>             <ItemStyle HorizontalAlign=”Center” VerticalAlign=”Middle” />         </asp:TemplateField> The markup-code of grid view that you will find inside the example, only the above code deserves an explanation. In the above code we have taken a template field column, in which we have inserted a HTML radio button control, <input type=”radio” name=”gvradio” value=”<%#Eval(”Name”)%>” /> In the radio button code you have to set the “name” attribute to something which you want and “value” this is basically our database value which you can set using the Eval method and we’ll retrieve when user submit the page. Name property is must because this property insures that only single radio button will be clicked out of all radio buttons having the same name, and also we’ll be able to get the value of this radio button using this name. So now I think our main problem got solved, we can make use of HTML radio button along with grid view, so that user can select only one record or product from grid view. If you want user can select multiple records then you can make use of ASP.NET or HTML checkbox controls Hold on guys, So we have solved the problem of ‘how to put a radio button inside grid view’ and how to restrict the user to select only one entry using radio buttons. But guys this is not the end, there are two more problems for you regarding the grid view and radio button relationship. Let’s discuss both one by one.

Getting value of “HTML Radio Button” control present inside grid view Now our first problem after solving the above problem is “getting the value of selected radio button in asp.net code”. It looks easy but its not, because the radio button is present inside the grid view, so you can’t directly access this control and also it’s a HTML radio button, So according to ASP.NET we can’t access the HTML controls directly in Server side code. So how will we find out that, which product or record user selected? So there is a way with which we can get the value that which record is selected. Generally you can bind any value with radio button which you ant to access on the post back, but as we know  In every sql database table (mostly) there is a primary key column which identifies each row uniquely; it may be your product id, employee id, recorded etc. So it’s always better to bind that unique field with radio button type of columns so that you can find out each row in grid uniquely, but all depends on your requirement whatever you want bind with radio button control you can bin, like I am binding my table’s “Name” field with radio button in my example so that I can access that which name is selected when user submit the page. Have a look how to do this as I have done below: <input type=”radio” name=”gvradio” value=”<%#Eval(”Name”)%>” /> value=”<%#Eval(”Name”)%>” you can put your database field name in place of “Name”. When user will click the submit button then inside the submit button we can access that which value user selected using the following code. Request.Form["gvradio"]; Using the above code you can get the value selected on click of the submit button. In my example I am do is,on click of submit button I am changing the value of Label1 label present on my web page. Like below: Label1.Text = Request.Form["gvradio"]; So now you got he value of the radio button in asp.net code also. But there is one more possible problem that can arise problems for you, but d’t worry that also having the solution, lets take a look.

Selecting the first radio button by default Another problem is “selecting the first radio button in the grid view by default”, if you’ll not do so then, without selecting any record user will submit the page and hence you have to put a code on server side that user selected any record or not. But for this small thing if we send the user to the server then it will put some amount of load on our server, So to solve this there are two ways out, first is using the checked property (but its not the good way) and second is using JavaScript code. So the first method is using the checked attribute of the radio button you can set the radio button state as checked. Like below, <input type=”radio” name=”gvradio” checked=”checked” value=”<%#Eval(”Name”)%>” /> But the above code creates a problem, that is it will select one radio button in the given radio button in grid but it will select the radio button that is present in the last row, not the first one, because as we know grid renders each row one by one, so the row that is rendered in last will be selected. But we have to select the first one, so that user will know that first record selected and if he’ll submit the page then selected row will be submitted. So to select the first radio button of first row we have to make use of JavaScript. As you know that gridview in asp.net I renders itself in HTML Table, Row & Column format when we run this in browser, to solve our problem we’ll use this concept of “HTML Tables”, see the JavaScript code below o in the above displayed case we need to put radio button control inside a column in the grid view. Now as you know in asp.net we use the grid view control to display the data in the tabular format, grid view is an element in which you just need to specify the field name (fields that are present in your dataset) which you want to display. And then it will automatically bind those fields and displays all the data to the user in a tabular format. But according to our problem we need to have a radio button control inside a column in the grid view. <script language=”javascript” type=”text/javascript”>     function select_first()     {         var table=document.getElementById(’<%=gvRadiogrid.ClientID %>’);         if (table.rows && table.rows.length>0)         {               //Here you need to use 1 for first row. because 0 means its refers the header row in table.                var firstrow = table.rows[1];                          var cell = firstrow.cells[0];              var chkChecked = cell.firstChild;             while(chkChecked)             {                 if(chkChecked.tagName==”INPUT” && chkChecked.type==”radio”)                 {                     chkChecked.checked = ‘checked’;                     break;                 }                 chkChecked = chkChecked.nextSibling;             }         }     }    </script> In above code I am taking the reference of gridview as a table object then after accessing the 1st cell of 1st row and then searching the INPUT tag inside that cell if found then checking that it is a radio button, if yes then selecting the radio button and stooping the loop. That is fine that we have created a JavaScript which will select the 1st row’s radio button by getting the reference of the grid view in table format. But when we run this function, if we’ll run it on document load then at that time our grid not renders so we’ll get the nullable object error. So to solve this we’ll run this function after our grid renders. That means by pasting the following code in our markup file after the markup of gridview. <script type=”text/javascript” language=”javascript”>select_first();</script> put the above code after the grid tag (</asp:GridView>) close. So that it will run after the grid completely rendered and hence it will select the radio button.

Download the example code Download the zip file and change the  SQL database name, SQL Server username and password, and also make a table using the script given in the example, because that table is used to demonstrate the application.

TI have tried my best to explain all possible problem of gridview with radio button, else you can download and run the sample application. To run the code you have to create the table in SQL and have to give the SQL username and password in the code file. If feel any problem in understanding the code then please comment here. Give your comments. Thanks

Reference : Prashant Pandey (TechAhead)

*******