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

Suppress the display of ruUploadSuccess and ruRemove

4 Answers 129 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 10 Jan 2014, 01:22 PM
Is there a way to suppress the file list after a RadAsyncUpload completes? I have tried the following:

    .ruUploadSuccess {
        visibility: hidden;
        width: 0 !important;
        height: 0 !important;
        padding: 0;
    }

    .ruRemove {
        visibility: hidden;
        width: 0 !important;
        height: 0 !important;
        padding: 0;
    }

And these make the two controls invisible but there is still a <li> element created when the upload completes that causes other control to get larger vertically. (this is what I'm trying to prevent)

I tried MaxFileInputsCount=1 but when that is combined with the above CSS ... the browse button and the ruFileInput textbox disappear. 

The end result I would like is for RadAsyncUpload to look more like RadUpload ... if that's possible.
<edit>Actually, my management wants it to look exactly like RadUpload</edit>

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 13 Jan 2014, 04:34 AM
Hi David,

Please try to set UploadedFilesRendering property of RadAsyncUpload to "BelowFileInput" along with the CSS. Please have a look into the sample code snippet which works fine at my end.

ASPX:
<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" UploadedFilesRendering="BelowFileInput">
</telerik:RadAsyncUpload>

CSS:
<style type="text/css">
    .ruUploadSuccess
    {
        visibility: hidden !important;
    }   
    .ruRemove
    {
        visibility: hidden !important;
    }
    .ruUploadProgress
    {
        visibility: hidden !important;
    }
</style>

Hope this will helps you.
Thanks,
Princy.
0
David
Top achievements
Rank 1
answered on 13 Jan 2014, 03:05 PM
Thanks for your quick response. Those rules do suppress the appearance of the progress and remove controls and changing the "UploadedFilesRendering" property moves the list where it does not cause other controls to be overlaid. But, we still get what looks like an empty <li> that still makes the AsyncUpload control bigger vertically and slides lower controls (some buttons) down so they don't get overwritten. I have attached a screenshot showing the effect.

The result so far is better and may be acceptable ... but my superiors still want it to look "just like the old RadUpload". There are good reasons to replace RadUpload with RadAsyncUpload but for some reason we don't want our end users to see any difference.
0
Shinu
Top achievements
Rank 2
answered on 14 Jan 2014, 08:09 AM
Hi David,

Please have a look into the following code snippet to achieve your scenario.

ASPX:
<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" UploadedFilesRendering="BelowFileInput"
    OnClientFileUploading="uploading_file">
</telerik:RadAsyncUpload>
<telerik:RadButton ID="RadButton1" runat="server" Text="Add Files">
</telerik:RadButton>

CSS:
<style type="text/css">
    .ruUploadProgress, li .ruCancel, li .ruRemove
    {
        visibility: hidden !important;
    }
    li.ruUploading
    {
        display: none !important;
    }
</style>

JavaScript:
<script type="text/javascript">
    function uploading_file(sender, args) {
        $telerik.$(args.get_row()).addClass("ruUploading");
    }
</script>

Hope this will helps you.
Thanks,
Shinu.
0
David
Top achievements
Rank 1
answered on 14 Jan 2014, 05:24 PM
Many thanks. That got it about as right as I can expect.

I was dropped into the world of Telerik controls used by a fairly large and complex website and the training methodology of "sink or swim" ;-) this forum has been invaluable in helping me get needed work done. The quick responses and good answers are much appreciated.

davera
Tags
AsyncUpload
Asked by
David
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
David
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or