Multiple Radio Buttons DataGrid

How To Create a DataGrid in ASP.NET with multiple radio buttons Per Row.

Sometimes you may be asked to create a datagrid in ASP.NET with multiple radio buttons that can be selected by each row. For example a user may ask for the option to reject, accept or cancel a product from a list of received product. Take a look at Figure 1.


ProductId
Name
AcceptRejectCancel
17
Alice Mutton
AcceptRejectCancel
3
Aniseed Syrup
AcceptRejectCancel
40
Boston Crab Meat
AcceptRejectCancel
60
Camembert Pierrot
AcceptRejectCancel
18
Carnarvon Tigers
AcceptRejectCancel
1
Chai
AcceptRejectCancel
2
Chang
AcceptRejectCancel
39
Chartreuse verte
AcceptRejectCancel
4
Chef Anton's Cajun Seasoning
AcceptRejectCancel
5
Chef Anton's Gumbo Mix
Figure 1. List of products with multiple radio buttons

The question is: is it easy to do it in ASP.NET. The answer is provided in this article.

To proceed you should create a Visual Basic web site.
1. Name the project MultipleRadioButton.
2. Now take a datagrid from the toolbox and post it on webform1.
3. Add a template column to the datagrid
4. Enter template editing for the template column
5. Add a label in the template item field and name it LblStatus
6. End Template editing
7. Go back to the web form and create a button and name it BtnProcess
8. Drag a textbox from toolbox and place it on the webform and name it TxtProcess and set the TextMode to MultiLine

For a complete web form design take a look a figure 2 below.

Figure 2 A complete design of the page

Now, for the page load event you have the following code that should be inserted:
Dim MySQLConnection As New SqlClient.SqlConnection
Dim MySQLCommand As New SqlClient.SqlCommand
Dim MyDataAdapter As New SqlClient.SqlDataAdapter
Dim MyDataSet As New Data.DataSet
MySQLConnection.ConnectionString = "Data Source=.; Initial Catalog=Northwind; User ID=sa; Password=pass@word1"
MySQLConnection.Open()
MySQLCommand.Connection = MySQLConnection
MySQLCommand.CommandType = CommandType.Text
MySQLCommand.CommandText = "Select TOP 10 ProductId, ProductName From Products"
MyDataAdapter.SelectCommand = MySQLCommand
MyDataAdapter.Fill(MyDataSet, "Products")
DataGrid1.DataSource = MyDataSet
DataGrid1.DataMember = "Products"
DataGrid1.DataBind()

Remember that you have to change the connection string as to connect to your database server. Also to create the multiple radio buttons on the fly, copy the following code:

Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound
If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then
Dim r As Label
r = e.Item.FindControl("LblStatus")
r.Text = "Accept" & _
"Reject" & _
"Cancel"
End If
End Sub
If you run your project now, you will receive figure 3 but when you click Process nothing will happen:
Figure 3 A run time presentation of your project
In order to process the rows after the user select his option, you have to post the following code for the BtnProcess click event.

Private Sub BtnProcess_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BtnProcess.Click
Dim RequestString As String, Ind As DataGridItem, RequestValue As String, RowNumber As Long
RowNumber = 1
For Each Ind In DataGrid1.Items
RequestString = "mycheckoption" & Ind.ItemIndex
If Ind.ItemType = ListItemType.AlternatingItem Or Ind.ItemType = ListItemType.Item Then
Dim r As Label
r = Ind.FindControl("LblStatus")
RequestString = "mycheckoption" & Ind.ItemIndex
RequestValue = Request.Form(RequestString)
TxtProcess.Text = TxtProcess.Text & "Row " & RowNumber & " has status " & RequestValue & vbCrLf
RowNumber += 1
End If
Next
End Sub
Now, run your project and make your selections then click the Process button. Something similar to figure 4 should happen depending on your selections.
Figure 4. A complete test of project

Thank you for reading my article and see you in the next one….