how can we use RadAjaxLoadingPanel when page goes postback

4 posts, 0 answers
  1. Golu
    Golu avatar
    41 posts
    Member since:
    Dec 2008

    Posted 13 May 2009 Link to this post

    Dear sir,
    I am dynamically loading a Dock, whenever page goes postback (when move dock etc..) how can we use loadng panel.

    thank & regards

  2.
  3. rmoynihan
    rmoynihan avatar
    20 posts
    Member since:
    May 2007

    Posted 13 May 2009 Link to this post

    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 
     

  5. Anthony
    Anthony avatar
    14 posts
    Member since:
    Apr 2009

    Posted 28 Jan 2010 Link to this post

    I have a question about modifying this code, what I would like to do is show the loading panel over top of the individual docks instead of the entire layout. For example, if I minimize or maximize a dock I want the loading panel to show over top of that one dock. Also, some of my docks have buttons which submit info about the dock. I would like to show the loadingpanel over top of those docks as well.
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 01 Feb 2010 Link to this post

    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.
Back to Top