RadioButtonList Problem in UI for ASP.NET AJAX

This is a migrated thread and some comments may be shown as answers.

RadioButtonList Problem

7 Answers 94 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Martin asked on 05 Aug 2008, 01:10 PM

Hi

I have a strange problem with RadSplitter:

A RadSplitter has a RadSlidingZone with a RadSlidingPane
which contains an asp:RadioButtonList and asp:CheckBox

1) I click to slide out the RadSlidingPane
2) I change the selected state of the RadioButtonList
3) I dock the RadSlidingPane

The RadioButtonList immediately reverts back to it's original selected state

(Changing the CheckBox state is fine)
(I'm using the latest ASP.NET Ajax controls)

I've simplified the ASPX code to that below:

Any help appreciated...

Regards

Martin

----------------------------------------------------------
-- ASPX code
----------------------------------------------------------

        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="660px" Width="800px" Skin="Telerik" >

            <telerik:RadPane ID="RadPaneLeft" runat="server" Width="22px" Scrolling="None" Height="100%" >

                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="22px"
                        BackColor="White" Height="100%" SlideDirection="Right" SlideDuration="10" ClickToOpen="True" >

                    <telerik:RadSlidingPane ID="RadSlidingPaneOrderBy" runat="server"
                        Title="Order By" Width="300px" TabView="TextOnly" >

                        <asp:RadioButtonList ID="RadioButtonDirection" runat="server" RepeatDirection="Horizontal" >
                            <asp:ListItem Text="Asc" Selected="True" ></asp:ListItem>
                            <asp:ListItem Text="Desc"></asp:ListItem>
                        </asp:RadioButtonList>

                        <asp:CheckBox ID="CheckBoxListPageBreak" runat="server" Text="Page break on group" Checked="false" />

                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>

            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="False" Visible="True" />

            <telerik:RadPane ID="RadPaneRight" runat="server">
            </telerik:RadPane>

        </telerik:RadSplitter>

7 Answers, 1 is accepted

answered on 11 Aug 2008, 03:00 PM

Hi Martin,
Please note that we only reproduced the problem under IE - under Firefox, Opera and Safari everything was as expected. I have prepared a workaround for you, that you can use until we are able to fix the problem. Just place the code bellow just after the ScriptManager declaration:

    
            <script type="text/javascript">  
        
                Telerik.Web.UI.RadSlidingPane.prototype._oldMoveRootToParent = Telerik.Web.UI.RadSlidingPane.prototype._moveRootToParent;  
        
                Telerik.Web.UI.RadSlidingPane.prototype._moveRootToParent = function(toOriginalParent)  
        
                {  
        
                    // Save the state.  
        
                    if($telerik.isIE)     
        
                    {  
        
                        var rootElement = this._contentElement;  
        
                        var checkedRadioButtons = [];  
        
                        var allInputs = rootElement.getElementsByTagName('input');   
        
                        for(var i=0, length=allInputs.length; i< length; i++)  
        
                        {  
        
                            var input = allInputs[i];  
        
                            if(input.type == 'radio')  
        
                            {  
        
                                checkedRadioButtons.push(input.getAttribute('checked'));  
        
                            }  
        
                        }  
        
                    }  
        
                    this._oldMoveRootToParent(toOriginalParent);  
        
                    // Load the state.  
        
                    if($telerik.isIE)  
        
                    {         
        
                        var rootElement = this._contentElement;  
        
                        var allInputs = rootElement.getElementsByTagName("input");  
        
                        for(var i=allInputs.length - 1; i>= 0; i--)  
        
                        {  
        
                            var input = allInputs[i];  
        
                            if(input.type == 'radio')  
        
                            {      
        
                                if(checkedRadioButtons.length == 0) break;  
        
                                input.setAttribute('checked', checkedRadioButtons.pop());  
        
                            }  
        
                        }  
        
                    }     
        
                };  
        
                </script>

Sincerely yours,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 17 Aug 2009, 09:20 AM

Hi Guys
A problem I reported last year seems to have reappeared...
I have a radiobuttonlist in a slidingpane which has 3 items:

<asp:RadioButtonList ID="RadioButtonListPayment" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Value="0">Card</asp:ListItem>
    <asp:ListItem Value="1">Post</asp:ListItem>
    <asp:ListItem Selected="True" Value="2">Both</asp:ListItem>
</asp:RadioButtonList></td>

In IE7 everything works fine
In IE8 when the form is loaded the Selected Value/Index reverts to "0"
even though item 3 is Selected ='True'

ALSO if I click the selected value to "3" at runtime then dock the SlidingPane
the value reverts to "0"

Works fine in IE7 and Firefox...

Regards

Martin

Accepted

answered on 19 Aug 2009, 03:22 PM

Hello Martin,
I tested the following code with the latest version of the assembly (2009.2.701.20) but I was not able to reproduce the problem you describe in IE8:

    
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                    <telerik:RadSplitter ID="RadSplitter1" runat="server"> 
        
                        <telerik:RadPane ID="RadPane1" runat="server" Width="22px" Scrolling="none"> 
        
                            <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server"> 
        
                                <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Title"> 
        
                                    <asp:RadioButtonList ID="RadioButtonListPayment" runat="server" RepeatDirection="Horizontal"> 
        
                                        <asp:ListItem Value="0">Card</asp:ListItem> 
        
                                        <asp:ListItem Value="1">Post</asp:ListItem> 
        
                                        <asp:ListItem Selected="True" Value="2">Both</asp:ListItem> 
        
                                    </asp:RadioButtonList> 
        
                                </telerik:RadSlidingPane> 
        
                            </telerik:RadSlidingZone> 
        
                        </telerik:RadPane> 
        
                        <telerik:RadPane ID="RadPane2" runat="server"> 
        
                        </telerik:RadPane> 
        
                    </telerik:RadSplitter> 
        
                </form> 
        
            </body> 
        
            </html>

Could you please provide additional information what happened that made the problem reappear - for example, the upgrade to the latest version (2009.2.701.20) resulted in this. It would be best if you could open a new support ticket and send us a simple running project that demonstrates the problem in IE8. That way we will be able to research what causes it.

Greetings,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 26 Aug 2009, 12:43 PM

Hi Tsvetie

Sorry for the delay....
and thanks for your response

I was using the version 2009.1.527.20 (IT DID'NT WORK)
After upgrading to 2009.2.701.20
the problem was resolved ....

Regards

Martin
Code used below....

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadSplitter ID="RadSplitter1" runat="server" >
            <telerik:RadPane ID="RadPane1" runat="server" Width="22px" Scrolling="none">
                <telerik:RadSlidingZone ID="RadSlidingZone2" runat="server">
                    <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Title">
                        <asp:RadioButtonList ID="RadioButtonListPayment" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Value="0">Card</asp:ListItem>
                            <asp:ListItem Value="1">Post</asp:ListItem>
                            <asp:ListItem Selected="True" Value="2">Both</asp:ListItem>
                        </asp:RadioButtonList>
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane2" runat="server">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </form>