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" />
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" />