Solved

I need help working with Radio Buttons in Gridview controls, in my ASP.Net app.

Posted on 2009-07-14
1
382 Views
Last Modified: 2012-05-07
Hi Experts,
I have an ASP.Net application where I use multiple GridView controls.  Each GridView control contains a column of Radio Buttons so that the users can select a row.  The issue I am having is that when a user clicks on a radiobutton in one of the gridviews it deselects the radiobuttons in the other gridview.  
What I want to happen is for a user to select a radio button in each gridview and have the radio button stay selected.  Then click the 'Add Cost' button and display a Total (i.e. sum) of the of the selected rows in the Total textbox.
Please help me accomplish this.  I have include my source code and codebehind with this post.  The javascript function 'manageGrouping' was provided by Expert 'ddayx10' in a previous post.  Just thought I should give him credit.

Thanks in advance,
mrotor
HTML Source Code:
______________________________________________________________________
 
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MultipleGridViews.aspx.vb" Inherits="MultipleGridViews" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style>
    
    div.scrollTableContainer {
    height: 50px;
    overflow: auto;
    width: 820px;
    margin: 1px 0 0 0;
    position: relative;
    }
    
    th 
    {
        background-color: #006699; 
        color: white; 
        position: relative; 
        top: expression(this.scrollTop);
        z-index: 10; 
    }
    .tableContainer
    {
        overflow-y: scroll; 
        height: 150px;
    }
    </style> 
    
    <script type="text/javascript">
	    function manageGrouping(valueSelected)
	    {
		    var radios = document.getElementsByTagName('input');
			
		    for(i=0;i<radios.length;i++)
		    {
			    if(radios[i].type == 'radio')
			    {
				    if(radios[i].value == valueSelected)
				    { 
				        radios[i].checked = true;
				        document.getElementById('<%=txtIn.ClientID%>').innerText = valueSelected; 
				    }
				    else
				    { 
				        radios[i].checked = false; 
				    }
			    }
		    }
	    }        
    </script>   
	    
	   <script type="text/javascript">
		    function manageGroupingOut(valueSelected)
	    {
		    var radios = document.getElementsByTagName('input');
			
		    for(i=0;i<radios.length;i++)
		    {
			    if(radios[i].type == 'radio')
			    {
				    if(radios[i].value == valueSelected)
				    { 
				        radios[i].checked = true;
				        document.getElementById('<%=txtOut.ClientID%>').innerText = valueSelected; 
				    }
				    else
				    { 
				        radios[i].checked = false; 
				    }
			    }
		    }
	    }        
	    </script>  
</head>
<body>
    <form id="form1" runat="server">
    <div>
        &nbsp;<strong> SELECTED ITEMS<br />
        </strong>
        <asp:Label ID="Label2" runat="server" Text="Pick Up Selected:"></asp:Label>&nbsp;
        <asp:TextBox ID="txtIn" runat="server" Width="293px"></asp:TextBox><br />
        <asp:Label ID="Label3" runat="server" Text="Drop Off Selected:"></asp:Label>
        <asp:TextBox ID="txtOut" runat="server" Width="290px"></asp:TextBox><br />
        <br />   
    
        <table ID="TabGrid" runat=server  style="width: 1000px" >
         <tr>
            <td width = 50%>
                <asp:Label ID="lblPickUp" runat="server" Text="Pick Up" Font-Bold="True" Font-Names="Arial" Font-Size="Medium"></asp:Label>
            </td>
            <td width = 50%>
                <asp:Label ID="lblDelivery" runat="server" Text="Drop Off" Font-Bold="True" Font-Names="Arial" Font-Size="Medium"></asp:Label>
            </td>
         </tr>
         <tr>
             <td valign="top" width = 50%>
                 <asp:GridView ID="gvPickUp" runat="server" 
                 Font-Names="Arial" Font-Size="Small" 
                 HeaderStyle-BackColor="Blue" AlternatingRowStyle-BackColor="Azure"
                 EditRowStyle-CssClass="rowClass" 
		        RowStyle-CssClass="rowClass" 
		        AlternatingRowStyle-CssClass="rowClass" 
		        SelectedRowStyle-CssClass="rowClass">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <input id="Radio1" type="radio" name="PickUpX" value=<%# Eval("IDIN") %>  runat="server" enableviewstate ="true" onclick="manageGrouping(this.value);" />                                    
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <HeaderStyle BackColor="Blue" ForeColor="White" />
                    <AlternatingRowStyle BackColor="Azure" />
                </asp:GridView>
             </td>
             <td valign=top width = 50%>
                <asp:GridView ID="gvDropOff" runat="server" 
                Font-Names="Arial" Font-Size="Small" 
                HeaderStyle-BackColor="Blue" AlternatingRowStyle-BackColor="Azure"
                EditRowStyle-CssClass="rowClass" 
		        RowStyle-CssClass="rowClass" 
		        AlternatingRowStyle-CssClass="rowClass" 
		        SelectedRowStyle-CssClass="rowClass">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                            <input id="Radio3" type="radio" name="DeliveryX" value=<%# Eval("IDOUT") %>  runat="server" enableviewstate ="true" onclick="manageGroupingOut(this.value);" />  
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
             </td>
         </tr>
     </table>    
        <asp:Button ID="btnAdd" runat="server" Text="Add Cost" /><br />
        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="Large" Text="Total:"></asp:Label>
        &nbsp;
        <asp:TextBox ID="txtTotal" runat="server"></asp:TextBox><br />
        &nbsp;&nbsp;
    </div>
    </form>
</body>
</html>
 
VB.Net CodeBehind:
______________________
 
Imports System.Data.SqlClient
Imports System.Data
 
Partial Class MultipleGridViews
    Inherits System.Web.UI.Page
    Dim MyConnection As New SqlConnection()
    Dim conn As New SqlConnection("Data Source=MyDB;Initial Catalog=Movies;Integrated Security =True")
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Call GetStatusIn()
            Call GetStatusOut()
        End If
    End Sub
 
    Private Sub GetStatusIn()
        Dim sqlIN As String = "SELECT Amount + '-' + Title AS IDIN, Title, Amount FROM MOVIES WHERE Status = 'In'"
        Dim cmd As New SqlCommand(sqlIN, conn)
        conn.Open()
        Dim dr As SqlDataReader = cmd.ExecuteReader
        gvPickUp.DataSource = dr
        gvPickUp.DataBind()
        dr.Close()
        conn.Close()
    End Sub
 
    Private Sub GetStatusOut()
        Dim sqlOut As String = "SELECT Amount + '-' + Title AS IDOUT, Title, Amount FROM MOVIES WHERE Status = 'Out'"
 
        Dim cmd As New SqlCommand(sqlOut, conn)
        conn.Open()
        Dim dr As SqlDataReader = cmd.ExecuteReader
        gvDropOff.DataSource = dr
        gvDropOff.DataBind()
        dr.Close()
        conn.Close()
    End Sub
 
    Protected Sub gvPickUp_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvPickUp.RowCreated
        If e.Row.RowType = DataControlRowType.Header Then
            e.Row.Cells(1).Visible = False
        End If
        If e.Row.RowType = DataControlRowType.DataRow Then
            e.Row.Cells(1).Visible = False
        End If
    End Sub
 
    Protected Sub gvDropOff_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvDropOff.RowCreated
        If e.Row.RowType = DataControlRowType.Header Then
            e.Row.Cells(1).Visible = False
        End If
 
        If e.Row.RowType = DataControlRowType.DataRow Then
            e.Row.Cells(1).Visible = False
        End If
    End Sub
 
    Protected Sub btnAdd_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAdd.Click
        Dim dblIn As Double = 0
        Dim dblOut As Double = 0
        Dim dblTotal As Double = 0
 
        If gvPickUp.Rows.Count > 0 Then
            If txtIn.Text <> "" Then
                '    dblIN = 0
                'Else
                Dim strIN As String = txtIn.Text
                Dim strInArray() As String = strIN.Split("-")
                dblIn = CDbl(strInArray(0))
            End If
        End If
 
        If gvDropOff.Rows.Count > 0 Then
            If txtOut.Text <> "" Then
                Dim strOUT As String = txtOut.Text
                Dim strOutArray() As String = strOUT.Split("-")
                dblOut = CDbl(strOutArray(0))
            End If
        End If
 
        dblTotal = dblIn + dblOut
        txtTotal.Text = dblTotal.ToString
    End Sub
End Class

Open in new window

0
Comment
Question by:mainrotor
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 13

Accepted Solution

by:
drypz earned 500 total points
ID: 24856546
Hi! Why don't you just use asp:RadioButton control then add a Validation group for each radiobutton in gridview. Something like

in gridview #1

                    <ItemTemplate>
                        <asp:RadioButton ID="RadioButton1" runat="server" ValidationGroup="Group1" />
                    </ItemTemplate>

in gridview #2

                    <ItemTemplate>
                        <asp:RadioButton ID="RadioButton1" runat="server" ValidationGroup="Group2" />
                    </ItemTemplate>
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question