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

loading panel on tab click

1 Answer 319 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Hrushikesh Mokashi
Top achievements
Rank 1
Hrushikesh Mokashi asked on 22 Jul 2008, 10:32 AM
For Loadingpane on page load i used the link given below.
http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpaneloninitialpageload.html

But it load page first then it gives the loading panel.
I am using radtabstrip control and on each  radtab i added grid control.
Heare i want to show the loading panel when i click on tab.

I Follow above link  but it first load the tab and its control  and then it gives the loading panel.

How can it be possible to show the loading panel on  tab click event before the grid load.

Thanking you.

1 Answer, 1 is accepted

Sort by
0
Kevin Babcock
Top achievements
Rank 1
answered on 22 Jul 2008, 01:35 PM
Hello Hrushikesh,

In order to hide both the RadTabStrip control and its associated RadMultiPage control behind a RadLoadingPanel on the initial page load, I recommend wrapping them in a separate Panel control and setting that control as the AjaxUpdatedControl in your RadAjaxManager. Here is an example.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
 
<%@ 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>Untitled Page</title> 
</head> 
<body> 
    <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />   
         
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
            <script type="text/javascript"
                window.onload = function() 
                { 
                    setTimeout( function() { 
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad"); 
                    }, 0); 
                } 
            </script> 
        </telerik:RadCodeBlock>  
         
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" 
            OnAjaxRequest="RadAjaxManager1_AjaxRequest"
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />                      
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="Button1"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1" EventName="OnTabClick"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
 
        <asp:Panel ID="Panel1" runat="server"
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" 
                MultiPageID="RadMultiPage1" 
                SelectedIndex="0" 
                Visible="False" 
                AutoPostBack="True" 
                OnTabClick="RadTabStrip1_TabClick"
                <Tabs> 
                    <telerik:RadTab Text="Grid 1" PageViewID="RadPageView1" /> 
                    <telerik:RadTab Text="Grid 2" PageViewID="RadPageView2" /> 
                </Tabs> 
            </telerik:RadTabStrip> 
             
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" 
                SelectedIndex="0" 
                Visible="false"
                <telerik:RadPageView ID="RadPageView1" runat="server"
                    <telerik:RadGrid ID="RadGrid1" runat="server" /> 
                    <asp:Button ID="Button1" runat="server"  
                        Text="Click Me!" 
                        OnClick="Button1_Click" /> 
                </telerik:RadPageView> 
                <telerik:RadPageView ID="RadPageView2" runat="server"
                    <telerik:RadGrid ID="RadGrid2" runat="server" /> 
                </telerik:RadPageView> 
            </telerik:RadMultiPage> 
        </asp:Panel> 
         
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
            <img alt="Loading..."  
                src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
                style="border: 0px;" /> 
        </telerik:RadAjaxLoadingPanel> 
         
    </form> 
</body> 
</html> 
 

using System; 
 
public partial class _Default : System.Web.UI.Page  
    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e) 
    { 
        // Make controls visible 
        RadTabStrip1.Visible = true
        RadMultiPage1.Visible = true
 
        // Bind the Grid 
        if (RadTabStrip1.SelectedIndex == 0) 
        { 
            BindGrid1(); 
        } 
 
        // Simulate network latency 
        System.Threading.Thread.Sleep(1500); 
    } 
 
    protected void Button1_Click(object sender, EventArgs e) 
    { 
        // Simulate network latency 
        System.Threading.Thread.Sleep(1000); 
    } 
 
    protected void RadTabStrip1_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e) 
    { 
        if (e.Tab.Text == "Grid 1"
        { 
            BindGrid1();             
        } 
        else 
        { 
            BindGrid2(); 
        } 
    } 
 
    protected void BindGrid1() 
    { 
        var data = new[] { 
                new { Name = "Value", Value = 3 }, 
                new { Name = "Yet Another Value", Value = 88 }, 
                new { Name = "One More Value", Value = 12 } 
            }; 
        RadGrid1.DataSource = data; 
        RadGrid1.DataBind(); 
    } 
 
    protected void BindGrid2() 
    { 
        var data = new[] { 
            new { Name = "Some Value", Value = 23 }, 
            new { Name = "Another Value", Value = 7 }, 
            new { Name = "Final Value", Value = 57 } 
        }; 
        RadGrid2.DataSource = data; 
        RadGrid2.DataBind(); 
    } 
 

In this example we timeout the page load immediately and make an ajax call back to the server. I have added some simulated network latency in the code-behind so that you can see the RadAjaxLoadingPanel.  I also added a Button control so that you can see the behavior during a regular post back to the server. The RadTabStrip is set up to make a post back when a tab is clicked. You can use the event handler for that control to load your RadGrid data on demand, and add settings in your RadAjaxManager to show the RadLoadingPanel while waiting for the post back to complete. Finally, you will notice that I set the RadTabStrip and RadMultiPage controls Visible property to false initially. This is because when using the RadLoadingPanel for the initial page load we sometimes see a flicker. To get around that, simply set the controls Visible property to false and then set it to true during the AjaxRequest event handler in your code-behind.

I hope this has been helpful. Please let me know if you have additional questions.

Sincerely,
Kevin Babcock
Tags
General Discussions
Asked by
Hrushikesh Mokashi
Top achievements
Rank 1
Answers by
Kevin Babcock
Top achievements
Rank 1
Share this question
or