Suppress the display of ruUploadSuccess and ruRemove

5 posts, 0 answers
  1. David
    David avatar
    23 posts
    Member since:
    Jun 2013

    Posted 10 Jan 2014 Link to this post

    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>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Jan 2014 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    23 posts
    Member since:
    Jun 2013

    Posted 13 Jan 2014 Link to this post

    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.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Jan 2014 Link to this post

    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.
  6. David
    David avatar
    23 posts
    Member since:
    Jun 2013

    Posted 14 Jan 2014 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017