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

Ajax Manager at bottom of page

1 Answer 51 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Rizwan
Top achievements
Rank 1
Rizwan asked on 22 Sep 2009, 12:51 AM
Hi
   I have encountered a strange issue which took me hours to identify. If I add the ajax Manager script on top of the page then it works fine but if I add that at the bottom of the page the it has different behaviour. try this sample

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<%

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml">

 

<

 

head runat="server">

 

 

<title>Tab Application</title>

 

 

<style type="text/css">

 

 

.pageView

 

{

 

border: 1px solid #898c95;

 

 

border-top: none;

 

 

margin-top: -1px;

 

 

Height:500px !important;

 

 

width:450px;

 

}

 

.exampleWrapper

 

{

 

padding: 10px;

 

 

background: #f0f0f0;

 

 

float: left;

 

}

 

 

 

</style>

 

</

 

head>

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">

 

 

</telerik:RadScriptManager>

 

 

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="Web20">

 

 

</telerik:RadSkinManager>

 

 

 

 

 

<div>

 

 

<div class="exampleWrapper">

 

 

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Web20" AutoPostBack="true" Width="450px"

 

 

MultiPageID="mpvMain" SelectedIndex="0" OnClientTabSelecting="onTabSelecting" OnClientTabSelected="onClientTabSelected" OnTabClick="RadTabStrip1_TabClick">

 

 

<Tabs>

 

 

<telerik:RadTab runat="server" Text="Contacts" PageViewID="mpContacts" Selected="true" Value="CONTACTS">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="Details" PageViewID="mpDetails">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="Group Processing" PageViewID="mpGroupProcessing">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab runat="server" Text="Groups" PageViewID="mpGroups">

 

 

</telerik:RadTab>

 

 

</Tabs>

 

 

</telerik:RadTabStrip>

 

 

 

<telerik:RadMultiPage ID="mpvMain" runat="server" SelectedIndex="0" RenderSelectedPageOnly="true" >

 

 

<telerik:RadPageView runat="server" ID="mpContacts" CssClass="pageView" >

 

 

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="225px" HorizontalAlign="NotSet" EnableAJAX="true" LoadingPanelID="RadAjaxLoadingPanel1" >

 

 

<asp:Button runat="server" ID="btnClickMe" Text="Click Me" onclick="btnClickMe_Click" />

 

 

<asp:Label runat="server" ID="lblInBoundary" Text="This is contacts Tab in Boundary"></asp:Label>

 

 

</telerik:RadAjaxPanel>

 

 

<asp:Label runat="server" ID="lblOutOfBoundary" Text="This is contacts Tab out of Boundary"></asp:Label>

 

 

</telerik:RadPageView>

 

 

<telerik:RadPageView runat="server" ID="mpDetails" CssClass="pageView" >

 

 

<asp:Label runat="server" ID="lblDetails" Text="This is Detail Tab"></asp:Label>

 

 

</telerik:RadPageView>

 

 

<telerik:RadPageView runat="server" ID="mpGroupProcessing" CssClass="pageView" >

 

 

<asp:Label runat="server" ID="lblGroupProcessing" Text="This is Group Processing"></asp:Label>

 

 

<asp:TextBox runat="server" ID="txtGroupProcessing"></asp:TextBox>

 

 

<asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>

 

 

</telerik:RadPageView>

 

 

<telerik:RadPageView runat="server" ID="mpGroups" CssClass="pageView">

 

 

<asp:Label runat="server" ID="lblGroups" Text="This is groups"></asp:Label>

 

 

 

</telerik:RadPageView>

 

 

</telerik:RadMultiPage>

 

 

</div>

 

 

</div>

 

 

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>

 

 

 

 


 

<telerik:RadAjaxManager runat="server" ID="radAjaxManager">

 

 

 

 

 

<AjaxSettings>

 

 

 

 

 

<telerik:AjaxSetting AjaxControlID="RadTabStrip1">

 

 

 

 

 

<UpdatedControls>

 

 

 

 

 

<telerik:AjaxUpdatedControl ControlID="mpvMain"

 

 

LoadingPanelID="RadAjaxLoadingPanel1" />

 

 

 

 

 

<telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

 

 

 

 

 

</UpdatedControls>

 

 

 

 

 

</telerik:AjaxSetting>

 

 

 

 

 

 

</AjaxSettings>

 

 

 

 

 

</telerik:RadAjaxManager>

 

 

 

</

 

form>

 

 

 

<script type="text/javascript">

 

 

function onClientTabSelected(sender, args) {

 

}

 

function onTabSelecting(sender, args) {

 

 

 

 

}

 

</script>

 

</

 

body>

 

</

 

html>

on Server Side

 

protected

 

void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)

 

{

System.Threading.

Thread.Sleep(2000);

 

}

 

protected void btnClickMe_Click(object sender, EventArgs e)

 

{

System.Threading.

Thread.Sleep(2000);

 

 

lblInBoundary.Text =

DateTime.Now.ToString();

 

lblOutOfBoundary.Text =

DateTime.Now.ToString();

 

}


Now application has two different ajax callings ,
1) Through Ajax Manager when you change tab pages
2) Through AjaxPanel when you click button. 
 On First tab , I have ajaxPanel which contains 1 label within boundary along with button, So Click of button should only update the label within boundary and other label change from server side should not be reflected on client side. If you click the button then it will update only one label which is within boundary. Now click again and it will update both where it should only update first one.

To resolve the issue move this code from bottom to top just below SkinManager

<telerik:RadAjaxManager runat="server" ID="radAjaxManager">

 

 

 

 

 

<AjaxSettings>

 

 

 

 

 

<telerik:AjaxSetting AjaxControlID="RadTabStrip1">

 

 

 

 

 

<UpdatedControls>

 

 

 

 

 

<telerik:AjaxUpdatedControl ControlID="mpvMain"

 

 

LoadingPanelID="RadAjaxLoadingPanel1" />

 

 

 

 

 

<telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

 

 

 

 

 

</UpdatedControls>

 

 

 

 

 

</telerik:AjaxSetting>

 

 

 

 

 

 

</AjaxSettings>

 

 

 

 

 

</telerik:RadAjaxManager>

 


and now try again and it will work fine, I can work by placing the ajaxManager on Top but I was wondering what is the reason behind this ?

If you fail to recreate the issue then please let me know , I shall send you this sample project.

Regards
Rizwan Bashir

 

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Iana Tsolova
Telerik team
answered on 24 Sep 2009, 02:54 PM
Hello Rizwan,


Please try replacying the RadAjaxPanel with ASP:Panel and ajaxify it with RadAjaxManager as described here.
Let me know if it makes any difference.

Kind regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
Ajax
Asked by
Rizwan
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Share this question
or