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

Loading Panel Image doesnot animate when redirects to another page

9 Answers 320 Views

Ajax

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

9 Answers, 1 is accepted

answered on 27 Feb 2014, 08:54 AM

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.

answered on 28 Feb 2014, 06:09 AM

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.

answered on 28 Feb 2014, 11:59 AM

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.

answered on 05 Mar 2014, 08:44 AM

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!

answered on 07 Mar 2014, 12:56 PM

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>

</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>

</td>

</tr>

</table>

<div class="clr">

</div>

<div class="clr">

</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>

<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);

}

answered on 12 Mar 2014, 10:25 AM

RadSplitterUpdateSample.zip

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.