Change the Appearence of RadAsyncUpload Control

[A2H]

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>

 

[Magdalena]

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

[A2H]

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.

[Magdalena]

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

[pratichi]

I want to hide the yellow/green blinking icon and remove button which appears while uploading in radasyncupload. I have followed above examples as suggested but it doesn't work. Below is the snippet I have used. Please suggest

 

div.RadUpload .ruUploadSuccess .radIcon {
        display:none;
        
    }

    div.RadUpload .ruFileLI .ruButton.ruRemove {
        display:none;
    }