tooltip w/ RadSlider - how to show on page load

2 posts, 0 answers
  1. Vipul
    Vipul avatar
    4 posts
    Member since:
    Mar 2011

    Posted 19 Aug 2011 Link to this post

    Hello,

    We have a slider bound to the RadSlider similar to the demo on http://demos.telerik.com/aspnet-ajax/slider/examples/rangeslider/defaultcs.aspx. sorry project is  on or dev platform which is not accessible.

    the difference is at each step in the slider we are passing in content to populate the tool tip that will lead the user to a different page. The issue we have is we need to the tool tip to appear on page load and be bound to the rsHandle. All effeorts have made the tool tip appear but it shows cenetered on the page rather than above the slider handle.

    here is the code we have

    <telerik:RadToolTip EnableShadow="false" BorderStyle="Solid" BorderWidth="10" OffsetY="5"
                HideDelay="1" ID="RadToolTip1" runat="server" RelativeTo="Element" Position="TopCenter"
                ShowCallout="true" Width="425px" ShowEvent="fromcode" HideEvent="FromCode"
                EnableEmbeddedSkins="false" Skin="SLIDER">
            </telerik:RadToolTip>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

                <script type="text/javascript">
                    function OnClientLoad() {
                        ShowRadToolTip(tooltip, sender);
                    }
                    function OnClientValueChange(sender, args) {
                        if (!isSliding) return;
                        var tooltip = $find("<%= RadToolTip1.ClientID %>");
                        ResetToolTipLocation(tooltip);
                        tooltip.set_text(GetItemValue());
                    }

                    function OnClientValueChanged(sender, args) {
                        var tooltip = $find("<%= RadToolTip1.ClientID %>");
                        ShowRadToolTip(tooltip, sender);
                        tooltip.set_text(GetItemValue());
                    }

                    var isSliding = false;
                    function OnClientSlideStart(sender, args) {
                        isSliding = true;

                        var tooltip = $find("<%= RadToolTip1.ClientID %>");
                        ShowRadToolTip(tooltip, sender);
                    }

                    function OnClientSlideEnd(sender, args) {
                        isSliding = false;
                        var tooltip = $find("<%= RadToolTip1.ClientID %>");
                        ShowRadToolTip(tooltip, sender);
                    }

                    function ShowRadToolTip(tooltip, slider) {
                        var activeHandle = slider.get_activeHandle();
                        if (!activeHandle) return;
                        tooltip.set_targetControl(activeHandle);
                        ResetToolTipLocation(tooltip);
                    }

                    function ResetToolTipLocation(tooltip) {
                        if (!tooltip.isVisible())
                            tooltip.show();
                        else
                            tooltip.updateLocation();
                    }
                    function GetItemValue() {
                        return $find('<%= InvestmentsSlider.ClientID %>').get_items()[$find('<%= InvestmentsSlider.ClientID %>').get_value()].get_value();
                    }
                </script>
            </telerik:RadCodeBlock>
            <telerik:RadSlider runat="server" ID="InvestmentsSlider" Height="200px"
                style="margin: auto;" IsSelectionRangeEnabled="false" OnClientSlide="OnClientValueChange" OnClientLoad="OnClientValueChanged"
                OnClientValueChanged="OnClientValueChanged" OnClientSlideStart="OnClientSlideStart"
                OnClientSlideEnd="OnClientSlideEnd" ShowDecreaseHandle="true" ShowIncreaseHandle="true"
                ItemType="Item" />
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 22 Aug 2011 Link to this post

    Hello Vipul,

    You can find my answer for the particular problem in the support ticket that you have sent. Could you please use only one ticket, concerning a particular issue, for future requests. This way it will be much easier to track the correspondence and to provide a well-timed responses to your questions. When a solution to the problem is found, you may post it here as well, so that the community can benefit from it.

    My suggestion is to continue our conversation in your other ticket.

    All the best,
    Slav
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top