[CLOSED] Radio Button not keeping state

  1. #1

    [CLOSED] Radio Button not keeping state

    We seem to have found an old bug dealing specifically with <ext:Radio> control in the version 4.2 that we are using.
    This bug consist of Radio Buttons not keeping their state (check/selected) once they are posted back to the server.

    We have tried doing same test with your latest version 4.3 into the EXT samples project and this bug seems to still be there.

    Question is: Is this Radio button bug fixed in the latest 4.3 version or is this fix coming out on newer release??

    Below are related links:
    User posts:
    https://forums.ext.net/showthread.ph...stop-working!&
    https://forums.ext.net/showthread.php?61722

    EXT Issue/Fixes:
    https://github.com/extnet/Ext.NET/issues/1421
    https://github.com/extnet/Ext.NET/issues/1462
    Last edited by fabricio.murta; Oct 20, 2017 at 6:30 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @AdvanceLoanTechnologies!

    For the first issue, its major drawback is already fixed. What's "left" on it is just that the "time" the change event fires "changed", so just if you blindly query the own component currently assigned value, you may get either the previous or new value the change affected, but the event itself has the old and new values' handles which are the most appropriate way to query them.

    For the second issue you pointed, It was a false positive that I triggered by trying by mistake to reproduce it on a wrong (older) Ext.NET build.

    If you found another issue related to the radio field component, then that's something new to us and we'd like to know details on how to reproduce it so we can be able to fix. It may be that the issue is related to the ones recently fixed on radio component but I'm pretty confident they wouldn't be the same, as the provided test cases for the former ones have already been addressed.

    Well, that maybe is also the case that the issues are reproducible in a specific browser. That would be useful infomration to know as well.

    We're looking forward to your feedback.
  3. #3
    Fabricio,
    Thanks for your response.
    Following what you said, we did more testing with Ver4.3 and found out that the RADIO ctrl is now reporting the CHECKED & VALUE properties correctly on Server-Side POST. So we just need to update to 4.3 to get our project to work.

    Now, during our testing, we did find some issues in 4.3 that you guys might be interested in looking at:
    This code below is edited page from your samples (https://examples4.ext.net/#/Form/Mis...Checkout_Form/)
    Button at Top "Test Radio (OnDirectClick)" is the main Test
    The other buttons at bottom are old demo buttons that were there and other tests we were doing

    This code shows a couple of occurrences in which Radio ctrls do not report correct checked/value on PostBack (similar to V4.2):
    1. When Radio items inside a Radiogroup (with No ID) and each Radio Item having "NAME" grouping attribute set
    2. When Setting the "NAME" attribute using <DEFAULTS> for Radio ctrls in <ITEMS> collection
    (This seems to be a <DEFAULTS> bug not a radio button bug)

    Also it shows that you can have a RadioGroup(ID set) with Radio items with no NAME grouping set and PostBack (radio checked property works) - I assume this is by design since the radio items are inside an IDed group.


    <%@ Page Language="C#" %>
    
    <script runat="server">
    
    	public void TestRadio_OnDirectClick(object sender, Ext.Net.DirectEventArgs e)
    	{
    		this.TestMessage.SetValue("");
    		this.TestMessage.SetValue(DebugPrintRadioValues("TestRadio_OnDirectClick"));
    		this.TestMessage.AppendLine(DebugFormNVColl("TestRadio_OnDirectClick"));
    	}
    
    	public void TestRadio_OnClick(object sender, System.EventArgs e)
    	{
    		//THIS EVENT DOES NOT SEEM TO FIRE
    		this.TestMessage.SetValue("");
    		this.TestMessage.SetValue(DebugPrintRadioValues("TestRadio_OnClick"));
    	}
    
    	protected void CompletePurchase_ServerSideEvent(object sender, DirectEventArgs e)
    	{
    		
    		this.TestMessage.SetValue("");
    		this.TestMessage.AppendLine(DebugFormNVColl("CompletePurchase_ServerSideEvent"));
    
    	}
    
    	public string DebugPrintRadioValues(string sFunc)
    	{
    		StringBuilder sMsg = new StringBuilder();
    		sMsg.AppendLine(DateTime.Now.ToString() + new String('=', 60));
    		sMsg.AppendLine(sFunc);
    
    		sMsg.AppendLine(String.Format("RadioW1: Chk=[{0}] Val=[{1}] [{2}]", this.RadioW1.Checked, this.RadioW1.Value, this.RadioW1.InputValue));
    		sMsg.AppendLine(String.Format("RadioW2: Chk=[{0}] Val=[{1}] [{2}]", this.RadioW2.Checked, this.RadioW2.Value, this.RadioW2.InputValue));
    		sMsg.AppendLine(String.Format("RadioW3: Chk=[{0}] Val=[{1}] [{2}]", this.RadioW3.Checked, this.RadioW3.Value, this.RadioW3.InputValue));
    		sMsg.AppendLine(String.Format("RadioW4: Chk=[{0}] Val=[{1}] [{2}]", this.RadioW4.Checked, this.RadioW4.Value, this.RadioW4.InputValue));
    		sMsg.AppendLine(new String('-', 40));
    
    		sMsg.AppendLine(String.Format("RadioX1: Chk=[{0}] Val=[{1}] [{2}]", this.RadioX1.Checked, this.RadioX1.Value, this.RadioX1.InputValue));
    		sMsg.AppendLine(String.Format("RadioX2: Chk=[{0}] Val=[{1}] [{2}]", this.RadioX2.Checked, this.RadioX2.Value, this.RadioX2.InputValue));
    		sMsg.AppendLine(String.Format("RadioX3: Chk=[{0}] Val=[{1}] [{2}]", this.RadioX3.Checked, this.RadioX3.Value, this.RadioX3.InputValue));
    		sMsg.AppendLine(String.Format("RadioX4: Chk=[{0}] Val=[{1}] [{2}]", this.RadioX4.Checked, this.RadioX4.Value, this.RadioX4.InputValue));
    		sMsg.AppendLine(new String('-', 40));
    
    		sMsg.AppendLine(String.Format("RadioY1: Chk=[{0}] Val=[{1}] [{2}]", this.RadioY1.Checked, this.RadioY1.Value, this.RadioY1.InputValue));
    		sMsg.AppendLine(String.Format("RadioY2: Chk=[{0}] Val=[{1}] [{2}]", this.RadioY2.Checked, this.RadioY2.Value, this.RadioY2.InputValue));
    		sMsg.AppendLine(String.Format("RadioY3: Chk=[{0}] Val=[{1}] [{2}]", this.RadioY3.Checked, this.RadioY3.Value, this.RadioY3.InputValue));
    		sMsg.AppendLine(String.Format("RadioY4: Chk=[{0}] Val=[{1}] [{2}]", this.RadioY4.Checked, this.RadioY4.Value, this.RadioY4.InputValue));
    		sMsg.AppendLine(new String('=', 60));
    
    		sMsg.AppendLine(String.Format("RadioZ1: Chk=[{0}] Val=[{1}] [{2}]", this.RadioZ1.Checked, this.RadioZ1.Value, this.RadioZ1.InputValue));
    		sMsg.AppendLine(String.Format("RadioZ2: Chk=[{0}] Val=[{1}] [{2}]", this.RadioZ2.Checked, this.RadioZ2.Value, this.RadioZ2.InputValue));
    		sMsg.AppendLine(String.Format("RadioZ3: Chk=[{0}] Val=[{1}] [{2}]", this.RadioZ3.Checked, this.RadioZ3.Value, this.RadioZ3.InputValue));
    		sMsg.AppendLine(String.Format("RadioZ4: Chk=[{0}] Val=[{1}] [{2}]", this.RadioZ4.Checked, this.RadioZ4.Value, this.RadioZ4.InputValue));
    		sMsg.AppendLine(new String('=', 60));
    
    		sMsg.AppendLine(String.Format("RadioA1: Chk=[{0}] Val=[{1}] [{2}]", this.RadioA1.Checked, this.RadioA1.Value, this.RadioA1.InputValue));
    		sMsg.AppendLine(String.Format("RadioA2: Chk=[{0}] Val=[{1}] [{2}]", this.RadioA2.Checked, this.RadioA2.Value, this.RadioA2.InputValue));
    		sMsg.AppendLine(String.Format("RadioA3: Chk=[{0}] Val=[{1}] [{2}]", this.RadioA3.Checked, this.RadioA3.Value, this.RadioA3.InputValue));
    		sMsg.AppendLine(String.Format("RadioA4: Chk=[{0}] Val=[{1}] [{2}]", this.RadioA4.Checked, this.RadioA4.Value, this.RadioA4.InputValue));
    		sMsg.AppendLine(new String('=', 60));
    		return sMsg.ToString();
    
    	}
    
    
    	public string DebugFormNVColl(string sFunc)
    	{
    		NameValueCollection nvColl = this.Request.Form;
    
    		StringBuilder sMsg = new StringBuilder();
    		sMsg.AppendLine(DateTime.Now.ToString() + new String('=', 60));
    		sMsg.AppendLine(sFunc);
    		sMsg.AppendLine("Request.Form");
    		sMsg.AppendLine("   [NDX]   KEY        VALUE");
    		for (int i = 0; i < nvColl.Count; i++)
    		{
    			sMsg.AppendLine(String.Format("   [{0}]     {1,-10} {2}", i, nvColl.GetKey(i), nvColl.Get(i)));
    		}
    
    		sMsg.AppendLine(new String('=', 60));
    
    		return sMsg.ToString();
    	}
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    	<title>Checkout Form - Ext.NET Examples</title>
    	<link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
    	<form runat="server">
    		<ext:ResourceManager runat="server" />
    
    		<h1>Checkout Form</h1>
    
    		<ext:Viewport runat="server" Layout="FitLayout">
    			<Items>
    				<ext:Container runat="server" Layout="HBoxLayout">
    					<LayoutConfig>
    						<ext:HBoxLayoutConfig Align="Stretch"></ext:HBoxLayoutConfig>
    					</LayoutConfig>
    					<Items>
    						<ext:FormPanel
    							runat="server"
    							Title="Complete Check Out"
    							Frame="true"
    							BodyPadding="5" Flex="1">
    							<TopBar>
    								<ext:Toolbar runat="server">
    									<Items>
    										<ext:Button runat="server" Text="Test Radio (OnDirectClick)" OnDirectClick="TestRadio_OnDirectClick" Flat="false" >
    										</ext:Button>
    									</Items>
    								</ext:Toolbar>
    							</TopBar>
    
    							<FieldDefaults LabelAlign="Right" LabelWidth="90" MsgTarget="Qtip" />
    
    							<Items>
    								<ext:Panel runat="server" Title="RadiosW - Using [NAME] in Defaults" Layout="HBoxLayout" Padding="10">
    									<Defaults>
    										<ext:Parameter Name="Name" Value="ccTypeW" />
    									</Defaults>
    									<Items>
    										<ext:Radio ID="RadioW1" 
    											runat="server"
    											BoxLabel="VISA"
    											Checked="true"   Flex="1"/>
    
    										<ext:Radio ID="RadioW2"
    											runat="server"
    											BoxLabel="MasterCard"   Flex="1" />
    
    										<ext:Radio ID="RadioW3"
    											runat="server"
    											BoxLabel="American Express"   Flex="1"/>
    
    										<ext:Radio ID="RadioW4"
    											runat="server"
    											BoxLabel="Discover"   Flex="1"/>
    									</Items>
    								</ext:Panel>
    
    								<ext:Panel runat="server" Title="RadiosX [NAME] on each Radio (NoDefaults)" Layout="HBoxLayout" Padding="10">
    								
    									<Items>
    										<ext:Radio ID="RadioX1"
    											runat="server"
    											BoxLabel="VISA"
    											Checked="true" Name="ccTypeX"  Flex="1"/>
    
    										<ext:Radio ID="RadioX2"
    											runat="server"
    											BoxLabel="MasterCard" Name="ccTypeX"   Flex="1"/>
    
    										<ext:Radio ID="RadioX3"
    											runat="server"
    											BoxLabel="American Express" Name ="ccTypeX"   Flex="1"/>
    
    										<ext:Radio ID="RadioX4"
    											runat="server"
    											BoxLabel="Discover" Name ="ccTypeX"   Flex="1"/>
    									</Items>
    
    								</ext:Panel>
    
    								<ext:FieldSet runat="server" TItle="RadiosY - RadioGroup with NO ID -- using [NAME] in Defaults"
    											 Layout ="AnchorLayout" DefaultAnchor="100%" Padding="10"> 
    									<Items>
    										<ext:RadioGroup  runat="server" Anchor="none">
    											<%--ID="RadioTestGroup"--%>
    											<LayoutConfig>
    												<ext:CheckboxGroupLayoutConfig AutoFlex="false" />
    											</LayoutConfig>
    											<Defaults>
    												<ext:Parameter Name="Name" Value="ccTypeY"  />
    												<ext:Parameter Name="style" Value="margin-right:15px;" />
    											</Defaults>
    											<Items>
    												<ext:Radio ID="RadioY1"
    													runat="server"
    													BoxLabel="VISA"
    													Checked="true" 
    													InputValue="visa" />
    
    												<ext:Radio ID="RadioY2"
    													runat="server"
    													BoxLabel="MasterCard"
    													InputValue="mastercard"/>
    
    												<ext:Radio ID="RadioY3"
    													runat="server"
    													BoxLabel="American Express" 
    													InputValue="amex"/>
    
    												<ext:Radio ID="RadioY4"
    													runat="server"
    													BoxLabel="Discover" 
    													InputValue="discover"/>
    											</Items>
    										</ext:RadioGroup>
    									</Items>
    								</ext:FieldSet>
    
    
    								<ext:FieldSet runat="server" TItle="RadiosZ - RadioGroup with ID - NoDefaults and no [NAME]"
    											 Layout ="AnchorLayout" DefaultAnchor="100%" Padding="10">
    									<Items>
    										<ext:RadioGroup  ID="RadioTestZGroup" runat="server" Anchor="none">
    											<LayoutConfig>
    												<ext:CheckboxGroupLayoutConfig AutoFlex="false" />
    											</LayoutConfig>
    											<%--<Defaults>
    												<ext:Parameter Name="Name" Value="ccTypeZ"  />
    												<ext:Parameter Name="style" Value="margin-right:15px;" />
    											</Defaults>--%>
    											<Items>
    												<ext:Radio ID="RadioZ1"
    													runat="server"
    													BoxLabel="VISA"
    													Checked="true"  />
    											
    												<ext:Radio ID="RadioZ2"
    													runat="server"
    													BoxLabel="MasterCard"/>
    											
    												<ext:Radio ID="RadioZ3"
    													runat="server"
    													BoxLabel="American Express" />
    											
    												<ext:Radio ID="RadioZ4"
    													runat="server"
    													BoxLabel="Discover" />
    											
    											</Items>
    										</ext:RadioGroup>
    									</Items>
    								</ext:FieldSet>
    
    
    								<ext:FieldSet runat="server" TItle="RadiosA - RadioGroup with No ID - [NAME] on each Radio - Nodefaults"
    											 Layout ="AnchorLayout" DefaultAnchor="100%" Padding="10">
    									<Items>
    										<ext:RadioGroup  runat="server" Anchor="none">
    											<LayoutConfig>
    												<ext:CheckboxGroupLayoutConfig AutoFlex="false" />
    											</LayoutConfig>
    											<%--<Defaults>
    												<ext:Parameter Name="Name" Value="ccTypeZ"  />
    												<ext:Parameter Name="style" Value="margin-right:15px;" />
    											</Defaults>--%>
    											<Items>
    												<ext:Radio ID="RadioA1"
    													runat="server"
    													BoxLabel="VISA"
    													Checked="true"  Name ="ccTypeA" />
    											
    												<ext:Radio ID="RadioA2"
    													runat="server"
    													BoxLabel="MasterCard"  Name ="ccTypeA" />
    											
    												<ext:Radio ID="RadioA3"
    													runat="server"
    													BoxLabel="American Express"  Name ="ccTypeA" />
    											
    												<ext:Radio ID="RadioA4"
    													runat="server"
    													BoxLabel="Discover"  Name ="ccTypeA" />
    											
    											</Items>
    										</ext:RadioGroup>
    									</Items>
    								</ext:FieldSet>
    
    										
    							</Items>
    							<Buttons>
    								
    
    								<ext:Button runat="server" Text="Test Radio (OnClick)" OnClick="TestRadio_OnClick">
    								</ext:Button>
    
    								<ext:Button runat="server" Text="Reset">
    									<Listeners>
    										<Click Handler="this.up('form').getForm().reset(); alert('Form Reset');"/>
    									</Listeners>
    								</ext:Button>
    
    								<ext:Button runat="server" Text="Complete Purchase" Width="150">
    									<Listeners>
    										<Click Handler="var form = this.up('form').getForm(); form.isValid() && Ext.MessageBox.alert('Submitted Values', form.getValues(true)); return true;" />
    									</Listeners>
    									<DirectEvents>
    										<Click OnEvent="CompletePurchase_ServerSideEvent"></Click>
    									</DirectEvents>
    								</ext:Button>
    							</Buttons>
    						</ext:FormPanel>
    						<ext:Panel runat="server" Flex="1" Title="Debug Messages" Layout="FitLayout">
    							<Items>
    								<ext:TextArea runat="server" ID="TestMessage"></ext:TextArea>
    							</Items>
    						</ext:Panel>
    					</Items>
    				</ext:Container>
    			</Items>
    		</ext:Viewport>
    	</form>
    </body>
    </html>
  4. #4
    Hello @AdvanceLoanTechnologies!

    Thanks for the impressive test case. I see there will be at least one bug to deal with. If we get more than one bug to track, would you agree on creating separate forum thread for each? The thought is, providing feedback for you at one thread-one-bug basis would be easier for everyone to track.

    While we're still investigating all issues you have compiled here, let's leave it as it is. I will try to make one post for each question. I also noticed some parts as just questions or usage that is not supposed to work, and I will cover these first, as they will not be likely to be generating any actual github issue nor requiring changes to the code in Ext.NET.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    The first point is the on click event.

    It does probably fire. Interesting you used TestRadio_OnDirectClick but didn't try OnDirectClick= on the button? Did you have a specific reason for this?

    Well calling by the OnClick will probably require you to manually craft both request and response in order to mimic an OnDirectClick, so we have the latter for the reason of interacting with Ext.NET components correctly.

    If using the OnDirectClick event, you would have to change the event handler's e argument type to DirectEventArgs.

    The OnDirectClick is but a shorthand to adding the full-blown direct event:

    <DirectEvents>
        <Click OnEvent="TestRadio_OnDirectClick" />
    </DirectEvents>
    I'll continue to post here as we get to the next topics of your inquiries.
  6. #6
    Now, about your RadiosY and RadiosA problem.

    I agree it should at least drop an error message at first... but then we'll be taking out freedom for customization, so that's quite a difficult check to make.

    Long story short, if you are using a RadioGroup, you must specify the GroupName property in the RadioGroup and not use Name in the individual radio entries.

    That said, don't rely on Defaults, nor the individual Name on each inner component. The radio group actually "groups" the radio items within and it should have the group's whole name. In such groups, the inner radio components effectively ignore the 'name' attribute. If you want a loosen grouping, you can use Panel, FieldSet, Container, or something like it to enclose them.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Now, the mystery as for why RadioZ works!

    Whenever you give it an ID and not a name, similarly (but not necessarily same) to all other Ext.NET components, the element DOM's id property becomes the HTML form's name one. So internally, Ext.NET sees RadioZ values from the RadioTestZGroup form submitted parameter.

    It can't be said "the same" as the other components from Ext.NET because the 'name' concept in radio groups extend to implying the name within the radio groups. Using a RadioGroup whenever you use the Radio components is a little safer to avoid client-side setting more than one value as true. You query the radio group's singular value, not the "checked" status of each radio in a given radio group.
    Fabrício Murta
    Developer & Support Expert
  8. #8
    As for the issue with the groups, which I initially thought as a bug or missing feature... This is actually something not feasible.

    Talking about your RadioW group that does not work.

    The problem here is that code behind can't evaluate defaults set even though you did it from code behind or markup. So it effectively can't map the Radio components to the name you set in the <Defaults /> block server-side. This is because the name binding to the component only happens at client-side. So if you really need to rely on this being resolved from client-side, you should rely on the Request.Form["ccTypeW"] or whichever default you set which ends up loosing its tie between the server-side component and client-side one.

    Of course this could be possible, but that "default" behavior is already covered by the RadioGroup component, and making this defaults or any other client-side name changing "sync" to server side will only mean more work and code. So the recommendation is, if you want to specify the name only once, use the RadioGroup to enclose the entries.

    Well, I hope this helps you and answers the questions in a positive way! If there's something still not answered, if I overlooked something, let us know. Your comprehensive test case helped a lot understand each issue. I also hope it was for you worth the while making up the test case!
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Hello, @AdvanceLoanTechnologies!

    It's been a while since we last posted here and, so far, no feedback from you. Do you still need help on this thread? We may mark this as closed if you still do not post in the next 7+ days. Even after we mark this as closed, you'll still be able to post, if need ever be.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Highlight Checked Radio Button in Radio Button Group
    By rcombis in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 06, 2014, 7:26 PM
  2. Replies: 8
    Last Post: Jul 16, 2014, 12:37 PM
  3. Radio Button
    By Vaishali in forum 1.x Help
    Replies: 4
    Last Post: Feb 07, 2012, 7:00 AM
  4. Problem of Radio State
    By gdboy2002 in forum 1.x Help
    Replies: 2
    Last Post: Nov 26, 2010, 12:41 AM
  5. [CLOSED] [1.0] Issue detecting pressed button state
    By edigital in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 29, 2010, 4:21 PM

Tags for this Thread

Posting Permissions