Selected Index Change Event for a literal radio button markup in a gridview

I have created a gridview that creates a radio button through a literal.  The is the last step in my web page before the next page can be accessed, so I want the selecting of that radio button to enable the button that trigers the next page.  Unfortuantly, the literal does not have a selected index changed event.  A lot of people using my website are moving on to the next page and not selecting the radio button before hitting the button.  Is there any way I can make the selecting of the radio button enable the button?  

Code for the gridview:
<asp:GridView ID="OptionsGridView" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource5" DataKeyNames="Application" OnRowDataBound="OptionsGridView_RowDataBound" GridLines="None" Width="541px">
                             <Columns>
                                 
                                 <asp:BoundField DataField="Application" HeaderText="Options:" SortExpression="Application" />
                                 <asp:BoundField DataField="InventoryNbr" HeaderText="Hollander" SortExpression="InventoryNbr" />
                                 
                                 <asp:BoundField DataField="TreeLevel" HeaderText=  "Tree Level" SortExpression="TreeLevel"  />
                                 <asp:TemplateField HeaderText="Select:">
                                     <ItemTemplate>
                                         <asp:Label ID="Label1" runat="server" Text='<%# Eval("InventoryNbr") %>' />
                                     </ItemTemplate>
                                     <ItemTemplate>
                                         &nbsp;<asp:Literal ID="RadioButtonMarkup" runat="server"></asp:Literal>
                                   
                                     </ItemTemplate>
                                 </asp:TemplateField>                                                              
                                                           </Columns>
                         </asp:GridView>

Code behind for the databinding of the grid view:

if (e.Row.RowType == DataControlRowType.DataRow)
        {
            {
                // Grab a reference to the Literal control
                Literal output = (Literal)e.Row.FindControl("RadioButtonMarkup");
                // Output the markup except for the "checked" attribute
                output.Text = string.Format("<input type='radio' runat='server' name='OptionsGroup' id='RowSelector{0}' value='{0}'", e.Row.Cells[1].Text);
                // See if we need to add the "checked" attribute
               
                // Add the closing tag
                output.Text += " />";

            }

Any help is appriciated!
reedsster1Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

guru_samiCommented:
And why are you adding radio button to literal instead of using a normal asp.net RadionButton?
0
reedsster1Author Commented:
I needed them to un-check when another button is checked, this is the solution we got to work.  I put several hours into the normal asp.net radio button and could not get it to do the functionality I needed.
0
ddayx10Commented:
I don't think you will be able to get the <input> to fire a server event because of the way it is deployed. So you will have to resort to javascript to enable your button.

I've written a small sample that deactivates an <asp:button> control on page load, then uses javascript on the <input type="radio"> to enable that button.

I realize you had issues with getting "something" to work right when not using a <asp:literal>. If you had been able to work that out using a radiobutton instead, and adding the control to your <asp:BridView> then you could have called an event from the <asp:radiobutton> to the server. All this is to say I'm just trying to help with where you are now and how you might solve this.
.ASPX SAMPLE
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
		function WonderTwinPowers_Activate()
		{
			var btn = document.getElementById('btn');
			btn.disabled = false;
		}
    </script>
    
</head>
<body>
    <form id="form1" runat="server">

		<input type="radio" value="Select Me" onclick="WonderTwinPowers_Activate();" />
		
		<asp:Button ID="btn" runat="server" Text="Submit" />

    </form>
</body>


*********************

.ASPX.VB SAMPLE (CODE BEHIND)
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            btn.Enabled = False
        End If
    End Sub

Open in new window

0
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

reedsster1Author Commented:
I see what you're doing, but can't quite get it to work.
<script type="text/javascript">
                function WonderTwinPowers_Activate()
                {
                        var SubmitButton = document.getElementById('SubmitButton');
                        SubmitButton.Enabled = true;
                }
    </script>
<asp:Button ID="SubmitButton" runat="server" OnClick="SubmitButton_Click" Text="FindParts" Enabled="False" />

<input type='radio' runat='server' onclick='WonderTwinPowers_Activate();' name='OptionsGroup' id='RowSelector{0}' value='{0}'"
0
ddayx10Commented:
What is not working, just not activating? Are you getting an error?

I put your controls from your sample on my page. I had to tweak them a little to get going, but not too much. Then all works fine.

I would guess you are getting a Javascript error about the ID of the button. Potentially it is being renamed by the INamingContainer convention.

Take a look at your view source. Find the submit button and look at it's ID. Does it match the ID being given in the document.getElementById() in the Javascript? If not then that is the problem. For testing purposes copy the ID from the source and put it in the javascript. If that solves the problem then viola.

Alternately you could adapt the Javascript to debug a little:
function WonderTwinPowers_Activate()
 {
     var SubmitButton = document.getElementById('SubmitButton');
     alert(SubmitButton);
     //SubmitButton.Enabled = true;
 }

If the alert returns [Object] then you are finding your button properly. If the alert returns [undefined] then again likely the INamingContainer convention is changing your button's ID.

In the end. There is a way to get the proper ID available on the screen if this is your issue and that would be to register it on the page from code-behing (see sample 2)

If this be not your issue (slipping into YODA speak), provide more detail you must.

Installing the FF Web Developer Toolbar might be a good place to start (if you haven't already). Run the page in there, click the radio, and check the top right corner of the toolbar (there will be an icon there for Javascript errors) and see if you can get detail on what is wrong :)
TWEAKED CONTROLS:
<asp:Button ID="SubmitButton" runat="server" OnClick="SubmitButton_Click" Text="FindParts" Enabled="False" />

<input type='radio' runat='server' onclick='WonderTwinPowers_Activate();' name='OptionsGroup' id='RowSelector' value='0' />

SAMPLE 2:

***ASPX PAGE STUFF****
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
		function WonderTwinPowers_Activate()
		{
			//There's a new Javascript variable on the page called (MyButtonIdIs)
			//You can't see it unless you go to the source, but it's there for your yummy consumption
			
			var btn = document.getElementById(MyButtonIdIs);
			btn.disabled = false;
		}
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
	
		<asp:Button ID="SubmitButton" runat="server" OnClick="SubmitButton_Click" Text="FindParts" Enabled="False" />

		<input type='radio' runat='server' onclick='WonderTwinPowers_Activate();' name='OptionsGroup' id='RowSelector' value='0' />

    </form>
</body>
</html>


****ASPX.VB (CODE BEHIND) Stuff****

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "MyScript", String.Format("var MyButtonIdIs='{0}'", SubmitButton.ClientID), True)
    End Sub

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
reedsster1Author Commented:
I was using a master page with another button called SubmitButton in the sidebar, so the button was getting named: ctl00_MainContentPlaceHolder_SubmitButton in the main content placeholder.  I've got it working now!  Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.