Telerik Forums / UI for ASP.NET AJAX Forum / Ajax /

Loading Panel Image doesnot animate when redirects to another page

Telerik UI for ASP.NET AJAX
Resources Buy Try

10 posts, 0 answers

amol

10 posts

Member since:
Feb 2014

Posted 25 Feb 2014 Link to this post

Hi,

I have RadPanelBar inside RadSplitter on master page.
I am calling different pages on click of RadPanelItem of RadPanelBar from master pages.
I have AjaxManager on master page with RadLoadingPanel for showing loading image.
Loading image doesnot animate when I redirects to another page but it works fine for other functionality.
Shinu

17764 posts

Member since:
Mar 2007

Posted 25 Feb 2014 in reply to amol Link to this post

Hi amol,

With reference to this forum thread redirecting from one page to another page doesn't invoke any server request, so there will be no ajax request and LoadingPanel will not show that is the expected behavior.

Thanks,
Shinu.
amol

10 posts

Member since:
Feb 2014

Posted 26 Feb 2014 in reply to Shinu Link to this post

Hi Shinu,

Is there any workaround for this problem?
Shinu

17764 posts

Member since:
Mar 2007

Posted 27 Feb 2014 in reply to amol Link to this post

Hi amol,

Please try to place the control inside the RadAjaxPanel and redirect to the page in the control postback event also set the LoadingPanelID for the RadAjaxPanel. Here is the sample code snippet which works fine at my end.

ASPX:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px"

    Style="text-align: left;" LoadingPanelID="LoadingPanel1">

    <asp:RadioButtonList ID="list1" runat="server">

        <asp:ListItem Value="http://www.google.com/">www.google.com</asp:ListItem>

        <asp:ListItem Value="http://www.telerik.com/">www.telerik.com</asp:ListItem>

        <asp:ListItem Value="http://www.microsoft.com/">www.microsoft.com</asp:ListItem>

    </asp:RadioButtonList>

    <br />

    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

</telerik:RadAjaxPanel>

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

    <asp:Image ID="Image1" Style="margin-top: 50px" runat="server" ImageUrl="~/Images/loading-icon-614x460.png"></asp:Image>

</telerik:RadAjaxLoadingPanel>

C#:

protected void Button1_Click(object sender, EventArgs e)

{

    Response.Redirect(list1.SelectedValue);

}

Thanks,
Shinu.
amol

10 posts

Member since:
Feb 2014

Posted 28 Feb 2014 in reply to Shinu Link to this post

Hi Shinu,

Thanks for advice but it doesn't work in ie8.
Loading image appears but not animating. I want to show image until next page gets fully rendered.

As per your code i have created one test page as

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="FMWORKS.Test" %>

<%@ 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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
    </telerik:RadScriptManager>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px"
    Style="text-align: left;" LoadingPanelID="LoadingPanel1">
    <asp:RadioButtonList ID="list1" runat="server">
        <asp:ListItem Value="http://www.google.com/">www.google.com</asp:ListItem>
        <asp:ListItem Value="http://www.telerik.com/">www.telerik.com</asp:ListItem>
        <asp:ListItem Value="http://www.microsoft.com/">www.microsoft.com</asp:ListItem>
    </asp:RadioButtonList>
    <br />
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
    <asp:Image ID="Image1" Style="margin-top: 50px" runat="server" ImageUrl="images/loading-icon1.gif"></asp:Image>
</telerik:RadAjaxLoadingPanel>
    </div>

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

and pagebehind code as

protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Redirect(list1.SelectedValue);
        }

I think when page transfer request to another page loading image animate stops.
Is it possible to show loading image when we clicked on button till next page fully rendered.

Please help.
Viktor Tachev
Admin

1769 posts

Posted 28 Feb 2014 Link to this post

Hello Amol,

If you would like to have a list of items like a menu and each item would navigate to an external page you could use a RadTabStrip with a RadMultiPage control.

You could try an approach similar to the one illustrated in this online demo. In order to Ajax-enable the controls you could set the following settings for RadAjaxManager.

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

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="RadTabStrip1">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="RadMultiPage1">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />

                <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Default" MinDisplayTime="500"></telerik:RadAjaxLoadingPanel>

The markup for the RadTabStrip and RadMultiPage would be similar to the one below.

<asp:Panel runat="server" ID="Panel1">

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" Skin="MetroTouch" SelectedIndex="0" Align="Justify" AutoPostBack="true">

        <Tabs>

            <telerik:RadTab Text="Grid"></telerik:RadTab>

            <telerik:RadTab Text="Editor"></telerik:RadTab>

            <telerik:RadTab Text="Async Upload"></telerik:RadTab>

            <telerik:RadTab Text="Scheduler"></telerik:RadTab>

            <telerik:RadTab Text="HTML5 Chart"></telerik:RadTab>

            <telerik:RadTab Text="TreeView"></telerik:RadTab>

        </Tabs>

    </telerik:RadTabStrip>

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

        <telerik:RadPageView ID="RadPageView1" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/grid.aspx"></telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView2" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/editor.aspx"></telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView3" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/asyncupload.aspx"></telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView5" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/scheduler.aspx"></telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView6" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/html-chart.aspx"></telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView7" runat="server" Height="700px" ContentUrl="http://www.telerik.com/products/aspnet-ajax/TreeView.aspx"></telerik:RadPageView>

    </telerik:RadMultiPage>

</asp:Panel>

Give this approach a try and let me know if it is working for you.

In case you would like to achieve a different functionality would you elaborate more on your scenario? What are the requirements and what should be the expected result?

Regards,
Viktor Tachev
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
amol

10 posts

Member since:
Feb 2014

Posted 28 Feb 2014 in reply to Viktor Tachev Link to this post

Hi Viktor,

I have tried your approach but it doesn't work.
Loading image stops before next page gets fully rendered.

I want to show loading animated image from when I click button till next page fully loaded.
My scenario is that I have radpanelbar on my master page & i want to call different pages on click of that panelbar items.
Also sometimes I faced problem that before loading of new page blank screen gets appear.

Please help.
Viktor Tachev
Admin

1769 posts

Posted 05 Mar 2014 Link to this post

Hi,

In the approach from my previous post the loading panel was displayed for half a second. This time is defined with the MinDisplayTime property of RadAjaxLoadingPanel. If you would like to show the loading icon longer you could increase the time. This approach was used because when an external site is loaded there is no way to know when the loading was finished. Because of this the loading icon is forced to stay on screen for certain period of time. Also the AutoPostBack property of RadTabStrip is set to true so that the control triggers a postback.

Regards,
Viktor Tachev
Telerik

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!
amol

10 posts

Member since:
Feb 2014

Posted 07 Mar 2014 in reply to Viktor Tachev Link to this post

Hi Viktor,

Please check code below & tell me what I am doing wrong.
My master page form tag is like this

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

    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />

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

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="RadSplitter1">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="RadSplitter1" LoadingPanelID="RadAjaxLoadingPanel1" />

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" HorizontalAlign="Center"

        Transparency="20" ZIndex="2147483647">

        <div class="modalBackground" style="position: fixed; left: 0px; top: 0px; width: 100%;

            height: 100%;">

            <div style="z-index: 2147483647 !important" class="notification settingdiv">

                <span style="z-index: 2147483647 !important">

                    <asp:Image ID="Image2" runat="server" AlternateText="Loading..." Width="50" Height="50"

                        ImageUrl="~/images/loading-icon1.gif" Visible="true"></asp:Image>

                </span>

            </div>

        </div>

    </telerik:RadAjaxLoadingPanel>

    <div id="MainContent" class="main">

        <div class="content">

            <div class="content_resize">

                <table cellpadding="0" cellspacing="0" style="width: auto; table-layout: fixed;">

                    <tr>

                        <td>

                            <div class="page_content">

                                <table style="width: auto !important; table-layout: fixed;">

                                    <tr>

                                        <td valign="top">

                                            <telerik:RadSplitter ID="RadSplitter1" runat="server" Style="width: auto !important;

                                                height: auto !important;" VisibleDuringInit="False">

                                                <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="none" BorderColor="Transparent"

                                                    BorderWidth="0px" BorderStyle="None" Style="width: auto !important; height: auto !important;">

                                                    <telerik:RadSlidingZone ID="SlidingZone1" ToolTip="" DockedPaneId="Pane1" runat="server"

                                                        Style="width: 100% !important; height: auto !important;">

                                                        <telerik:RadSlidingPane ID="Pane1" ToolTip="" EnableResize="false" Width="270px"

                                                            Title=" " Scrolling="None" runat="server" Style="width: auto !important; height: auto !important;">

                                                            <table width="100%" cellpadding="0" cellspacing="0" style="">

                                                                <tr>

                                                                    <td>

                                                                        <telerik:RadTabStrip ID="main_tabs" runat="server" MultiPageID="main_page" Skin="Default"

                                                                            BorderStyle="Solid" BorderWidth="1px" BorderColor="#B6B6B8">

                                                                            <Tabs>

                                                                                <telerik:RadTab runat="server" Text="Menu" Style="width: 90px;" PageViewID="PageView_menu"

                                                                                    Selected="True" Value="Menu">

                                                                                </telerik:RadTab>

                                                                            </Tabs>

                                                                        </telerik:RadTabStrip>

                                                                    </td>

                                                                </tr>

                                                            </table>

                                                            <div class="qsf-demo-canvas">

                                                                <telerik:RadMultiPage ID="main_page" Style="position: static;" runat="server" SelectedIndex="0"

                                                                    Height="100%">

                                                                    <telerik:RadPageView ID="PageView_menu" Visible="true" runat="server" Style="margin: 0 auto;

                                                                        padding: 0 auto; height: 100%;">

                                                                        <div id="effect" style="padding-left: 0px; height: 100%;">

                                                                            <telerik:RadPanelBar ID="main_menu" Width="100%" Skin="Vista" OnItemClick="SlidingSaveItemClick"

                                                                                runat="server" PersistStateInCookie="true" CookieName="pnlBarMainMenu">

                                                                                <Items>

                                                                                    <telerik:RadPanelItem runat="server" PostBack="true" Text="Setup" BorderColor="Transparent"

                                                                                        BorderStyle="None" BorderWidth="0px" Value="main_setup" SkinID="MainMenu">

                                                                                        <Items>

                                                                                            <telerik:RadPanelItem runat="server" PostBack="true" Style="background-image: none !important;"

                                                                                                BorderStyle="None" BorderWidth="0px" SkinID="SubMenuNew" ImageUrl="~/images/icon.png"

                                                                                                Text="Page" Value="Page">

                                                                                                <Items>

                                                                                                    <telerik:RadPanelItem runat="server" SkinID="SubMenu2" Style="background-image: none !important;"

                                                                                                        ImageUrl="~/images/sub_menu_list_img.png" BorderStyle="None" BorderWidth="0px"

                                                                                                        Text="Page 1" Value="1">

                                                                                                    </telerik:RadPanelItem>

                                                                                                    <telerik:RadPanelItem runat="server" SkinID="SubMenu2" Style="background-image: none !important;"

                                                                                                        ImageUrl="~/images/sub_menu_list_img.png" BorderColor="Transparent" BorderStyle="None"

                                                                                                        BorderWidth="0px" Text="Page 2" Value="2">

                                                                                                    </telerik:RadPanelItem>

                                                                                                </Items>

                                                                                            </telerik:RadPanelItem>

                                                                                        </Items>

                                                                                    </telerik:RadPanelItem>

                                                                                </Items>

                                                                            </telerik:RadPanelBar>

                                                                        </div>

                                                                        <div class="clr">

                                                                        </div>

                                                                    </telerik:RadPageView>

                                                                </telerik:RadMultiPage>

                                                            </div>

                                                        </telerik:RadSlidingPane>

                                                    </telerik:RadSlidingZone>

                                                </telerik:RadPane>

                                                <telerik:RadPane ID="MiddlePane" BorderColor="Transparent" BorderWidth="0px" BorderStyle="None"

                                                    runat="server" CssClass="MiddPan" Style="width: auto !important; height: auto !important;">

                                                    <div id="main_content" class="main_content" runat="server" style="width: 100% !important;

                                                        height: auto !important; padding-left: 15px;">

                                                        <asp:ContentPlaceHolder ID="main" runat="server">

                                                        </asp:ContentPlaceHolder>

                                                    </div>

                                                </telerik:RadPane>

                                            </telerik:RadSplitter>

                                        </td>

                                    </tr>

                                </table>

                                <div class="clr">

                                </div>

                            </div>

                        </td>

                    </tr>

                </table>

                <div class="clr">

                </div>

            </div>

            <div class="clr">

            </div>

        </div>

    </div>
    </form>

and pagebehind code as

protected void Page_Load(object sender, EventArgs e)

        {

            try

            {

            }

            catch (Exception ex)

            {

            }

        }



        protected void SlidingSaveItemClick(object sender, RadPanelBarEventArgs e)

        {

            try

            {

                string ModuleName = "";

                ModuleName = e.Item.Value;

                switch (ModuleName)

                {

                    // Maintenance Business Planning

                    case "1":

                        Response.Redirect("~/Page1.aspx", false);

                        break;

                    case "2":

                        Response.Redirect("~/Page2.aspx", false);

                        break;

                }

            }

            catch (Exception ex)

            {

                throw ex;

            }

        }

Page1.aspx code look like

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">



</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="main" runat="server">

    <div class="mainpagecontent" id="print_area">

        <div class="grid_box" style="width: 100%; min-width: 900px;">

        This is page 1

        </div>

    </div>

    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="somectrl">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="somectrl" />

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManagerProxy>

</asp:Content>

and pagebehind for Page1 like this

protected void Page_Load(object sender, EventArgs e)

        {

            System.Threading.Thread.Sleep(5000);

        }
Viktor Tachev
Admin

1769 posts
Posted 12 Mar 2014 Link to this post

Hi Amol,

In the provided code you have the RadSplitter Ajax-enabled, however Response.Redirect() is called in the code-behind. This will cause an Ajax request to be initiated and after this a full postback will be triggered. Such behavior is expected and could be replicated also with a regular UpdatePanel control.

In order to achieve the functionality you are looking for you could use WebUserControls instead. Depending on which item is clicked you could add the corresponding UserControl to the right panel. For convenience I am attaching a sample project illustrating the approach. Try using the approach from the sample and you should be able to achieve the needed result.

Regards,
Viktor Tachev
Telerik

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

RadSplitterUpdateSample.zip

Loading Panel Image doesnot animate when redirects to another page

amol

Shinu

amol

Shinu

amol

Viktor Tachev

amol

Viktor Tachev

amol

Viktor Tachev