This is a migrated thread and some comments may be shown as answers.

RadAsyncUpload: How can i hide buttons

6 Answers 607 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Jagadeeswararao
Top achievements
Rank 1
Jagadeeswararao asked on 20 Dec 2013, 05:05 AM
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.

 

6 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 20 Dec 2013, 06:27 AM
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.
0
Jagadeeswararao
Top achievements
Rank 1
answered on 20 Dec 2013, 06:53 AM
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.




0
Boyan Dimitrov
Telerik team
answered on 20 Dec 2013, 04:01 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Accepted
Shinu
Top achievements
Rank 2
answered on 21 Dec 2013, 04:06 AM
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.
0
Jagadeeswararao
Top achievements
Rank 1
answered on 23 Dec 2013, 04:20 AM
Thanks All,  Now its working fine.
0
pratichi
Top achievements
Rank 1
Iron
answered on 06 Jan 2023, 06:28 PM

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
Telerik team
commented on 17 Jan 2023, 03:32 PM

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

Tags
AsyncUpload
Asked by
Jagadeeswararao
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Jagadeeswararao
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
pratichi
Top achievements
Rank 1
Iron
Share this question
or