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

RadTabStrip Click server event not fired by client (RadAjaxManager)

1 Answer 203 Views

Ajax

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

Veronique asked on 26 Jun 2013, 04:24 PM

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

1 Answer, 1 is accepted

answered on 01 Jul 2013, 02:30 PM

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.