AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=968&pId=-1
CodeSnip: How to Create a DataGrid in ASP.NET with Multiple Radio Buttons Per Row
page
by Nidal Arabi
Feedback
Average Rating: 
Views (Total / Last 10 Days): 21988/ 25

Problem

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 products.  Take a look at Figure 1.

Figure 1

The question is: Is it easy to do it in ASP.NET?  Yes, it is easy and the answer is provided in this article.

Solution

You will need to create a website using Visual Basic .NET by following the steps given below.

1.      Name the project MultipleRadioButtons.

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 mode 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, place it on the web form and name it TxtProcess.  Then set the TextMode property to Multiline.

For a complete WebForm design take a look to figure below.

Figure 2

Now, for the page load event you have the following code that should be inserted.

Listing 1

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. Now to create the multiple radio buttons on the fly, add the following code on a clean part of your code page.

Listing 2

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 = "<input type='radio' name='" & "mycheckoption" & e.Item.ItemIndex & "'
    Value = 'APPROVED' checked>Accept" & _
    "<input type='radio' name='" & "mycheckoption" & e.Item.ItemIndex & "' value='REJECTED'>Reject" & _
      "<input type='radio' name='""mycheckoption" & e.Item.ItemIndex & "' value='CANCELLED'>Cancel"
  End If
End Sub
Testing

If you run your project now, you will receive Figure 3, but when you click process nothing happens (except posting back the page).

Figure 3

In order to process the rows after user selection of options, you have to post the following code segment for the BtnProcess click event.

Listing 3

Private Sub BtnProcess_Click(ByVal sender As System.ObjectByVal 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 selection.

Figure 4

Downloads
Summary

Being able to process huge amounts of data in a single click and use multiple selection criteria is a business requirement that any developer will face one day.  The above article provides an easy way of implementing radio buttons without the need to post back the form, as well as providing an attractive interface for the end user.


Product Spotlight
Product Spotlight 

©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 1:19:22 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search