RadAsyncUpload: How can i hide buttons

6 posts, 2 answers
  1. Jagadeeswararao
    Jagadeeswararao avatar
    15 posts
    Member since:
    Sep 2013

    Posted 19 Dec 2013 Link to this post

    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.

     
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Dec 2013 Link to this post

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

    Posted 20 Dec 2013 Link to this post

    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.




  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 20 Dec 2013 Link to this post

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

    Posted 20 Dec 2013 Link to this post

    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.
  7. Jagadeeswararao
    Jagadeeswararao avatar
    15 posts
    Member since:
    Sep 2013

    Posted 22 Dec 2013 Link to this post

    Thanks All,  Now its working fine.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017