Cannot Display Loading Image

6 posts, 0 answers
  1. Evelio
    Evelio avatar
    5 posts
    Member since:
    Mar 2009

    Posted 15 Dec 2013 Link to this post

    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

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Dec 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Evelio
    Evelio avatar
    5 posts
    Member since:
    Mar 2009

    Posted 16 Dec 2013 Link to this post

    Works Great !
    I cant believe i was almost 4 hours trying everything before i decided to bug you guys. So the AutoPostBack="true" on the tabstrip was the trick.

    Thank you
  5. Evelio
    Evelio avatar
    5 posts
    Member since:
    Mar 2009

    Posted 16 Dec 2013 Link to this post

    Shinu, can you please advice of a faster cleaner approach to have the loading image appear in the dead center of the screen. Thank you
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Dec 2013 Link to this post

    Hi Evelio,

    Please have a look into this help documentation which deals the same scenario.

    Thanks,
    Shinu
  7. Evelio
    Evelio avatar
    5 posts
    Member since:
    Mar 2009

    Posted 17 Dec 2013 Link to this post

    WORKS ! Thank you
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017