RadAsyncUpload: How can i hide buttons

[Jagadeeswararao]

Hi,
 How can i hide Add and delete buttons while file uploading in progress.?
 Once the file uploading is completed then i want to show those buttons.

Thanks,
Jagadeeswararao Chappa.

 

[Shinu]

Hi Jagadeeswararao,

I guess  you are using RadUpload because RadAsyncUpload doesn't have any inbuilt buttons called 'Add' and 'Delete'. Please have a look into the sample code snippet to hide the Add and Delete button of RadUpload while selecting a file.

ASPX:

<telerik:RadUpload ID="RadUpload1" runat="server" OnClientFileSelected="FileSelected">
</telerik:RadUpload>
<asp:Button runat="server" ID="SubmitButton" Text="Upload files"></asp:Button>

JavaScript:

<script type="text/javascript">
    function FileSelected(sender, args) {
        $telerik.$(".ruAdd").hide();
        $telerik.$(".ruDelete").hide();
    }
</script>

RadUpload has been replaced by RadAsyncUpload. So I suggest you that it is better to use RadAsyncUpload, which have more features than RadUpload. Let me know if you have any concern.

Thanks,
Shinu.

[Jagadeeswararao]

Thanks for response shinu.
No, i'm using RadAsyncUpload.i have used asp button for delete.
here its my code,
    <telerik:RadAsyncUpload EnableInlineProgress="true" EnableFileInputSkinning="false" OnClientFilesUploaded="onFileUploaded" OnClientFileSelected="onFileSelected"
                    runat="server" ID="AsyncUpload1" MultipleFileSelection="Automatic"
                    HideFileInput="true" Width="100px" Height="15px" Localization-Select="Add" />

while file upload is in progress, i'm able to click add button. i want to make it hide.

[Boyan Dimitrov]

Hello,

An easy and convenient way of achieving such functionality would be to use the RadAsyncUpload client-side event OnClientFileUploading to hide the buttons "Add" and "Remove" and the event OnClientFileUploaded to show them again. The "Add" button has a css class "ruButton" and the "Remove" has a class "ruRemove". I would suggest to find those DOM elements using jQuery to hide and show them again.


Regards,
Boyan Dimitrov
Telerik

[Shinu]

Hi Jagadeeswararao,

Please try the following JavaScript to achieve your scenario.

JavaScript:

<script type="text/javascript">
    function OnClientProgressUpdating1(sender, args) {
        //hide add button while uploading progress
        $telerik.$(".ruBrowse").hide();
        var button = document.getElementById("Button2");
        //hide delete button
       button.style.display = "none";
    }
    function OnClientFilesUploaded1(sender, args) {
        //after uploading it will show both add and delete button
        $telerik.$(".ruBrowse").show();
        var button = document.getElementById("Button2");
       button.style.display = "block";
    }
</script>

Thanks,
Shinu.

[Jagadeeswararao]

Thanks All,  Now its working fine.

[pratichi]

I want to hide the green icon and remove button too which pops up while uploading is in progress. I tried the above options but nothing seems to works. Please suggest. I have used it like below but it doesn't work:

 

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

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

[Valentin Dragnev]

Hello Pratichi,

One possible way to hide the green indicator and remove the button is by using more specific CSS selectors. 

You can try the following CSS code:

.RadUpload .radIcon {
    display:none;
}

.ruButton.ruRemove {
    display:none;
}

 

HTML declaration of RadAsyncUpload:

 

<telerik:RadAsyncUpload
            EnableInlineProgress="true"
            runat="server"
            ID="AsyncUpload1"
            Width="100px"
            Height="15px"
            Localization-Select="Add" />

Hope the provided solution was helpful.

Kind Regards