---
ADMIN EDIT
When the component calculates the size of the chunks it doesn't seem to use invariant culture so when the decimal separator is a comma `,` it puts that comma in the CSS rule, which the browser can't parse and the chunks have wrong sizes which makes them invisible.
Reproducible plus CSS workaround
<h4>Default</h4>
<TelerikChunkProgressBar Value="1" Max="3" ChunkCount="3"></TelerikChunkProgressBar><br /><br />
<TelerikChunkProgressBar Value="3" Max="3" ChunkCount="3"></TelerikChunkProgressBar><br /><br />
<TelerikChunkProgressBar Value="1" Max="7" ChunkCount="7"></TelerikChunkProgressBar><br /><br />
<TelerikChunkProgressBar Value="4" Max="7" ChunkCount="7"></TelerikChunkProgressBar><br /><br />
<TelerikChunkProgressBar Value="7" Max="7" ChunkCount="7"></TelerikChunkProgressBar>
<h4>With Workaround</h4>
<style>
.three-chunks-workaround li {
width: 33.333% !important;
}
.seven-chunks-workaround li {
width: 14.285% !important;
}
</style>
<TelerikChunkProgressBar Class="three-chunks-workaround" Value="1" Max="3" ChunkCount="3"></TelerikChunkProgressBar><br /><br />
<TelerikChunkProgressBar Class="three-chunks-workaround" Value="3" Max="3" ChunkCount="3"></TelerikChunkProgressBar><br /><br />
<TelerikChunkProgressBar Class="seven-chunks-workaround" Value="1" Max="7" ChunkCount="7"></TelerikChunkProgressBar><br /><br />
<TelerikChunkProgressBar Class="seven-chunks-workaround" Value="4" Max="7" ChunkCount="7"></TelerikChunkProgressBar><br /><br />
<TelerikChunkProgressBar Class="seven-chunks-workaround" Value="7" Max="7" ChunkCount="7"></TelerikChunkProgressBar>
@code{
protected override void OnInitialized()
{
var culture = new System.Globalization.CultureInfo("sv-SE");
System.Globalization.CultureInfo.DefaultThreadCurrentCulture = culture;
System.Globalization.CultureInfo.DefaultThreadCurrentUICulture = culture;
base.OnInitialized();
}
}
The component does not calculate the chunks correctly. Below you could see a reproduction and as an attached file the result of building it.
Reproduction:
<TelerikChunkProgressBar Value="@Value"
Max="@MaxValue"
ChunkCount="@MaxValue">
</TelerikChunkProgressBar>
@code {
public double Value { get; set; } = 15;
public int MaxValue { get; set; } = 15;
}