RadGauge horizontal alignment

3 posts, 1 answers
  1. Gustavo
    Gustavo avatar
    23 posts
    Member since:
    Apr 2012

    Posted 28 Aug 2013 Link to this post

    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. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 29 Aug 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gustavo
    Gustavo avatar
    23 posts
    Member since:
    Apr 2012

    Posted 30 Aug 2013 Link to this post

    Thanks for the reply Marin!
Back to Top