Progress Indicator color

[Jugoslav]

How do i change the progress indicator color to say Green?
Thank you 

P.S. meaning it's not the Forecolor nor the BackColor property ... rather it's the color of the Progress Indicator as shown on the image:
http://www.telerik.com/help/aspnet-ajax/media/progress-bar-element-structure.png

[Slav]

Hi Jugoslav,

The background color of the progress indicator element is configured via CSS styles, so you could override them in order to set a new color:

<style type="text/css">
    div.RadProgressBar .rpbStateSelected,
    div.RadProgressBar .rpbStateSelected:hover,
    div.RadProgressBar .rpbStateSelected:link,
    div.RadProgressBar .rpbStateSelected:visited
    {
        background-color: lime;
    }
</style>

<telerik:RadProgressBar runat="server" ID="ValueProgressBar" BarType="Value" Value="80" MinValue="0" MaxValue="100">
</telerik:RadProgressBar>
<telerik:RadProgressBar runat="server" ID="ChunkProgressBar" BarType="Chunk" Value="2" MinValue="0" MaxValue="5">
</telerik:RadProgressBar>

If you do not want to overwrite styles you could also create a custom skin with the new background color as described in the following help article: http://www.telerik.com/help/aspnet-ajax/introduction-create-custom-skin.html

Regards,
Slav
Telerik

[Jugoslav]

Thank you for replying it's much appreciated. Btw is it possible to put all that into a class (CSS) and assign only if certain criteria is met e.g. if value > 0 then add class to progress bar else progressbar.skin = "telerik" ???
Thx again

[Slav]

Hi Jugoslav,

You could create a custom CSS class that will hold the background color:

div.CustomRadProgressBar .rpbStateSelected,
div.CustomRadProgressBar .rpbStateSelected:hover,
div.CustomRadProgressBar .rpbStateSelected:link,
div.CustomRadProgressBar .rpbStateSelected:visited {
    background-color: lime;
}

The CustomRadProgressBar CSS class can later be set to the progress bar either on the client or on the server via the CssClass property of the control, depending on where do you perform the check for changing the background.

Another option is to create a custom skin as mentioned previously and change the value of the Skin property of RadProgressBar on the server when the criteria is met.

Regards,
Slav
Telerik

[Jugoslav]

OK BUT HOW DO I CREATE THAT CUSTOM CLASS ... SHOULD I PUT ALL THESE CLASSES FROM ABOVE INSIDE ANOTHER CLASS OR ? PLEASE GIVE ME AN EXAMPLE. WOULD BE GREATLY APPRECIATED THX

[Steve LaForge]

This is a small demo app that I got to work.  I have 3 numeric input boxes and 3 progress bars.  Each progress bar has an external label after it that also shows the value.  My users are trying to decide if I like seeing the value inside the bar or outside of it.

div.greenProgressBar .rpbStateSelected,
div.greenProgressBar .rpbStateSelected:hover,
div.greenProgressBar .rpbStateSelected:link,
div.greenProgressBar .rpbStateSelected:visited {
    background-color: green;
}
div.redProgressBar .rpbStateSelected,
div.redProgressBar .rpbStateSelected:hover,
div.redProgressBar .rpbStateSelected:link,
div.redProgressBar .rpbStateSelected:visited {
    background-color: red;
}
div.yellowProgressBar .rpbStateSelected,
div.yellowProgressBar .rpbStateSelected:hover,
div.yellowProgressBar .rpbStateSelected:link,
div.yellowProgressBar .rpbStateSelected:visited {
        background-color: yellow;
        color: black;  /* added this because white doesn't show very well on a yellow background */
}

Then my HTML looks like:

<telerik:RadNumericTextBox ShowSpinButtons="false" IncrementSettings-InterceptArrowKeys="true" IncrementSettings-InterceptMouseWheel="true"
    MinValue="0" MaxValue="100" Value="95" IncrementSettings-Step="1" NumberFormat-DecimalDigits="0"
Label="Value 1: " LabelWidth="130px" runat="server" ID="nim1" Width="250px" /><br />
<telerik:RadNumericTextBox ShowSpinButtons="false" IncrementSettings-InterceptArrowKeys="true" IncrementSettings-InterceptMouseWheel="true"
    MinValue="0" MaxValue="100" Value="95" IncrementSettings-Step="1" NumberFormat-DecimalDigits="0"
Label="Value 2: " LabelWidth="130px" runat="server" ID="nim2" Width="250px" /><br />
<telerik:RadNumericTextBox ShowSpinButtons="false" IncrementSettings-InterceptArrowKeys="true" IncrementSettings-InterceptMouseWheel="true"
    MinValue="0" MaxValue="100" Value="95" IncrementSettings-Step="1" NumberFormat-DecimalDigits="0"
Label="Value 3: " LabelWidth="130px" runat="server" ID="nim3" Width="250px" /><br />
<asp:Button ID="btnProgressBar" runat="server" Text="Update" OnClick="btnProgressBar_Click" />
<br /><br />
Value 1: <telerik:RadProgressBar ID="radProgressBar1" runat="server" BarType="Percent" />
<div style="width: 50px; text-align: right; display: inline-block;"><asp:Label ID="label1" runat="server" /></div>
<br />
Value 2: <telerik:RadProgressBar ID="radProgressBar2" runat="server" BarType="Percent" />
<div style="width: 50px; text-align: right; display: inline-block;"><asp:Label ID="label2" runat="server" /></div>
<br />
Value 3: <telerik:RadProgressBar ID="radProgressBar3" runat="server" BarType="Percent" />
<div style="width: 50px; text-align: right; display: inline-block;"><asp:Label ID="label3" runat="server" /></div>

Finally, in my code-behind (Yes, this is VB.  I was adding to an older existing app.  Today it would have been in C#)

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        nim1.Value = 50
        nim2.Value = 93
        nim3.Value = 98
        setProgressBarColor(radProgressBar1, nim1.Value, label1)
        setProgressBarColor(radProgressBar2, nim2.Value, label2)
        setProgressBarColor(radProgressBar3, nim3.Value, label3)
    End If
End Sub

Protected Sub btnProgressBar_Click(sender As Object, e As EventArgs)
    setProgressBarColor(radProgressBar1, nim1.Value, label1)
    setProgressBarColor(radProgressBar2, nim2.Value, label2)
    setProgressBarColor(radProgressBar3, nim3.Value, label3)
End Sub

Protected Sub setProgressBarColor(ByRef progBar As RadProgressBar, ByVal pbValue As Double, ByRef lbl As Label)
    progBar.Value = pbValue
    lbl.Text = String.Format("{0}%", CInt(pbValue).ToString())
    Select Case CInt(pbValue)
        Case Is <= 90
            progBar.CssClass = "redProgressBar"
        Case Is <= 95
            progBar.CssClass = "yellowProgressBar"
        Case Else
            progBar.CssClass = "greenProgressBar"
    End Select
End Sub

I hope that this helps!  I too was frustrated that this was so hard to find.  Telerik usually has some pretty good examples.  This one seems like something that would be a common task, with a good example.  Or - better yet - a method built into the control that could control the color on the fly.  For example, I think the ability to pick a color using the color picker control, and set the bar color to match would obviously provide the functionality we are all looking for. 

[Slav]

Hi Steve,

There is already a demo that shows how you can change the background color of the selected area in the RadProgressBar, however it uses the client-side API of the control: http://demos.telerik.com/aspnet-ajax/progress-bar/functionality/custom-label/defaultcs.aspx

If in your case the color you want to set as a background is retrieved on the server, you could register a script that sets the color to a JavaScript variable on the code-behind, then on the client-side you can get this variable and set its value as a background color of the selected area. The following code-sample shows this approach:

<script type="text/javascript">
    function progressBarLoad(sender, args) {
        if (typeof selectedColor !== 'undefined') {
            $telerik.$(sender.get_progressWrapper()).css('backgroundColor', selectedColor);
        }
    }
</script>
<telerik:RadColorPicker runat="server" ID="RadColorPicker1" OnColorChanged="RadColorPicker1_ColorChanged"
    AutoPostBack="true"></telerik:RadColorPicker>
<telerik:RadProgressBar ID="radProgressBar1" runat="server" Value="40" BarType="Percent">
    <ClientEvents OnLoad="progressBarLoad" />
</telerik:RadProgressBar>

Code-Behind:

protected void RadColorPicker1_ColorChanged(object sender, EventArgs e)
{
    string strColor = System.Drawing.ColorTranslator.ToHtml(RadColorPicker1.SelectedColor);
    string script = "var selectedColor = '" + strColor + "';";
    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "assignSelectedColor", script, true);
}

Regards,
Slav
Telerik

[Steve LaForge]

Thanks for the additional info!