Change the Appearence of RadAsyncUpload Control

Thread is closed for posting
4 posts, 0 answers
  1. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 02 Jul 2015 Link to this post

    Hi,

    I am trying to make some changes to the default appearance of RadAsyncUpload control. However I am unable to change the appearance. Basically I want to hide the Green dot icon which shows if file uploaded successfully or not and the Change the Red cross icon which shows along with the Remove option.(Please check the attached image for more details). I have tried with the below css style and unfortunately it didn't work. Could you please help me.

    <style>
                div.RadUpload .ruRemove
                {
                    background-image: url('/Images/DeleteImage.png') !important;
                    background-position: -2px 0px;
                    width: 50px;
                    height: 14px;
                }
            </style>

     

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 07 Jul 2015 Link to this post

    Hello,

    The green dot icon in the classic render mode can be removed by the following:
    html .RadUpload .ruUploadSuccess {
        background-image: none;
    }

    The red cross icon image is applied as a background image of the "remove" button in the classic render mode, so it is not possible to set its width and height without breaking the layout. The background image can be changed by the following CSS:
    html .RadUpload .ruRemove {
        background-image: url('/Images/DeleteImage.png');
        background-position: -2px 0;
    }



    In the lightweight render mode, the icon has its own wrapper, so if you would like to use a sprite image, you can customize its width and height applying the following:
    html .RadUpload .ruFileLI .ruButton.ruRemove:before {
        content: "";
        background-image: url('/Images/DeleteImage.png');
        background-position: -2px 0;
        width: 50px;
        height: 14px;
    }

    The green dot icon in the lightweight render mode can be hidden by the following:
    .ruUploadSuccess .radIcon {
        display: none;
    }


    Regards,
    Magdalena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 07 Jul 2015 in reply to Magdalena Link to this post

    Thanks for the Reply Magdalena. I am gonna try this out today. But for that I need to choose which style I need to use from the two sets you provided. 

     How will I know that the upload control is loading in classic Render mode or lightweight render mode.

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 10 Jul 2015 Link to this post

    Hi Ajeesh,

    By default, the render mode is classic. We plan to make the lightweight render mode to be the default value, but for now if you would like to make a control lightweight, it is necessary to set the RenderMode property in the web.config:
    <appSettings>
       <add key="Telerik.Web.UI.AsyncUpload.RenderMode" value="lightweight"/>

    or explicitly in an aspx file:
    <telerik:RadAsyncUpload runat="server" RenderMode="Lightweight"/>

    You can also find out the render mode value by the following:

    code behind:
    RadAsyncUpload1.RenderMode;

    client side:
    $find("RadAsyncUpload1").get_renderMode()

    The render mode corresponds with the following values:
      - Auto: 0
      - Classic: 1
      - Lite: 2
      - Native: 3
      - Mobile: 4



    Regards,
    Magdalena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top