[OPEN] [#1423] [4.2.0] RadioGroup issue

  1. #1

    [OPEN] [#1423] [4.2.0] RadioGroup issue

    Hello,
    I upgraded to 4.2, but I am facing a new problem, I have a window that contains a radiogroup to choose language and I have to put a listener on change on radiogroup , I tried two methods in a javascript funtion to get the checked value in this radiogroup (as seen in example below) but in the first method the checked input value is not true and it is not taking the checked one and in the second method I am retrieving that the two radio buttons are checked (using ".checked" which is always true) which is also wrong.
    this is a weird behaviour in 4.2, it didn't exist in 4.1.

    Here is the example:

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <script type="text/javascript">
    
    
            function ChangeInterfaceLanguage()
            {
                //First Method
                var language = App.RadioGroup2.getChecked()[0].inputValue;
                alert(language);
    
                //Second method
                language = App.Arabic.checked;
                alert(language);
    
                language = App.English.checked;
                alert(language);
            }
    
        </script>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
         <ext:Window 
                ID="Window1" 
                runat="server" 
                Closable="false"
                Resizable="false"
                Height="200" 
                Icon="Lock" 
                Title="Login"
                Draggable="false"    
                Width="350"
                Modal="false"
                BodyPadding="5"
                Layout="FormLayout"
                Y="320"
                Region="Center"   >
                        
          <Items>
                    <ext:TextField 
                        ID="txtUsername" 
                        runat="server" 
                        FieldLabel="UserName" 
                        AllowBlank="false"
                        BlankText="Your username is required."
                        LabelCls="LabelStyle"
                       >
    
    
    
                        <Listeners>
                             <SpecialKey Handler="
                        if (e.getKey() == e.ENTER) {
                            e.stopEvent();
                            App.Button1.fireHandler();
                        }
                        ">
                            </SpecialKey> 
                        </Listeners>
                    </ext:TextField>
                       
                        
                       
                    <ext:TextField 
                        ID="txtPassword" 
                        runat="server" 
                        InputType="Password" 
                        FieldLabel="Password" 
                        AllowBlank="false" 
                        BlankText="Your password is required."
                        LabelCls="LabelStyle"
                        autocomplete="new-password"
                      >
    
                          <Listeners>
                             <SpecialKey Handler="
                        if (e.getKey() == e.ENTER) {
                            e.stopEvent();
                            App.Button1.fireHandler();
                        }
                        ">
                            </SpecialKey> 
                        </Listeners>
                    </ext:TextField>
    
                      <ext:RadioGroup
                                ID="RadioGroup2"
                                runat="server"
                                GroupName="RadioGroup2"
                                 ColumnsWidths="200,200">
                                <Items>
                                    <ext:Radio runat="server" ID="Arabic" LabelAlign="Right" BoxLabel="عربي" InputValue="ar" Checked="True"/>
                                    <ext:Radio runat="server" ID="English"  LabelAlign="Right" BoxLabel="English" InputValue="en" />
                                </Items>
                          <Listeners>
                              <Change Handler="ChangeInterfaceLanguage()" />
                          </Listeners>
                            </ext:RadioGroup>
    
    
                    
    
            </Items>
                <Buttons>
                    <ext:Button ID="Button1" runat="server" MinWidth="150" Text="Login" Icon="Accept">
                    <Listeners>
                    <Click Handler="VerifyCredentials()">
                    </Click>
                    </Listeners>
                    </ext:Button>
                </Buttons>
    
          </ext:Window>
        </form>
    </body>
    </html>

    Also note that if I am updating or rendering a container that contains a radiogroup, the checked one will be unchecked, in 4.1 on updating or rendering a container the checked one is not lost.


    Thank you
    Last edited by Geovision; Jan 25, 2017 at 11:10 AM.
  2. #2
    Hello @Geovision!

    Please don't rely on current items values during a change event, but on the parameters passed to the event itself.

    Change your line 16 to:

    function ChangeInterfaceLanguage(item, newValue, oldValue) {
    Then your line 109 to:

    <Change Fn="ChangeInterfaceLanguage" />
    Then adapt ChangeInterfaceLanguage to use the newValue and oldValue.

    The item parameter on the event handler function is just a reference to the radioGroup component itself. So instead of App.RadioGroup2.getChecked() (just as an example -- not good to rely on that during the change event) you can just use item.getChecked().

    You have a good point though, usually components have also a BeforeChange event, then I would also expect from a Change event to be right after the change is applied to the component. But in this case, the event provides the new and previous values, so that's where we should rely in general.

    About the other problem, can you (if not already) open a new forum thread reporting it? Maybe there's a bug within, or maybe just an usage issue we could help with. Well, or a bug where we can point you a direction to overcome it.

    Hope this helps! And thanks for the feedback on your experience migrating to Ext.NET 4.2!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello Again!

    Your other issue convinced me about this being an issue. As the event triggers at a moment which the component is in an inconsistent state, any server side call during this event will submit the radio group component with an incorrect value.

    We've created the issue #1423 to track this issue. The problem is inherent from ExtJS and we've reported there (more info on the github issue).

    Thank you for reporting us the issue!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Jan 27, 2017, 7:00 AM
  2. Replies: 2
    Last Post: Apr 15, 2016, 10:42 AM
  3. [OPEN] [#425] radiogroup allowblank not working
    By SoftwareMHC in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 05, 2014, 8:21 PM
  4. Replies: 8
    Last Post: Jul 12, 2013, 12:01 PM
  5. [OPEN] [#130] RadioGroup SetValue
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jan 18, 2013, 11:07 AM

Posting Permissions