This is a migrated thread and some comments may be shown as answers.

RadGauge horizontal alignment

2 Answers 47 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
Gustavo
Top achievements
Rank 1
Gustavo asked on 28 Aug 2013, 12:13 PM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 29 Aug 2013, 12:28 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Gustavo
Top achievements
Rank 1
answered on 30 Aug 2013, 07:24 PM
Thanks for the reply Marin!
Tags
Gauge
Asked by
Gustavo
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Gustavo
Top achievements
Rank 1
Share this question
or