[OPEN] [#1421] [4.2.0] After Render RadioGroup Items reset the checked one

  1. #1

    [OPEN] [#1421] [4.2.0] After Render RadioGroup Items reset the checked one

    Hello,

    I have a window that contains a Radigroup, on checking a radio item in the RadioGroup I want to change the RTL property of the window and render it again, in 4.2 when rendering the window it is resetting the checked Radio, in 4.1 this issue was not detected.

    Please refer to the test case below.

    <%@ 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(item, newValue, oldValue)
            {
                
                //console.log("newValue", newValue);
                //alert(newValue.RadioGroup2);
                //console.log("oldValue", oldValue);
                //console.log("item.getChecked()", item.getChecked());
    
                App.direct.UpdateContainer();
            }
    
        </script>
    
        <script runat="server">
        
            [DirectMethod]
            public void UpdateContainer()
            {
                Window1.Render();
            }
        
        </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 Fn="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>

    Thank you
  2. #2
    Hello @Geovision!

    Thanks for reporting the issue! We've logged it under #1421 in github!

    There was not just a change in the radio group's change event trigger time. There's also a change in its template which introduced one actual bug, which the bug entry mentioned above will deal with.

    But this means we have two problems now: during the change event, we are having the radio items in an inconsistent state where the two entries are checked! We will have to give this a better thought before fixing, but at first that's a race condition.

    To ensure you submit a "sane" control, we can "haste" cleaning up the to-be-cleared entry before triggering the direct method on your call. To do so, use this code on your javascript area:

    function ChangeInterfaceLanguage(item, newValue, oldValue) {
        var queryProperty = Object.keys(newValue)[0];
    
        cleanRadioSelection(item, newValue[queryProperty]);
    
        App.direct.UpdateContainer();
    }
    
    function cleanRadioSelection(radioGroup, validValue) {
        var boxes = radioGroup.getChecked(),
            boxCount = boxes.length;
    
        if (boxCount > 1) {
            for (var idx = 0; idx < boxCount; idx++) {
                var box = boxes[idx];
    
                if (box.hiddenField && box.hiddenField.dom && box.hiddenField.dom.value != validValue) {
                    // Removes the 'name' attribute from the DOM element so that it is not submitted.
                    box.hiddenField.dom.removeAttribute("name");
                }
            }
        }
    }
    This addresses but a part of the problem. The other part will be soon available on GitHub if you pull latest version but, to be able to work in the meanwhile, here's a dedicated version of the cleanRadioSelection() method above that will complement the changes to work with 4.2.0 stock (NuGet/download):

    function cleanRadioSelection(radioGroup, validValue) {
        var boxes = radioGroup.getChecked(),
            boxCount = boxes.length;
    
        if (boxCount > 1) {
            for (var idx = 0; idx < boxCount; idx++) {
                var box = boxes[idx];
    
                if (box.hiddenField && box.hiddenField.dom) {
                    if (box.hiddenField.dom.value != validValue) {
                        // Removes the 'name' attribute from the DOM element so that it is not submitted.
                        box.hiddenField.dom.removeAttribute("name");
                    } else if (Ext.net.Version == "4.2.0") { // only necessary if Ext.NET is 4.2.0
                        box.inputEl.removeAttribute("name");
                    }
                }
            }
        }
    }
    Then it will behave exactly like Ext.NET 4.1.0. Please, let us know if the workaround above does not work for you.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you this workaround worked with me.
  4. #4
    Hello @GeovisioN!

    Thanks for the feedback, we really appreciate it, and we're glad it helped!

    Now updated the thread title to reflect the issue and status and moved it to the bugs forum. In the end, the change with the "time" at which the radio group's change event is triggering is very undesirable.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Clear RadioGroup checked item
    By chunhuxiao in forum 1.x Help
    Replies: 0
    Last Post: Apr 26, 2012, 6:34 AM
  2. RadioGroup set checked value
    By David Pelaez in forum 1.x Help
    Replies: 1
    Last Post: Jan 12, 2012, 8:59 PM
  3. RadioGroup With InputValue cann't checked
    By nanlinfeixue in forum 1.x Help
    Replies: 5
    Last Post: Jul 01, 2011, 6:38 AM
  4. [CLOSED] [1.0] radiogroup: set checked
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 14, 2010, 2:28 PM
  5. Replies: 4
    Last Post: Jun 24, 2010, 11:09 PM

Posting Permissions