RadioButtonList Problem

[Martin]

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>

[Svetlina Anati]

Hi Martin,

Thank you for reporting this problem, I was able to reproduce it. The problem will need some additional research which will take some time. I will write back here immediately when I have some more information about it and a possible workaround for you.

Sincerely yours,
Svetlina
the Telerik team

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

[Martin]

Hi Svetlina

Many thanks for that...

I look forward to heraring the outcome

Regards

Martin

[Tsvetie]

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.

[Martin]

Hi Tsvetie

Many thanks for the code patch....
Your excellent support is appreciated

I'll implement that and await your update on a more permanent solution....

Kind Regards

Martin

[Martin]

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

[Tsvetie]

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.

[Martin]

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>