Solved

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

Posted on 2009-07-14
1
378 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
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now