Progress Indicator color

8 posts, 1 answers
  1. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 11 Jan 2015 Link to this post

    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
  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 13 Jan 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 13 Jan 2015 in reply to Slav Link to this post

    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
  5. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 16 Jan 2015 Link to this post

    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
  6. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 17 Jan 2015 in reply to Slav Link to this post

    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
  7. Steve LaForge
    Steve LaForge avatar
    61 posts
    Member since:
    Feb 2005

    Posted 18 Mar 2015 Link to this post

    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. 






  8. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 23 Mar 2015 Link to this post

    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
  9. Steve LaForge
    Steve LaForge avatar
    61 posts
    Member since:
    Feb 2005

    Posted 23 Mar 2015 in reply to Slav Link to this post

    Thanks for the additional info!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017