Slider w/ Tooltip - how to keep tool tip on handle when clicking other slider elements

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 if the user clicks on ether the rsTrack or the increase/descrease handles, the tool tip appears in different heights at different steps.

    How can we keep it so the tool tip is always bound to the rshandle.

    here is the code we are using

    <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

    Hi Vipul,

    I have provided an answer to your request in the support ticket that you have sent, as the described problems are connected.

    When submitting a support ticket in the future, please send only one, concerning a particular issue. My suggestion is to continue our conversation in your other ticket. 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.
     
    Kind regards,
    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