RadGauge horizontal alignment

[Gustavo]

Hi,

I have a RadRadialGauge inside a Panel and I want to know how can I set the horizontal alignment of the gauge.
I already tried to add a Style to the Panel e.g.( panel1.Style.Add(HtmlTextWriterStyle.TextAlign, "Left"); ) and this works for several telerik's controls. But don't works for RadGauges.

Anyone know how can I do that?

Thanks

[Marin Bratanov]

Hello Gustavo,

You can wrap the gauges in divs that you can control as you desire. Note that they are rendered with markup (svg or vml) and thus they may inherit the text-align (or other css properties).

Here is a simple example of gauges put to the left of a div:

<asp:Panel ID="Panel1" runat="server" Width="800px">
    <div class="gaugeHolder">
        <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Height="350px" Width="350px"
            Style="text-align: left;">
            <Pointer Value="220" Color="Black">
                <Cap Color="Gray" Size="0.1" />
            </Pointer>
            <Scale Min="120" Max="300" MajorUnit="30" MinorUnit="5">
                <Labels Format="{0} °C" Position="Outside" />
                <Ranges>
                    <telerik:GaugeRange Color="Orange" From="150" To="190" />
                    <telerik:GaugeRange Color="Green" From="190" To="230" />
                    <telerik:GaugeRange Color="Red" From="230" To="300" />
                </Ranges>
            </Scale>
        </telerik:RadRadialGauge>
    </div>
    <div class="gaugeHolder">
        <telerik:RadRadialGauge runat="server" ID="RadRadialGauge2" Height="350px" Width="350px"
            Style="text-align: left;">
            <Pointer Value="120" Color="Black">
                <Cap Color="Gray" Size="0.1" />
            </Pointer>
            <Scale Min="120" Max="300" MajorUnit="30" MinorUnit="5">
                <Labels Format="{0} °C" Position="Outside" />
                <Ranges>
                    <telerik:GaugeRange Color="Orange" From="150" To="190" />
                    <telerik:GaugeRange Color="Green" From="190" To="230" />
                    <telerik:GaugeRange Color="Red" From="230" To="300" />
                </Ranges>
            </Scale>
        </telerik:RadRadialGauge>
    </div>
    <div class="clearDiv"></div>
</asp:Panel>

and some simple CSS

.gaugeHolder
{
    width: 350px;
    height: 350px;
    border: 1px solid red;
    float: left;
}

.clearDiv
{
    clear: both;
}

Regards,
Marin Bratanov
Telerik

[Gustavo]

Thanks for the reply Marin!