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

loading panel on tab click

1 Answer 385 Views

General Discussions

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

1 Answer, 1 is accepted

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