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

Cannot Display Loading Image

5 Answers 71 Views

Ajax

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

Evelio asked on 15 Dec 2013, 08:22 PM

I am not able to display a loading image while clicking on my tabstrip, please help

aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestLoadingPanel.aspx.vb" Inherits="Controls_Products_TestLoadingPanel" %>
<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadAjaxManager runat="server" DefaultLoadingPanelID="LoadingPanel1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="LoadingPanel1" UpdatePanelCssClass="" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div>
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
<div class="panelContainer">
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1" HorizontalAlign="NotSet">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" Skin="Windows7">
<Tabs>
<telerik:RadTab runat="server" Text="Root RadTab1" Selected="True">

</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab2">

</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab3">

</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab4">

</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
<telerik:RadPageView ID="RadPageView1" runat="server">
1
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server">
2
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView3" runat="server">
3
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView4" runat="server">
4
</telerik:RadPageView>
</telerik:RadMultiPage>
<asp:Panel ID="Panel1" runat="server" Style="font: normal 12px Arial, Verdana, Sans-serif;
color: #a6a896;">
</asp:Panel>
</div>
</div>
<div class="controlsContainer">
</div>
</telerik:RadAjaxPanel>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
<img src="../../Images/loading.gif" alt="Loading" />
</telerik:RadAjaxLoadingPanel>


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

code behind:

Imports System
Imports System.Data
Imports System.Web.UI
Partial Class Controls_Products_TestLoadingPanel
Inherits System.Web.UI.Page

End Class

5 Answers, 1 is accepted

answered on 16 Dec 2013, 06:38 AM

Hi Evelio,

Please try to set the AutoPostBack property of RadTabStrip to true. Please have a look into the modified code snippet which works fine at my end.

ASPX:

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="LoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All"

EnableRoundedCorners="false" />

<div class="panelContainer">

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1"

HorizontalAlign="NotSet">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"

SelectedIndex="0" Skin="Windows7" AutoPostBack="true">

<Tabs>

<telerik:RadTab runat="server" Text="Root RadTab1" Selected="True">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Root RadTab2">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Root RadTab3">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Root RadTab4">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server">

<telerik:RadPageView ID="RadPageView1" runat="server">

1

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">

2

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView3" runat="server">

3

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView4" runat="server">

4

</telerik:RadPageView>

</telerik:RadMultiPage>

<asp:Panel ID="Panel1" runat="server" Style="font: normal 12px Arial, Verdana, Sans-serif;

color: #a6a896;">

</asp:Panel>

</telerik:RadAjaxPanel>

</div>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server">

<img src="../../Images/loading.gif" alt="Loading" />

</telerik:RadAjaxLoadingPanel>

Hope this will helps you.
Thanks,
Shinu.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Cannot Display Loading Image

5 Answers, 1 is accepted