ProgressArea title

[Shonda]

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?

[Adam Ooten]

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.

[Genady Sergeev]

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.

[Adam Ooten]

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

	<style>
	.RadUploadProgressArea
	{
	position: relative;
	}
	.clsLoadHeader
	{
	position: absolute;
	top: 15px;
	left: 20px;
	font-size: 16px;
	line-height: 20px;
	margin: 0;
	padding: 0;
	}
	</style>

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

Same concept, but jQuery free!  Enjoy!

[Shonda]

Works like a charm! Thanks.

[Martin]

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" />

[Genady Sergeev]

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.

[ATS]

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.

[Genady Sergeev]

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.

[Jon Vickers]

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

[ATS]

I believe it's this one here: http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/788