New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

RadGauge with 'display: none' does not render properly

PROBLEM

Initially hidden gauge is not resized and rendered properly when shown on the page
 

DESCRIPTION

If you have a RadGauge with style="display: none;" set to its parent container, toggling its CSS attribute to display: block may result in gauge rendering with wrong dimensions.

This happens because the hidden container does not let the control evaluate its dimensions, size and render properly.

  

SOLUTION

In order to resolve the rendering issue call its repaint client-side method so the gauge will redraw itself:

<div id="testdiv" style="display: none;">
    <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Width="100px" Height="100px"></telerik:RadRadialGauge>
    <telerik:RadRadialGauge runat="server" ID="RadRadialGauge2" Width="100px" Height="100px"></telerik:RadRadialGauge>
</div>
<asp:Button Text="show me" ID="btn1" OnClientClick="showMe(); return false;" runat="server" />
<script>
    function showMe() {
        var div = $telerik.$(document.getElementById("testdiv"));
        div.show();
        div.find(".RadGauge").each(function (index, elem) {
            if (elem && elem.control && elem.control.repaint) {
               elem.control.repaint();
            }
        });
    }
</script>
In this article
Not finding the help you need? Improve this article