Busy Indicator on Complex Actions

2 posts, 1 answers
  1. Yazan
    Yazan avatar
    5 posts
    Member since:
    Oct 2014

    Posted 30 Dec 2015 Link to this post

    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?
  2. Answer
    Danail Vasilev
    Danail Vasilev avatar
    1502 posts

    Posted 04 Jan 2016 Link to this post

    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();
                    lp.css('visibility', 'visible');
                    setTimeout(function () {
                        sender.fire(commandName, args);
                    }, 5);
                else {
                    isInitial = true;
            function OnClientCommandExecuted(sender, args) {
                lp.css('visibility', 'hidden');
        <telerik:RadImageEditor ID="RadImageEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted"
            OnClientCommandExecuting="OnClientCommandExecuting" ImageUrl="~/Images/image1.jpg">
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
        <div id="lp" style="background: red; border: 1px solid green; visibility: hidden; width: 300px; height: 200px; position: absolute; top: 100px; left: 200px;">
            Processing ...

    Danail Vasilev
    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
Back to Top