RadRadialGauge Text in between at exactly where the needle starts

Thread is closed for posting
3 posts, 0 answers
  1. Rahul
    Rahul avatar
    8 posts
    Member since:
    May 2012

    Posted 16 Jan 2013 Link to this post

    Hi,

    I am using RadRadialGauge in my application I wanted to add text at the point where the needle starts  or below the needle.

    Please let me know how I can do this.

    Thanks,
  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 17 Jan 2013 Link to this post

    Hi Rahul,

    As of now, the RadialGauge does not have the functionality to add labels or titles on the gauge. You could easily add a text box directly under the gauge displaying what you want, but it would not be possible to do on top of the gauge.

    Good luck,
    Bart
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rahul
    Rahul avatar
    8 posts
    Member since:
    May 2012

    Posted 18 Jan 2013 Link to this post

    Hi,

    I have resolved the issue by adding a label in the div and setting the z-index of gauge and label

    <div class="gaugeHolderDiv" runat="server">
                                                            <div class="gaugeAlignment">
                                                                <div>
                                                                    <telerik:RadRadialGauge runat="server" SkinID="GaugeSkin" ID="RadGaugeWithLabel" >                                                    
                                                                    </telerik:RadRadialGauge>
                                                                </div>
                                                                <div class="gaugeReading">
                                                                    <asp:Label ID="lblGaugeValue" runat="server"></asp:Label>
                                                                </div>
                                                                
                                                            </div>
                                                        </div>

    CSS :-


    .gaugeHolderDiv
    {
        height: 130px;
        width: 150px;
        position: relative;
        float: left;
    }

    .gaugeAlignment
    {
        text-align:center;
        margin-left: 10px;
    }

    .gaugeReading
    {
        width: 57px;
        height: 20px;
        position: absolute;
        top: 95px;
        left: 47px;
        text-align: center;
    }

    Thanks,
Back to Top