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

Busy Indicator on Complex Actions

1 Answer 89 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Yazan
Top achievements
Rank 1
Yazan asked on 30 Dec 2015, 11:38 PM
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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 04 Jan 2016, 01:14 PM
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
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 Feedback Portal and vote to affect the priority of the items
Tags
ImageEditor
Asked by
Yazan
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or