shorten display name?

5 posts, 1 answers
  1. Steven
    Steven avatar
    32 posts
    Member since:
    Jul 2012

    Posted 07 Feb 2012 Link to this post

    After selecting a file for upload, is it possible to shorten the displayed filename?

    So if a user selects veryveryverylongfilename.pdf, can I display

    veryveryverylong...  [x remove]

    but still save it as veryveryverylongfilename.pdf. I have a limited space where I have placed the control and if the filename is too long my formatting gets thrown off.



    thnx
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 07 Feb 2012 Link to this post

    Hello Steven,

    Try the following:
    <telerik:RadAsyncUpload
        OnClientFileUploaded="fileSelected" 
        ID="RadAsyncUpload1" runat="server">
    </telerik:RadAsyncUpload>

    <script type="text/javascript">
     
        function fileSelected(sender, args) {
            var $span = $telerik.$(".ruUploadProgress", args.get_row());
            var text = $span.text();
            if (text.length>15) {
                var newString = text.substring(0, 15) + '...';
                $span.text(newString);
            }
        }
     
    </script>

     
    All the best,
    Bozhidar
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steven
    Steven avatar
    32 posts
    Member since:
    Jul 2012

    Posted 07 Feb 2012 Link to this post

    perfect,t hanks
  5. Max
    Max avatar
    34 posts
    Member since:
    Dec 2011

    Posted 15 Mar 2012 Link to this post

    Hello again,

    The solution is not perfect because upload progress disappears, as it is as well contained in that newly rewritten span.

    So I modified it to its true perfection :)

    function FileSelected(sender, args) {
        var spanTag = document.createElement("span");
        spanTag.className = "ruFileProgressWrap";
        var spanTagInner = document.createElement("span");
        spanTagInner.className = "ruFileProgress ruProgressStarted";
        spanTag.appendChild(spanTagInner);
         
        var $span = window.$telerik.$(".ruUploadProgress", args.get_row());
        var text = $span.text();
        if (text.length > 15) {
            var newString = text.substring(0, 15) + '...';
            $span.text(newString);
            $span.append(spanTag);
        }
    }


    Cheers.
  6. Peter
    Peter avatar
    5 posts
    Member since:
    Oct 2013

    Posted 04 Oct 2013 Link to this post

    And even further tweaked Max's solution to add a tooltip (title) for shortened files (hover over filename and full name is displayed).

    function FileSelected(sender, args) {
        var spanTag = document.createElement("span");
        spanTag.className = "ruFileProgressWrap";
        var spanTagInner = document.createElement("span");
        spanTagInner.className = "ruFileProgress ruProgressStarted";
        spanTag.appendChild(spanTagInner);
         
        var $span = window.$telerik.$(".ruUploadProgress", args.get_row());
        var text = $span.text();
        if (text.length > 15) {
            var newString = text.substring(0, 15) + '...';
            $span.text(newString);
       $span.attr("title" ,text);
            $span.append(spanTag);
        }
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017