How to Conditionally format the color of the progress bar

2 Answers 320 Views
ProgressBar
Patrick
Top achievements
Rank 1
Iron
Patrick asked on 14 Jun 2022, 02:10 PM

Is there a way to format the color of TelerikProgressBar based off data?  

I see you can set the Class on that item, however it does not apply background-color to the fill of the bar.

 

I've found that I can modify all bars by setting the following css:

.k-progressbar .k-state-selected {

       background-color:green;
    }

 

Thanks!

Benjamin
Top achievements
Rank 2
Iron
commented on 16 Jun 2022, 07:46 AM

Have you tried using the Class-Attribute of the ProgressBar-Component? You can add any class you want, like bg-green/bg-red/... (if bootstrap installed)

You can define the css classes to use one line before

...

@{

var defaultClass = "bg-green";

if(mymodel.amount > 3) defaultClass = "bg-red";

}

<TelerikProgressBar Value="@model.Progress" Class="@defaultClass">...</TelerikProgressBar>

 

Patrick
Top achievements
Rank 1
Iron
commented on 16 Jun 2022, 12:25 PM | edited

Yes, if I apply the background-color attribute in a custom class and conditionally apply it to the element it changes the background fill color and not the color of the bar.
Benjamin
Top achievements
Rank 2
Iron
commented on 16 Jun 2022, 12:45 PM

Gotcha :)

You have the "highlighted" (e.g. blue) bar and the progressbar itself (usually grey).

The highlighted bar has css-classes .k-progressbar .k-state-selected, while the progressbar is just the .k-progressbar.

You can reach the goal with css selectors (same approach as above), just add additional css like:

.k-progressbar.bg-green {
    background-color: lawngreen;
}

.k-progressbar.bg-green .k-state-selected {
   background-color: green;
}

output:

It would be much better to have a property for this, but afaik there is no such (yet).

I'd suggest you to throw an suggestion in the box: https://feedback.telerik.com/blazor?listMode=Recent&categoryId=2231 :)

 

Patrick
Top achievements
Rank 1
Iron
commented on 16 Jun 2022, 01:32 PM | edited

 

Thanks Benjamin! I'll definitely throw a suggestion for adding a property. 

I had to modify it slightly to get it to work for me, but you definitely pointed me in the right direction.  Posted bellow the modified css needed and a picture the inspector and rendered HTML

    .bg-green .k-state-selected  {
    background-color: green;
    }

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Patrick
Top achievements
Rank 1
Iron
answered on 22 Jun 2022, 02:15 PM | edited on 22 Jun 2022, 02:18 PM

1. Set  custom class on TelerikProgressBar

  • @customClass = 'bg-green'
  • <TelerikProgressBar Value="@model.Progress" Class="@customClass">...</TelerikProgressBar>

2. Add Css to overwrite the background-color  when YourCustomClass  .k-state-selected

  • .bg-green .k-state-selected  {
        background-color: green;
        }

Ivan
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 22 Jun 2022, 03:53 PM

Since 3.4.0 version, this feature not workig with custom Saas Theme Buider
See attachments
_Layout.cshtml
    @*<link href="@Url.Content("lib/blazor-ui/swatches/default-ocean-blue.css")" rel="stylesheet" type="text/css" />*@
    <link href="@Url.Content("css/telerik-light/telerik-light.css")" rel="stylesheet" type="text/css" />

Nadezhda Tacheva
Telerik team
commented on 27 Jun 2022, 09:48 AM

Hi Ivan, 

It looks like the issue here is specifically theme related as I did not manage to reproduce it with the built-in themes using UI for Blazor 3.4.0. I will open a dedicated ticket on the matter, so we can revise it with our front-end engineers.

W.
Top achievements
Rank 1
commented on 01 Jul 2022, 06:01 AM | edited

We experience the same problem since 3.40
Bootstrap Theme (made with Saas theme builder .. .months ago)

after updating the CSS
the problem solved !

 

Nadezhda Tacheva
Telerik team
commented on 05 Jul 2022, 12:01 PM

Hi W.,

The issue occurred as the themes in the ThemeBuilder were not accordingly updated, so this caused a mismatch between the latest component rendering and the themes generated through the ThemeBuilder.

Our front-end engineers managed to address this quickly and indeed, generating the desired theme anew is expected to solve the problem.

0
Nadezhda Tacheva
Telerik team
answered on 27 Jun 2022, 09:46 AM

Hi all,

We now have a feature request for adding Property to set color of Progress Bar that Patrick opened. I just wanted to link it here, so any other interested parties might easily find and follow it.

Regards,
Nadezhda Tacheva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ProgressBar
Asked by
Patrick
Top achievements
Rank 1
Iron
Answers by
Patrick
Top achievements
Rank 1
Iron
Nadezhda Tacheva
Telerik team
Share this question
or