Disabling Other Controls While Uploading

10 posts, 0 answers
  1. Pat
    Pat avatar
    31 posts
    Member since:
    Dec 2011

    Posted 19 Jan 2012 Link to this post

    Hello!  I’ve been using the RadAsyncUpload control and it’s been working great.  Provided is an image of what my screen looks like.  As you can see, I’m using RadAsyncUpload’s ruBrowse button to both upload the files clientside and then force a postback in order to upload the images to the database serverside (one button does all).

    However, circled are other controls I’m using on my site.  The problem is that when the client clicks “Upload Pictures,” and the files get uploaded clientside (as you can see with the green dots), it takes a little time to insert them into the database (serverside).  Currently, without the implementation of a wait cursor, the client is able to click any of the other controls on the page:

           -  (RadTabStrip)  Click the Entry Content tab which stops the uploading from happening.

           -  (Asp Buttons)  Click Save/Cancel, which leaves the client in a bad state.

           -  (RadAsyncUpload)  Click the “Upload Pictures” button again to upload more pictures.

    I was wondering if there was any way to be able to disable other controls while the uploading is still happening?

  2. Pat
    Pat avatar
    31 posts
    Member since:
    Dec 2011

    Posted 19 Jan 2012 Link to this post

    function disableControls()
    {
      document.getElementById('<%= SaveButton.ClientID %>').disabled = true;
      document.getElementById('<%= CancelButton.ClientID %>').disabled = true;           
    }

    Seemed to have done the trick being called by the OnClientFilesSelected property for the RadAsyncUpload control.  I was able to disable the Save and Cancel buttons, any idea how to disable the Entry Content" tab (tab index 0) or the RadAsyncUpload button clientside?

    Thanks again for the help.

    - Pat
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pat
    Pat avatar
    31 posts
    Member since:
    Dec 2011

    Posted 19 Jan 2012 Link to this post

    function disableControls()
    {
      document.getElementById('<%= SaveButton.ClientID %>').disabled = true;
      document.getElementById('<%= CancelButton.ClientID %>').disabled = true;
      var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
      var entryTab = tabStrip.get_tabs().getTab(0);
      var picturesTab = tabStrip.get_tabs().getTab(1);
      entryTab.set_enabled(false);
      picturesTab.set_enabled(false);
    }

    Updated to disable both tabs.  Now just need to be able to disable RadAsyncUpload's upload button (if that's even possible)!  Any ideas?

    Thanks again for the help.

    -  Pat
  5. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 20 Jan 2012 Link to this post

    Hello Pat,

    You can use the AsyncUpload's set_enabled() method. Here's for instance how you can disable the control once you've selected the files, and then enable it again, once you've uploaded them on the client:
    <telerik:RadAsyncUpload
        OnClientFileSelected="fileSelected"
        OnClientFileUploaded="fileUploaded"
        TargetFolder="Images"
        ID="RadAsyncUpload1" runat="server">
    </telerik:RadAsyncUpload>  
    <script type="text/javascript">
     
        function fileSelected(sender, args) {
            sender.set_enabled(false);
        }
     
        function fileUploaded(sender, args) {
            sender.set_enabled(true);
        }
     
    </script>

     
    Regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Sujatha
    Sujatha avatar
    4 posts
    Member since:
    Mar 2013

    Posted 16 Jul 2014 in reply to Bozhidar Link to this post

    Hello,

    I would like to use sender.set_enabled(false) to disable upload control while a file uploads.  But the problem I see is that the Cancel link to cancel the current file upload is also disabled when the sender.set_enabled is set to false.  Is there a way to enable Cancel link in this scenario?

    Thanks.
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Jul 2014 in reply to Sujatha Link to this post

    Hi Sujatha,

    Please try the below JavaScript to enable the cancel button.

    JavaScript:
    function fileSelected(sender, args) {
        $('.ruCancel').prop('disabled', false); 
        sender.set_enabled(false);
    }

    Thanks,
    Princy.
  8. Sujatha
    Sujatha avatar
    4 posts
    Member since:
    Mar 2013

    Posted 17 Jul 2014 in reply to Princy Link to this post

    Thank you Princy.  That worked, except that I had to switch the two statements in the function.  You have to enable Cancel link after the control is disabled.


    function fileSelected(sender, args) {
     
      sender.set_enabled(false);   
      $('.ruCancel').prop('disabled', false);
     
    }


  9. Sujatha
    Sujatha avatar
    4 posts
    Member since:
    Mar 2013

    Posted 30 Jul 2014 Link to this post

    Hello Princy,

    The sender.set_enabled(false) statement in the above function is throwing an error in IE 11.  Here is the error

    Unhandled exception at line 209, column 1 in http://localhost:63500/ScriptResource.axd?d=uWy-ZmVtqSIglIvyjfeaiHZByPYUOndsAQFedlGK_MJnzN0Q6zZkdj9WyOdBRhTdYvEGt9rC8VNZ_ZYdgKkCnU07snTcvy2glGQUngxa3kRBPJ78D-nxu1I6bT7QNATdCJcyqq6K9R_-IM-gFK_dialdYfzx7dV2qjf2zY5eWhc1&t=70e10205

    0x800a138f - JavaScript runtime error: Unable to set property 'Index' of undefined or null reference

    Here is the block of code generating the error.  The error is generated on this line,

    f.fileInfo.Index=this._additionalFieldIndex;​

    *******
    },_appendStyledRow:function(e){this._currentIndex++;
    if(!!this._uploadedFilesRendering){a(".ruInputs",this.get_element()).append(e);
    }else{a(".ruInputs",this.get_element()).prepend(e);
    }this._appendFakeInput(e.children("span")[0]);
    return e;
    },_appendFakeInput:function(e){if(!this._hideFileInput){var f=this._createInput("","ruFakeInput radPreventDecorate","text","-1");
    a(f).attr("id",this.getID("fakeInput"));
    f.size=this.get_inputSize()-1;
    e.appendChild(f);
    var i=this._createLabel(a(f).attr("id"));
    e.appendChild(i);
    }var j=this._appendSelectButton(e);
    if($telerik.isSafari){var k=$telerik.getBounds(j).width;
    var h=0;
    if(!this._hideFileInput){h=$telerik.getBounds(f).width;
    }var g=this._fileInput;
    if(g&&(k+h)>0){g.style.width=(k+h)+"px";
    }}},_markForDeletion:function(e){a(e).addClass("ruFileRemoved");
    a(".ruUploadProgress, .ruRemove",e).css("display","none");
    },_addUploadedFile:function(e,f){this._additionalFieldIndex++;
    f.fileInfo.Index=this._additionalFieldIndex;
    this._updateRowImage(e,"success");
    a(e).data("fileInfo",f);
    this._uploadedFiles.push(f);
    this.updateClientState();
    },_getProgressUrl:function(){return this._progressHandlerUrl;
    },_getFileName:function(f){if($telerik.isIE||$telerik.isChrome||$telerik.isOpera){var e=f.lastIndexOf("\\");
    if(e){f=f.substring(e+1);
    }}return f;
    ************

    Any help would be appreciated.

    Thanks,
    Sujatha

  10. Sujatha
    Sujatha avatar
    4 posts
    Member since:
    Mar 2013

    Posted 04 Aug 2014 in reply to Sujatha Link to this post

    Any suggestions for the above posted issue? 

    Thanks,
    Sujatha
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Aug 2014 in reply to Sujatha Link to this post

    Hi Sujatha,

    Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadAsyncUpload OnClientFilesSelected="fileSelected" OnClientFilesUploaded="fileUploaded"
        MultipleFileSelection="Automatic" ID="RadAsyncUpload1" runat="server">
    </telerik:RadAsyncUpload>

    JavaScript:
    function fileSelected(sender, args) {
        sender.set_enabled(false);
        $('.ruCancel').prop('disabled', false);
    }
    function fileUploaded(sender, args) {
        sender.set_enabled(true);
    }

    Thanks,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017