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

Disabling Other Controls While Uploading

9 Answers 91 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Pat
Top achievements
Rank 1
Pat asked on 19 Jan 2012, 05:05 PM

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?

9 Answers, 1 is accepted

Sort by
0
Pat
Top achievements
Rank 1
answered on 19 Jan 2012, 08:39 PM
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
0
Pat
Top achievements
Rank 1
answered on 19 Jan 2012, 09:50 PM
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
0
Bozhidar
Telerik team
answered on 20 Jan 2012, 04:44 PM
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
0
Sujatha
Top achievements
Rank 1
answered on 16 Jul 2014, 02:35 PM
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.
0
Princy
Top achievements
Rank 1
answered on 17 Jul 2014, 03:49 AM
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.
0
Sujatha
Top achievements
Rank 1
answered on 17 Jul 2014, 02:24 PM
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);
 
}


0
Sujatha
Top achievements
Rank 1
answered on 30 Jul 2014, 07:29 PM
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

0
Sujatha
Top achievements
Rank 1
answered on 04 Aug 2014, 01:59 PM
Any suggestions for the above posted issue? 

Thanks,
Sujatha
0
Princy
Top achievements
Rank 1
answered on 05 Aug 2014, 04:14 AM
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.
Tags
AsyncUpload
Asked by
Pat
Top achievements
Rank 1
Answers by
Pat
Top achievements
Rank 1
Bozhidar
Telerik team
Sujatha
Top achievements
Rank 1
Princy
Top achievements
Rank 1
Share this question
or