ProgressArea title

Thread is closed for posting
11 posts, 2 answers
  1. Shonda
    Shonda avatar
    36 posts
    Member since:
    Apr 2009

    Posted 14 Apr 2009 Link to this post

    I would like to add some text to the progress area in the colored box above the progress bars. Is this possible and if so how can I achieve this?
  2. Adam Ooten
    Adam Ooten avatar
    15 posts
    Member since:
    Mar 2009

    Posted 16 Apr 2009 Link to this post

    That is a great question and one I was about to ask!  Anybody know how to do this?  That header area looks like it was made to have a title in there, but I have not figured out how to add one.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 17 Apr 2009 Link to this post

    Hi Shonda Fortin,

    This can be easily achieved using CSS and jQuery. The idea is to add <h2> tag to the RadProgressContainer and then position it accordingly to your needs. Example:

     <style type="text/css"
            .RadUploadProgressArea 
            { 
                position: relative; 
            } 
     
            .header 
            { 
                position: absolute; 
                top: 15px; 
                left: 20px; 
                font-size: 16px; 
                line-height: 20px; 
                margin: 0; 
                padding: 0; 
            } 
        </style> 

    and apply this style to the following:

    <script type="text/javascript"
            function pageLoad() { 
                $("<h2> This is header </h2>"
                    .addClass("header"
                    .insertBefore(".RadUploadProgressArea ul"); 
            }    
        </script>   

    In addition, you can find a sample project reproducing the desired functionality attached to this response.

    All the best,
    Genady Sergeev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Answer
    Adam Ooten
    Adam Ooten avatar
    15 posts
    Member since:
    Mar 2009

    Posted 05 May 2009 Link to this post

    I didn't want to use jQuery for this solution, so I thought I would share the code that works for me without jQuery.

    1 <style>  
    2 .RadUploadProgressArea  
    3 {  
    4     positionrelative;  
    5 }  
    6 .clsLoadHeader  
    7 {  
    8     positionabsolute;  
    9     top15px;  
    10     left20px;  
    11     font-size16px;  
    12     line-height20px;  
    13     margin: 0;  
    14     padding: 0;  
    15 }  
    16 </style> 

    1 <script language="javascript" type="text/javascript">  
    2         function pageLoad() {  
    3             var container = document.getElementById('RadProgressArea1_Panel');  
    4             var new_element = document.createElement('h2');  
    5             new_element.innerHTML = 'IMS';  
    6             new_element.setAttribute("class""clsLoadHeader");     //For Most Browsers  
    7             new_element.setAttribute("className""clsLoadHeader"); //For IE; harmless to other browsers.  
    8             container.insertBefore(new_element, container.firstChild);  
    9         }  
    10 </script> 

    Same concept, but jQuery free!  Enjoy!
  6. Shonda
    Shonda avatar
    36 posts
    Member since:
    Apr 2009

    Posted 05 May 2009 Link to this post

    Works like a charm! Thanks.
  7. Martin
    Martin avatar
    2 posts
    Member since:
    Apr 2009

    Posted 05 Aug 2009 Link to this post

    Call me crazy, but how is that EASY?  How about adding a title attribute to the RadProgressArea? 

     <telerik:RadProgressArea id="progressArea1" runat="server" title="My expensive control" />


  8. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 06 Aug 2009 Link to this post

    Hello Martin,

    The title attribute is not rendered by browsers, the message set in there will appear in a tool tip. It is mainly used for SEO and accessability reasons.

    Regards,
    Genady Sergeev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. JT
    JT avatar
    49 posts
    Member since:
    Mar 2007

    Posted 22 Jan 2010 Link to this post

    Then add an attribute called HeaderText or something! This does kind of seem like a no-brainer to me, I've always assumed I was missing something with that bar at the top, it appears to have been made for text.
  10. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 26 Jan 2010 Link to this post

    Hello JT,

    I have added this feature request to our PITS system.I suggest that you navigate to this URl and vote for the feature. You can increase its priority this way.

    Best wishes,
    Genady Sergeev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. Jon Vickers
    Jon Vickers avatar
    8 posts
    Member since:
    Apr 2005

    Posted 12 Oct 2010 Link to this post

    Where is this PITS listing, I can't find it.

  12. JT
    JT avatar
    49 posts
    Member since:
    Mar 2007
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017