Show Loading Panel without AJAX

3 posts, 0 answers
  1. ADe
    ADe avatar
    42 posts
    Member since:
    Jul 2008

    Posted 13 Feb 2010 Link to this post

    I have some JScript that does some client side stuff and while it is doing that I want to show the RadLoadingPannel that is shown when AJAXing goes on on the page.

    I added the following two functions which I would have thought would achieve this but it does nothing,

     
                    var radLoadingPanelContent = null;  
                    var currentUpdatedControl = null;  
                    function showLoadingGraphic() {  
                        radLoadingPanelContent = $find("<%=radLoadingPanelContent.ClientID %>");  
                        currentUpdatedControl = "<%=divMainContent.ClientID %>";  
                        radLoadingPanelContent.show(currentUpdatedControl);  
                    }  
                    function hideLoadingGraphic() {  
                        if (radLoadingPanelContent != null) {  
                            radLoadingPanelContent.hide(currentUpdatedControl);  
                        }  
                        radLoadingPanelContent = null;  
                        currentUpdatedControl = null;  
                    } 

    You will notice they are completely separate from AJAX events (which is what I want).

    I just want a client-side way to indicate to the user that something is loading without using AJAX (because it's so dam slow).

    The following works but looks very messy,

     
                    function showLoadingGraphic() {  
                        radLoadingPanelContent = document.getElementById("<%=radLoadingPanelContent.ClientID %>");  
                        radLoadingPanelContent.style.display = "block";  
                    }  
                    function hideLoadingGraphic() {  
                        radLoadingPanelContent = document.getElementById("<%=radLoadingPanelContent.ClientID %>");  
                        radLoadingPanelContent.style.display = "none";  
                    } 

  2. Martin
    Admin
    Martin avatar
    833 posts

    Posted 15 Feb 2010 Link to this post

    Hello Ade,

    You can try the following code snippet:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
        <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                var radLoadingPanel = null;
                var currentUpdatedControl = null;
                function ShowLoading()
                {
                    radLoadingPanel = $find("<%=RadAjaxLoadingPanel1.ClientID %>");
                    currentUpdatedControl = "<%=Label1.ClientID %>";
                    radLoadingPanel.show(currentUpdatedControl);
                }
                function HideLoading()
                {
                    if (radLoadingPanel != null)
                    {
                        radLoadingPanel.hide(currentUpdatedControl);
                    }
                    radLoadingPanel = null;
                    currentUpdatedControl = null;
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Vista">
        </telerik:RadAjaxLoadingPanel>
        <asp:Label runat="server" ID="Label1" Text="The panel will be shown here." Width="100px" Height="50px"></asp:Label>
        <input type="button" id="ShowButton" value="Show panel" onclick="ShowLoading()" />
        <input type="button" id="HideButton" value="Hide panel" onclick="HideLoading()" />

    I hope this helps,
    Martin
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Jason
    Jason avatar
    2 posts
    Member since:
    Oct 2011

    Posted 25 Oct 2011 Link to this post

    Is there any way (preferably demonstrated with some sample code) to use this example in conjunction with the example that shows how to make the loading panel span the entire page?  The latter example uses ajax which I am trying to avoid for the moment.
Back to Top