I created my own component which has a SfProgressBar inside. This simple component accepts a single double parameter as input, CompletionPercentage. I'd like to set the value of the progress bar to that value, while having also its color change based on the value.
Here's the complete code:
@using Syncfusion.Blazor.ProgressBar
<SfProgressBar Value="@CompletionPercentage" Minimum="0"
Maximum="100" TrackThickness="20" ShowProgressValue="true"
ProgressThickness="20" TrackColor="@TrackColorToUse" ProgressColor="@ProgressColorToUse">
</SfProgressBar>
@code {
[Parameter]
public double CompletionPercentage { get; set; }
protected override void OnParametersSet()
{
base.OnParametersSet();
StateHasChanged();
}
public string TrackColorToUse {
get
{
if (CompletionPercentage <= 40.0)
{
return "#750F2A"; //red
}
else if (CompletionPercentage > 40.0 && CompletionPercentage < 100.0)
{
return "#D1A815"; //yellow
}
else
return "#32B85A"; //green
}
}
public string ProgressColorToUse
{
get
{
if (CompletionPercentage <= 40.0)
{
return "#9E1539"; //red
}
else if (CompletionPercentage > 40.0 && CompletionPercentage < 100.0)
{
return "#F5C518"; //yellow
}
else
return "#42F577"; //green
}
}
}
As you can see, I have a property that returns a different color based on the value. The first time this progress bar is rendered everything is fine, but if I try to update the parameter in real time by giving a value that would trigger a different color, then the progress bar does not update accordingly: the color and the progress value are wrong.
Please note that the component is used inside a Sftab. If I switch tab to re-render the component manually, it works.
Thank you for your support.
