Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 28 Sep 2026 06:40 by ADMIN
Andreas
Created on: 27 Sep 2026 09:16
Category: UI for Blazor
Type: Bug Report
0
RadialGauge does not resize dynamically

The size of the RadialGauge is not set correctly if changing properties from user input.

@page "/gauge"

<div>
    <TelerikCheckBox Id="large" @bind-Value=_large ></TelerikCheckBox>
    <label for="large">Large</label>
</div>


<TelerikRadialGauge Width=@(_large ? "500px" : "200px") Height=@(_large ? "500px" : "200px")>
    <RadialGaugePointers>
        <RadialGaugePointer Value="55" />
    </RadialGaugePointers>
</TelerikRadialGauge>

@code {
    bool _large;
}

Nothing happens with the gauge in the example above, I would expect it to be larger when ticking the checkbox.

If using F12 in the browser I can see that the outer element get the correct size, but not the inner svg...

1 comment
ADMIN
Dimo
Posted on: 28 Sep 2026 06:40

Hi Andreas,

Please use the CheckBox OnChange or ValueChanged event to call the Gauge Refresh() method after changing the component parameters programmatically. The same approach applies for all Charts.

The small delay is necessary to avoid a race condition related to CheckBox JSInterop logic which can cause the Gauge re-render to occur too early.

<label>
    <TelerikCheckBox @bind-Value="@Large" OnChange="@OnCheckBoxChange" />
    Large
</label>

<label>
    <TelerikCheckBox Value="@Large" ValueChanged="@LargeChanged" TValue="@bool" />
    Large
</label>

<TelerikRadialGauge @ref="@GaugeRef"
                    Width="@(Large ? "500px" : "200px")"
                    Height="@(Large ? "500px" : "200px")">
    <RadialGaugePointers>
        <RadialGaugePointer Value="55" />
    </RadialGaugePointers>
</TelerikRadialGauge>

@code {
    private bool Large { get; set; }
    private TelerikRadialGauge? GaugeRef;

    private async Task OnCheckBoxChange(object currentValue)
    {
        await Task.Delay(1);
        GaugeRef?.Refresh();
    }

    private async Task LargeChanged(bool newValue)
    {
        Large = newValue;
        await Task.Delay(1);
        GaugeRef?.Refresh();
    }
}

 

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category