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

how can we use RadAjaxLoadingPanel when page goes postback

3 Answers 406 Views

Dock

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

3 Answers, 1 is accepted

answered on 13 May 2009, 09:05 AM

Hi Neha,

Here is a demo page which dynamically loads user controls and uses a loading panel when ever a new control is loaded/ or if a dock is minimized/maximized or moved.

Create a new project and add this page and your telerik dll. You will need to set the path of the user controls to load in the dropdownlist.

Thanks,

Ronan

RadAjaxVB.aspx

    
            <%@ Page Language="VB" AutoEventWireup="true" CodeFile="RadAjaxVB.aspx.vb" Inherits="Dock_Examples_MyPortalRadAjaxVB_RadAjaxVB" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head id="Head1" runat="server"> 
        
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                    <script type="text/javascript"> 
        
                   var currentLoadingPanel = null; 
        
                   var currentUpdatedControl = null; 
        
                   function RequestStart(sender, args) 
        
                   { 
        
                       currentLoadingPanel = $find("LoadingPanel1"); 
        
                       currentUpdatedControl = "TableLayout"; 
        
                       currentLoadingPanel.show(currentUpdatedControl); 
        
                   } 
        
                   function ResponseEnd() 
        
                   { 
        
                       //hide the loading panel and clean up the global variables 
        
                       if (currentLoadingPanel != null) 
        
                           currentLoadingPanel.hide(currentUpdatedControl); 
        
                       currentUpdatedControl = null; 
        
                       currentLoadingPanel = null; 
        
                   } 
        
                    </script> 
        
                </telerik:RadCodeBlock> 
        
            </head> 
        
            <body style="height: 100%; width: 100%"> 
        
                <form id="Form1" method="post" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager" runat="server" /> 
        
                <div class="module"> 
        
                    Select Module: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
        
                    <asp:DropDownList runat="server" ID="DroptDownWidget" Width="150"> 
        
                        <asp:ListItem Text="Horoscopes.ascx" Value="UserControls/Horoscopes.ascx" Selected="True" /> 
        
                        <asp:ListItem Text="News.ascx" Value="UserControls/News.ascx"></asp:ListItem> 
        
                        <asp:ListItem Text="Weather.ascx" Value="UserControls/Weather.ascx"></asp:ListItem> 
        
                    </asp:DropDownList> 
        
                    <br /> 
        
                    Select Docking Zone: 
        
                    <asp:DropDownList ID="DropDownZone" runat="server" DataSource="<%#GetZones() %>" 
        
                        DataTextField="ID" DataValueField="ClientID" Width="150"> 
        
                    </asp:DropDownList> 
        
                    <asp:Button runat="server" CssClass="button" ID="ButtonAddDock" Text="Add Dock (AJAX)" 
        
                        OnClick="ButtonAddDock_Click" /> 
        
                    <asp:Button runat="server" CssClass="button" ID="ButtonPostBack" Text="Make PostBack" 
        
                        OnClick="ButtonPostBack_Click" /> 
        
                    <asp:Button runat="server" CssClass="button" ID="ButtonClear" Text="Clear Dock State" 
        
                        OnClick="ButtonClear_Click" /> 
        
                </div> 
        
                <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout" 
        
                    OnLoadDockLayout="RadDockLayout1_LoadDockLayout"> 
        
                    <table id="TableLayout"> 
        
                        <tr> 
        
                            <td> 
        
                                <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="300" MinHeight="200"> 
        
                                </telerik:RadDockZone> 
        
                            </td> 
        
                            <td> 
        
                                <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="300" MinHeight="200"> 
        
                                </telerik:RadDockZone> 
        
                            </td> 
        
                        </tr> 
        
                    </table> 
        
                </telerik:RadDockLayout> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnRequestStart="RequestStart" 
        
                    ClientEvents-OnResponseEnd="ResponseEnd"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="ButtonAddDock" EventName="Click"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="RadDockZone1" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="RadDockZone2" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="Black"> 
        
                </telerik:RadAjaxLoadingPanel> 
        
                <div style="width: 0px; height: 0px; overflow: hidden; position: absolute; left: -10000px;"> 
        
                    Hidden UpdatePanel, which is used to help with saving state when minimizing, moving 
        
                    and closing docks. This way the docks state is saved faster (no need to update the 
        
                    docking zones). 
        
                    <telerik:RadAjaxPanel ID="Panel1" runat="server"> 
        
                    </telerik:RadAjaxPanel> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

RadAjaxVB.aspx.vb

    
            Imports System 
        
            Imports System.Collections 
        
            Imports System.Collections.Generic 
        
            Imports System.ComponentModel 
        
            Imports System.Data 
        
            Imports System.Drawing 
        
            Imports System.Web 
        
            Imports System.Web.SessionState 
        
            Imports System.Web.UI 
        
            Imports System.Web.UI.WebControls 
        
            Imports System.Web.UI.HtmlControls 
        
            Imports Telerik.Web.UI 
        
            Partial Public Class Dock_Examples_MyPortalRadAjaxVB_RadAjaxVB 
        
                Inherits System.Web.UI.Page 
        
                Private _dockStateCleared As Boolean = False 
        
                Private Property CurrentDockStates() As List(Of DockState) 
        
                    Get 
        
                        'Store the info about the added docks in the session. For real life 
        
                        ' applications we recommend using database or other storage medium  
        
                        ' for persisting this information. 
        
                        Dim _currentDockStates As List(Of DockState) = DirectCast(Session("CurrentDockStatesMyPortal"), List(Of DockState)) 
        
                        If [Object].Equals(_currentDockStates, Nothing) Then 
        
                            _currentDockStates = New List(Of DockState)() 
        
                            Session("CurrentDockStatesMyPortal") = _currentDockStates 
        
                        End If 
        
                        Return _currentDockStates 
        
                    End Get 
        
                    Set(ByVal value As List(Of DockState)) 
        
                        Session("CurrentDockStatesMyPortal") = value 
        
                    End Set 
        
                End Property 
        
                Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) 
        
                    If Not IsPostBack Then 
        
                        DropDownZone.DataBind() 
        
                    End If 
        
                    'This is for test purposes only 
        
                    System.Threading.Thread.Sleep(1000) 
        
                End Sub 
        
                Public Function GetZones() As ArrayList 
        
                    Dim zones As New ArrayList() 
        
                    zones.Add(RadDockZone1) 
        
                    zones.Add(RadDockZone2) 
        
                    Return zones 
        
                End Function 
        
                Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) 
        
                    'Recreate the docks in order to ensure their proper operation 
        
                    Dim i As Integer = 0 
        
                    While i < CurrentDockStates.Count 
        
                        If CurrentDockStates(i).Closed = False Then 
        
                            Dim dock As RadDock = CreateRadDockFromState(CurrentDockStates(i)) 
        
                            'We will just add the RadDock control to the RadDockLayout. 
        
                            ' You could use any other control for that purpose, just ensure 
        
                            ' that it is inside the RadDockLayout control. 
        
                            ' The RadDockLayout control will automatically move the RadDock 
        
                            ' controls to their corresponding zone in the LoadDockLayout 
        
                            ' event (see below). 
        
                            RadDockLayout1.Controls.Add(dock) 
        
                            'We want to save the dock state every time a dock is moved. 
        
                            CreateSaveStateTrigger(dock) 
        
                            'Load the selected widget 
        
                            LoadWidget(dock) 
        
                        End If 
        
                        ii = i + 1 
        
                    End While 
        
                End Sub 
        
                Protected Sub RadDockLayout1_LoadDockLayout(ByVal sender As Object, ByVal e As DockLayoutEventArgs) 
        
                    'Populate the event args with the state information. The RadDockLayout control 
        
                    ' will automatically move the docks according that information. 
        
                    For Each state As DockState In CurrentDockStates 
        
                        e.Positions(state.UniqueName) = state.DockZoneID 
        
                        e.Indices(state.UniqueName) = state.Index 
        
                    Next 
        
                End Sub 
        
                Protected Sub RadDockLayout1_SaveDockLayout(ByVal sender As Object, ByVal e As DockLayoutEventArgs) 
        
                    If Not _dockStateCleared Then 
        
                        'Save the dock state in the session. This will enable us  
        
                        ' to recreate the dock in the next Page_Init. 
        
                        CurrentDockStates = RadDockLayout1.GetRegisteredDocksState() 
        
                    Else 
        
                        'the clear state button was clicked, so we refresh the page and start over. 
        
                        Response.Redirect(Request.RawUrl, False) 
        
                    End If 
        
                End Sub 
        
                Private Function CreateRadDockFromState(ByVal state As DockState) As RadDock 
        
                    Dim dock As New RadDock() 
        
                    dock.DockMode = DockMode.Docked 
        
                    dock.ID = String.Format("RadDock{0}", state.UniqueName) 
        
                    dock.ApplyState(state) 
        
                    dock.Commands.Add(New DockCloseCommand()) 
        
                    dock.Commands.Add(New DockExpandCollapseCommand()) 
        
                    Return dock 
        
                End Function 
        
                Private Function CreateRadDock() As RadDock 
        
                    Dim docksCount As Integer = CurrentDockStates.Count 
        
                    Dim dock As New RadDock() 
        
                    dock.DockMode = DockMode.Docked 
        
                    dock.UniqueName = Guid.NewGuid().ToString() 
        
                    dock.ID = String.Format("RadDock{0}", dock.UniqueName) 
        
                    dock.Title = "Dock" 
        
                    dock.Text = String.Format("Added at {0}", DateTime.Now) 
        
                    dock.Width = Unit.Pixel(300) 
        
                    dock.Commands.Add(New DockCloseCommand()) 
        
                    dock.Commands.Add(New DockExpandCollapseCommand()) 
        
                    Return dock 
        
                End Function 
        
                Private Sub CreateSaveStateTrigger(ByVal dock As RadDock) 
        
                    'Ensure that the RadDock control will initiate postback 
        
                    ' when its position changes on the client or any of the commands is clicked. 
        
                    'Using the trigger we will "ajaxify" that postback. 
        
                    dock.AutoPostBack = True 
        
                    dock.CommandsAutoPostBack = True 
        
                    Dim updatedControl As New AjaxUpdatedControl() 
        
                    updatedControl.ControlID = "Panel1" 
        
                    Dim setting1 As New AjaxSetting(dock.ID) 
        
                    setting1.EventName = "DockPositionChanged" 
        
                    setting1.UpdatedControls.Add(updatedControl) 
        
                    Dim setting2 As New AjaxSetting(dock.ID) 
        
                    setting2.EventName = "Command" 
        
                    setting2.UpdatedControls.Add(updatedControl) 
        
                    RadAjaxManager1.AjaxSettings.Add(setting1) 
        
                    RadAjaxManager1.AjaxSettings.Add(setting2) 
        
                End Sub 
        
                Private Sub LoadWidget(ByVal dock As RadDock) 
        
                    If String.IsNullOrEmpty(dock.Tag) Then 
        
                        Return 
        
                    End If 
        
                    Dim widget As Control = LoadControl(dock.Tag) 
        
                    dock.ContentContainer.Controls.Add(widget) 
        
                End Sub 
        
                Protected Sub ButtonAddDock_Click(ByVal sender As Object, ByVal e As EventArgs) 
        
                    Dim dock As RadDock = CreateRadDock() 
        
                    'find the target zone and add the new dock there 
        
                    Dim dz As RadDockZone = DirectCast(FindControl(DropDownZone.SelectedItem.Text), RadDockZone) 
        
                    dz.Controls.Add(dock) 
        
                    CreateSaveStateTrigger(dock) 
        
                    'Load the selected widget in the RadDock control 
        
                    dock.Tag = DroptDownWidget.SelectedValue 
        
                    LoadWidget(dock) 
        
                End Sub 
        
                Protected Sub ButtonPostBack_Click(ByVal sender As Object, ByVal e As EventArgs) 
        
                    'normal postback 
        
                End Sub 
        
                Protected Sub ButtonClear_Click(ByVal sender As Object, ByVal e As EventArgs) 
        
                    'clear docks state from the session 
        
                    CurrentDockStates.Clear() 
        
                    _dockStateCleared = True 
        
                End Sub 
        
            End Class

answered on 01 Feb 2010, 12:07 PM

Hi Anthony,

The following client script shows the loading panel over every dock present on the page when AJAX request occurs. You can modify it to show the panel only on specific docks:

<script type="text/javascript">

var currentLoadingPanel = null;

function RequestStart(sender, args)

{

currentLoadingPanel = $find("<%=LoadingPanel1.ClientID %>");

var zones = Telerik.Web.UI.RadDockZonesGlobalArray;

for (var i = 0; i < zones.length; i++)

{

docks = zones[i].get_docks();

for (var t = 0; t < docks.length; t++)

{

var dockId = docks[t].get_id();

currentLoadingPanel.show(dockId);

}

function ResponseEnd()

{

//hide the loading panel and clean up the global variables

var zones = Telerik.Web.UI.RadDockZonesGlobalArray;

for (var i = 0; i < zones.length; i++)

{

docks = zones[i].get_docks();

for (var t = 0; t < docks.length; t++)

{

var dockId = docks[t].get_id();

currentLoadingPanel.hide(dockId);

}

</script>

All the best,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.