Suppress the display of ruUploadSuccess and ruRemove

[David]

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>

[Princy]

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.

[David]

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.

[Shinu]

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.

[David]

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