Radio GroupName AJAX

[SDI]

When i do a postback with RadButtons toggletype radio and have specific groupnames, it looses the groupname on postback and ajax panel wrapper. however i put asp:RadioButtons with their own specific groupnames and it doesnt have a problem, they still recognize each other.

  <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
          <telerik:AjaxSetting AjaxControlID="RadButtonSetupSave">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadAjaxPanelMain" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnResponseEnd="OnResponseEnd" OnRequestStart="OnRequestStart"/>
</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" ToolTip="Please wait..."
    Height="50px" Width="50px" />
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" />

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelMain" Width="1000px" Height="1000px">

    <div style="margin: 5px;">

        <telerik:RadButton runat="server" ID="RadButtonSetupSave" Text="Save"
            AutoPostBack="true" />

        <div style="float: left; width: 100%; margin: 15px;">
            <div style="float: left; width: 100%; margin: 5px;">
                <telerik:RadButton runat="server" ID="RadButton1" ButtonType="ToggleButton" Text="RadButton1"
                    ToggleType="Radio" AutoPostBack="false" GroupName="GroupNameRadButton" />
            </div>

            <div style="float: left; width: 100%; margin: 5px;">
                <telerik:RadButton runat="server" ID="RadButton2" ButtonType="ToggleButton" Text="RadButton2"
                    ToggleType="Radio" AutoPostBack="false" GroupName="GroupNameRadButton" />
            </div>
        </div>

        <div style="float: left; width: 100%; margin: 15px;">
            <div style="float: left; width: 100%; margin: 5px;">
                <asp:RadioButton runat="server" ID="RadioButton1" Text="RadioButton1"
                    AutoPostBack="false" GroupName="GroupNameRadioButton" />
            </div>

            <div style="float: left; width: 100%; margin: 5px;">
                <asp:RadioButton runat="server" ID="RadioButton2" Text="RadioButton2"
                    AutoPostBack="false" GroupName="GroupNameRadioButton" />
            </div>
        </div>

    </div>
</telerik:RadAjaxPanel>

So first time in the form, all the buttons behave accordingly, respecting the groupnames. After the save button is hit and a post back occurs the telerik buttons lose radio groupname functionally, but the standard asp buttons do not. Is there a workaround?

Thanks!

[Danail Vasilev]

Hi Brian,

From the provided code snippet it seems that you are trying to ajaxify the RadAjaxPanel with RadAjaxManager. Note that we highly recommend to avoid working with the RadAjaxManager & RadAjaxPanel controls at the same time. More information on the matter is available in Ajaxifying Controls Wrapped in RadAjaxPanel and Added to RadAjaxManager Settings help article.

As for the issue with the persistence of the RadButton toggle states I have tried reproducing it but to no avail. You can watch a short video with the test in the attached archive and then tell me what I am missing. Can you try reproducing the unexpected behavior with the attached VS example and then tell us what changes you have made, so that we can make an investigation locally?

Regards,
Danail Vasilev
Telerik

[SDI]

Okay i found the problem.

I am using a master page and RadNotification for Timeouts. I am using the RadAJAXManager for the OnResponseEnd and OnRequestStart to handle it. The postback for the RadButton causes the AJAX to fire ASP:Panel for posting back the radio buttons. The master page has code to handle the Timeouts for all my pages.

This is the default page code-behind marked up:

<%@ Page Title="" Language="C#" MasterPageFile="MasterPage.Master" AutoEventWireup="false"  ValidateRequest="false" CodeFile="~/Default.aspx.cs" Inherits="Examples7_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">



</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <h1>RSI Admin Console</h1>
    <br />

      <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
              <telerik:AjaxSetting AjaxControlID="RadButtonSetupSave">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnResponseEnd="OnResponseEnd" OnRequestStart="OnRequestStart"/>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" ToolTip="Please wait..."
        Height="50px" Width="50px" />
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" />

    <asp:Panel runat="server" ID="Panel1" Width="1000px" Height="1000px"  >

        <div style="margin: 5px;">

            <telerik:RadButton runat="server" ID="RadButtonSetupSave" Text="Save"
                AutoPostBack="true" />

            <div style="float: left; width: 100%; margin: 15px;">
                <div style="float: left; width: 100%; margin: 5px;">
                    <telerik:RadButton runat="server" ID="RadButton1" ButtonType="ToggleButton" Text="RadButton1"
                        ToggleType="Radio" AutoPostBack="false" GroupName="GroupNameRadButton" />
                </div>

                <div style="float: left; width: 100%; margin: 5px;">
                    <telerik:RadButton runat="server" ID="RadButton2" ButtonType="ToggleButton" Text="RadButton2"
                        ToggleType="Radio" AutoPostBack="false" GroupName="GroupNameRadButton" />
                </div>
            </div>

            <div style="float: left; width: 100%; margin: 15px;">
                <div style="float: left; width: 100%; margin: 5px;">
                    <asp:RadioButton runat="server" ID="RadioButton1" Text="RadioButton1"
                        AutoPostBack="false" GroupName="GroupNameRadioButton" />
                </div>

                <div style="float: left; width: 100%; margin: 5px;">
                    <asp:RadioButton runat="server" ID="RadioButton2" Text="RadioButton2"
                        AutoPostBack="false" GroupName="GroupNameRadioButton" />
                </div>
            </div>

        </div>
    </asp:Panel>


    <telerik:RadScriptBlock ID="RadScriptBlock0" runat="server">
        <script type="text/javascript">
            //![CDATA[





            function OnResponseEnd(sender, eventArgs) {
                //alert('Response end initiated by: ' + eventArgs.get_eventTarget());
                document.body.style.cursor = "default";
                // function in MasterPage
                ContinueSession();

            }

            function OnRequestStart(sender, eventArgs) {
                document.body.style.cursor = "wait";
            }
            //]]>
        </script>
    </telerik:RadScriptBlock>




</asp:Content>

Here is the master page which has the ContinueSession being handled after the Save Button click from the OnResponseEnd

<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">

    <telerik:RadScriptManager ID="RadScriptManagerMaster" runat="server" EnablePageMethods="True">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadStyleSheetManager ID="SSH1" EnableStyleSheetCombine="true" runat="server">
        <StyleSheets>
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Editor.css" />
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Editor.Default.css" />
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Window.css" />
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Window.Default.css" />
        </StyleSheets>
    </telerik:RadStyleSheetManager>

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">

            function ContinueSession() {

                var myRadNotification = $find("<%= RadNotificationSessionTimeout.ClientID %>");

                if (myRadNotification == null) return;

                // make sure we dont redirect
                myToRedirect = false;

                //we need to contact the server to restart the Session - the fastest way is via callback
                //calling update() automatically performs the callback, no need for any additional code or control
                myRadNotification.update();
                myRadNotification.hide();

            }


        </script>
    </telerik:RadScriptBlock>

    <telerik:RadSkinManager ID="RadSkinManagerMaster" runat="server" Skin="Web20" />

    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>


    <telerik:RadNotification ID="RadNotificationSessionTimeout" runat="server" >
        <ContentTemplate>
            <div style="float: left; width: 100%;">
                <div style="float: left; width: 78%; text-align: center; vertical-align: middle;">
                    Your session is about to expire in 2 minutes.<br />
                    Do you wish to continue this session?<br />
                </div>
            </div>
            <div style="text-align: center;">
                <br />
                Time remaining:  <span id="myLabelTimer">119</span><br />
                <br />
            </div>
            <div style="text-align: center;">
                <telerik:RadButton ID="RadButtonContinueSession" runat="server" Text="continue..."
                    OnClientClicked="ContinueSession()" AutoPostBack="false" />
            </div>
        </ContentTemplate>
    </telerik:RadNotification>

    </form>
</body>
</html>

The problem is with the "RadButtonContinueSession" if i remove that button, the GroupNames work on the telerik RadButtons with Radio toggles. If i put it back the fail again. There is something wrong here. I removed the button "RadButtonContinueSession" and put a 

<telerik:RadButton ID="RadButton1" runat="server" /> 

...and it fails again, If i remove it, its all good again. This is very strange behavior to say the least. 

Can you duplicate this??

Thanks for looking into it.

[Danail Vasilev]

Hi Brian,

It seems that the OnClientClicked handler of the RadButton is not set properly (i.e., OnClientClicked="ContinueSession()"), so that when page loads ContinueSession() function will be called. When you declare event handlers in RadControls, including the RadButton you must set only the name of the JavaScript function. For example:

<telerik:RadButton ID="RadButtonContinueSession" runat="server" Text="continue..."
                        OnClientClicked="ContinueSession" AutoPostBack="false" />

More information on the matter is available in Migrating OnClientClick handlers from ASP button to Telerik’s ASP.NET AJAX Button blog post.

From the provided example it seems that when a partial postback is performed ContinueSession method is called. In this method, however, a call back is performed, so that when the page loads the method ContinueSession() is called again which lead to recursive calling. You can solve that by setting OnClientClicked handler of the button to "ContinueSession".

Regards,
Danail Vasilev
Telerik