Busy Indicator on Complex Actions

[Yazan]

Some of the commands like "Sharpen" and "Blur" take too long to execute. While I understand that such complicated JavaScript functions take a lot of processing. I wish to display some indicator (probably a gif loader) that the page is "processing". Due to the way JavaScript execution works, showing a gif in OnClientCommandExecuting and hiding it in OnClientCommandExecuted does not work because there is no room for that toggle JavaScript code to execute. I tried to override OnClientCommandExecuting by calling args.set_cancel(true) hoping to find way to fire the command at a later time. I tried imageEditor.fire(commandName, args) but it doesn't work. Is there a way to let the user know that the image editor is processing instead of freezing?

[Danail Vasilev]

Hello Yazan,

You can try setting some timeout to the second command firing:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <script type="text/javascript">

        var lp;
        var isInitial = true;

        function pageLoad() {
            $ = $telerik.$;
            lp = $("#lp");
        }


        function OnClientCommandExecuting(sender, args) {
            if (isInitial) {

                isInitial = false;
                var commandName = args.get_commandName();
                args.set_cancel(true);
                lp.css('visibility', 'visible');
                setTimeout(function () {
                    sender.fire(commandName, args);
                }, 5);
            }
            else {
                isInitial = true;
            }
        }

        function OnClientCommandExecuted(sender, args) {
            lp.css('visibility', 'hidden');
        }
    </script>
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted"
        OnClientCommandExecuting="OnClientCommandExecuting" ImageUrl="~/Images/image1.jpg">
    </telerik:RadImageEditor>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <div id="lp" style="background: red; border: 1px solid green; visibility: hidden; width: 300px; height: 200px; position: absolute; top: 100px; left: 200px;">
        Processing ...
    </div>
</form>

Regards,
Danail Vasilev
Telerik