Posted
on Aug 19, 2011
(permalink)
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" />