simple text message in upload window

6 posts, 1 answers
  1. Jed
    Jed avatar
    16 posts
    Member since:
    Apr 2009

    Posted 18 Jul 2012 Link to this post

    Hi,

      What is the easiest way to add a text message above the input fields in the upload window in file explorer?

    Thanks,

    Jed
  2. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 23 Jul 2012 Link to this post

    Hello Jed,

    RadFileExplorer does not offer functionality to modify the Upload dialog. Nevertheless, you can achieve this by adding a <label> element to every row with upload information. You could use JavaScript for the implementation.

    For your convenience I prepared a sample project, applying the mentioned approach.

    Kind regards,
    Veselina
    the Telerik team
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jed
    Jed avatar
    16 posts
    Member since:
    Apr 2009

    Posted 24 Jul 2012 Link to this post

    Hi Veselina,

      Thanks for the reply. This solution won't work though if your using asnyc upload. What would be the variation of your code sample for that?

    Thank you,

    Jed
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jul 2012 Link to this post

    Hi Jed,

    Try the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" OnClientLoad="addTitle" Configuration-EnableAsyncUpload="true">
        <Configuration ViewPaths="~/" UploadPaths="~/" DeletePaths="~/" />
    </telerik:RadFileExplorer>

    JS:
    <script type="text/javascript">
        function addTitle(explorer, args) {
            var upload = $find(explorer.get_id() + "_asyncUpload1");
            var uploadEl = upload.get_element(); // Get the upload's wrapper
            var spanelems = uploadEl.getElementsByClassName("ruInputs"); //Get the input field
            var currentSpan = spanelems[0];
            var customLabel = document.createElement("label");
            customLabel.innerHTML = "Value" ;
            currentSpan.parentNode.insertBefore(customLabel, currentSpan);
            currentSpan.parentNode.insertBefore(document.createElement("br"), currentSpan);
       
        }
    </script>

    Hope this helps.

    Regards,
    Princy.
  6. Jed
    Jed avatar
    16 posts
    Member since:
    Apr 2009

    Posted 25 Jul 2012 Link to this post

    Hi Princy,

      Thank you for the code, it does work in Firefox and Chrome, but not IE. Is there a universal solution or will I need to code differently for IE?

    Thanks,

    Jed
  7. Answer
    Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 26 Jul 2012 Link to this post

    Hi Jed,

    We modified the previously suggested code for AsyncUpload. The script is tested in Mozilla Firefox, Chrome, Opera and IE, and seems to behave well.

    Hope it works for your:
    <script type="text/javascript">
        function addTitle(explorer) {
            var upload = $find(explorer.get_id() + "_asyncUpload1");
            var uploadEl = upload.get_element(); // Get the upload's wrapper
            var customLabel = document.createElement("label"); //Create a label element
            customLabel.style.display = "block"; //Change the display mode in order to be on a single row
            customLabel.style.height = "15px";
            customLabel.innerHTML = "Value";
            setTimeout(function () {
                customLabel = uploadEl.parentNode.insertBefore(customLabel, uploadEl); //insert the label as a first element the Upload-row
            }, 0);
             
            //assign handler to the OnClientAdded event of the underlying AsyncUpload control in order to move the label-element to the current upload-row
            upload.add_added(function (sender, args) {
                var addedRow = args.get_row();
                addedRow.insertBefore(customLabel, addedRow.firstChild);
            });
        }
    </script>


    Greetings,
    Veselina
    the Telerik team
    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 their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017