Show Loading Panel without AJAX

[ADe]

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";
                }

[Martin]

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.

[Jason]

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.