RadTabStrip Click server event not fired by client (RadAjaxManager)

2 posts, 0 answers
  1. Veronique
    Veronique avatar
    19 posts
    Member since:
    Jul 2011

    Posted 26 Jun 2013 Link to this post

    In the following example, can you explain me why the RadTabStrip1_TabClick server event is not fired ?
    The event is fired only if I remove the Button1 AjaxSetting. 
    How can I keep the loading panel and raise the server event ?

    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/jquery.min.js" />       
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Button1" EventName="Click">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>           
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
     
        <asp:Button ID="Button1" runat="server" OnClientClick="ChangeTab()" Text="Click here if you really want to change tab" style="display:none" />
        <asp:Panel ID="Panel1" runat="server">
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" AutoPostBack="true" OnClientTabSelecting="RadTabStrip1_ClientTabSelecting"
                SelectedIndex="0" ontabclick="RadTabStrip1_TabClick" >
            <Tabs>
                <telerik:RadTab Text="Tab A" PageViewID="PageViewA" ></telerik:RadTab>
                <telerik:RadTab Text="Tab B" PageViewID="PageViewB" ></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
     
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" >
            <telerik:RadPageView ID="PageViewA" runat="server">
                Tab a<br />
                <asp:Label ID="labelViewA" runat="server" Text="Not updated by the server yet"></asp:Label>      
            </telerik:RadPageView>
            <telerik:RadPageView ID="PageViewB" runat="server">
                Tab b<br />
                <asp:Label ID="labelViewB" runat="server" Text="Not updated by the server yet"></asp:Label>      
            </telerik:RadPageView>
         </telerik:RadMultiPage>
         </asp:Panel>
         <telerik:RadScriptBlock ID="RadScriptBlock" runat="server">
            <script language="javascript" type="text/javascript">
                 
                var lastTabClickedItem = null;
                var changeTabConfirmed = false;
     
                function RadTabStrip1_ClientTabSelecting(sender, eventArgs)
                {
                    var button1 = $('#<%= Button1.ClientID %>');
                    if (changeTabConfirmed == true) {
                        changeTabConfirmed = false;                   
                        button1.hide();
                    }
                    else {
                        eventArgs.set_cancel(true);
                        lastTabClickedItem = eventArgs.get_tab();               
                        button1.show();
                    }
                }
     
                function ChangeTab() {
                    changeTabConfirmed = true;
                    lastTabClickedItem.click();
                }
            </script>
         </telerik:RadScriptBlock>
        </form>
    </body>

    protected void RadTabStrip1_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
    {
        if (e.Tab.PageViewID == "PageViewA")
        {
            labelViewA.Text = "Updated by the server";
        }
        else
        {
            labelViewB.Text = "Updated by the server";
        }           
    }

    Thank you
  2. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 01 Jul 2013 Link to this post

    Hello Veronique,

    Since the AutoPostBack property of the TabStrip is enabled, you will need to stop the postback initiated by the button to avoid double post to the server:
    OnClientClick="ChangeTab(); return false;"

    Furthermore, please note that the Panel should also update itself:
    <telerik:AjaxSetting AjaxControlID="Panel1">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="Panel1" />
        </UpdatedControls>
    </telerik:AjaxSetting>

    Hope this helps. Please make the suggested modifications and let me know if it works for you.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top