Hi Friends,
I have 2 updatepanels on a page each having seperate telerik radtabstrip (type on demand tab) each tab having separate user control. I want to show loading image for respective tab click until the control load. I am using separate UpdatePanelAnimationExtender for each update panel. I am calling separate javascript for onupdating and onupdated call. However the image get load for all the panel instead of particular panel. I tried with condition script but no solution. Below is the code. I would appreciate it a lot if someone can help me!
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="trscrt" runat="server" EnablePageMethods="true" EnablePartialRendering="true">
</asp:ToolkitScriptManager>
<script type="text/javascript" language="javascript">
function onTabSelecting(sender, args) {
if (args.get_tab().get_pageViewID()) {
args.get_tab().set_postBack(false);
}
document.myPanel = args.get_tab().get_pageViewID();
}
//Mytab
function onUpdating_Mytab() {
var updateProgressDiv_Mytab = $get('DivProgressimg_mytab');
updateProgressDiv_Mytab.style.display = '';
var Targetcontrol = $get('RadTabStrip_Mytab');
var TargetcontrolBound = Sys.UI.DomElement.getBounds(Targetcontrol);
var updateProgressDivBound = Sys.UI.DomElement.getBounds(updateProgressDiv_Mytab);
var x = 300;
var y = 200;
Sys.UI.DomElement.setLocation(updateProgressDiv_Mytab, x, y);
}
function onUpdated_Mytab() {
var updateProgressDiv_Mytab = $get('DivProgressimg_mytab');
updateProgressDiv_Mytab.style.display = 'none';
}
function onUpdating_Hot_Listing() {
var updateProgressDiv_Hot_Listing = $get('DivProgressimg_Hot_Listing');
updateProgressDiv_Hot_Listing.style.display = '';
var Targetcontrol = $get('RadTabStrip_Hot_Listing');
var TargetcontrolBound = Sys.UI.DomElement.getBounds(Targetcontrol);
var updateProgressDivBound = Sys.UI.DomElement.getBounds(updateProgressDiv_Hot_Listing);
var x = 300;
var y = 500;
Sys.UI.DomElement.setLocation(updateProgressDiv_Hot_Listing, x, y);
}
function onUpdated_Hot_Listing() {
var updateProgressDiv_Hot_Listing = $get('DivProgressimg_Hot_Listing');
updateProgressDiv_Hot_Listing.style.display = 'none';
}
</script>
<div>
<asp:UpdatePanelAnimationExtender ID="Upae_mytab" runat="server"
TargetControlID="UpdatePanel_Mytab" >
<Animations>
<OnUpdating>
<Condition ConditionScript="document.myPanel == RadTabStrip_Mytab;">
<ScriptAction Script="onUpdating_Mytab();" />
</Condition>
</OnUpdating>
<OnUpdated>
<Condition ConditionScript="document.myPanel == RadTabStrip_Mytab;">
<ScriptAction Script="onUpdated_Mytab();" />
</Condition>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
<asp:UpdatePanelAnimationExtender ID="upae_Hot_Listing" runat="server" TargetControlID="UpdatePanel_Hot_Listing">
<Animations>
<OnUpdating>
<Condition ConditionScript="document.myPanel == RadTabStrip_Hot_Listing;">
<ScriptAction Script="onUpdating_Hot_Listing();" />
</Condition>
</OnUpdating>
<OnUpdated>
<Condition ConditionScript="document.myPanel == RadTabStrip_Hot_Listing;">
<ScriptAction Script="onUpdated_Hot_Listing();" />
</Condition>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
<div id="divMain">
<asp:UpdatePanel ID="UpdatePanel_Mytab" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<div class="bottomSheetFrame">
<table>
<tr>
<td>
<%--For Tab--%>
<telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip_Mytab"
SelectedIndex="0" runat="server" Width="680px" MultiPageID="RadMultiPage_Mytab"
CssClass="idTabs" EnableEmbeddedSkins="false" OnTabClick="RadTabStrip_Mytab_TabClick"
Orientation="HorizontalBottom">
</telerik:RadTabStrip>
<div align="center" id="DivProgressimg_mytab" style="display: none;">
<img id="imgmytab" runat="server" alt="Processing" title="Processing" align="middle"
src="Images/loading.gif" />
</div>
<%--For content--%>
<telerik:RadMultiPage ID="RadMultiPage_Mytab" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage_Mytab_PageViewCreated"
CssClass="multiPage">
</telerik:RadMultiPage>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="divMainHot_Listing">
<asp:UpdatePanel ID="UpdatePanel_Hot_Listing" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<div class="bottomSheetFrame" id="DivProgressimg_Hot_Listing1">
<table>
<tr>
<td align="center" valign="top" style="height: 350px;">
<%--For Tab--%>
<telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip_Hot_Listing"
SelectedIndex="0" runat="server" Width="650px" MultiPageID="RadMultiPage_Hot_Listing"
CssClass="idTabs" EnableEmbeddedSkins="false" OnTabClick="RadTabStrip_Hot_Listing_TabClick"
Orientation="HorizontalBottom">
</telerik:RadTabStrip>
<div align="center" id="DivProgressimg_Hot_Listing" style="display: none;">
<img id="imghotlisting" runat="server" alt="Processing" title="Processing" align="middle"
src="Images/loading.gif" />
</div>
<%--For content--%>
<telerik:RadMultiPage ID="RadMultiPage_Hot_Listing" runat="server" SelectedIndex="0"
OnPageViewCreated="RadMultiPage_Hot_Listing_PageViewCreated" CssClass="multiPage">
</telerik:RadMultiPage>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>