Slider Tooltips change on slide?

4 posts, 0 answers
  1. y0mbo
    y0mbo avatar
    5 posts
    Member since:
    Aug 2008

    Posted 04 Aug 2008 Link to this post

    I was wondering if there is a sample (or if it's even possible) to change the tooltip values to a string value corresponding to the slide stops. 

    For example, if my slider represents Good, Neutral, and Bad, can the tooltips display "Good" when the handle is dragged to the first position and "Bad" when in the last position?
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 04 Aug 2008 Link to this post

    Hi John,
    Please have a look at this online example - you can use the way we have implemented the RadToolTip and RadSlider as a base to achieve the desired result. Let us know in case you need additional help with that.

    Regards,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. y0mbo
    y0mbo avatar
    5 posts
    Member since:
    Aug 2008

    Posted 08 Aug 2008 Link to this post

    That is similar to what I am looking for.

    Any suggestions on how to get this to work with sliders inside of a radGrid?
  5. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 08 Aug 2008 Link to this post

    I created a simple example with RadSlider in RadGrid. When you slide the RadSlider it shows a tooltip.
    ASPX:
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <div> 
        <telerik:RadToolTip ID="RadToolTip1" runat="server" OffsetY="3" Position="TopCenter" 
                ShowCallout="false" Height="20px" Skin="Telerik" ShowEvent="fromcode">  
            </telerik:RadToolTip> 
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
     
                <script type="text/javascript">  
                function OnClientValueChange(sender, args)  
                {   
                    var tooltip = $find("<%= RadToolTip1.ClientID %>");   
                      
                    if (!tooltip.isVisible())  
                    {  
                        var activeHandle = sender.get_activeHandle();   
                        if(!activeHandle) return;   
                                 
                        tooltip.set_targetControl(activeHandle);  
                        tooltip.show();   
                    }  
                    else  
                    {  
                        tooltip.updateLocation();  
                    }  
                      
                    tooltip.set_text(args.get_newValue());  
                }  
                  
                function OnClientSlideStart(sender, args)  
                {  
                    var tooltip = $find("<%= RadToolTip1.ClientID %>");  
                    tooltip.hide();   
                }  
                </script> 
     
            </telerik:RadCodeBlock> 
     
        <telerik:RadGrid ID="RadGrid1" runat="server">  
            <MasterTableView> 
                <Columns> 
                    <telerik:GridTemplateColumn> 
                        <ItemTemplate> 
                            <telerik:RadSlider ID="RadSlider1" runat="server"   
                            MinimumValue="0" MaximumValue="300" SlideStep="1" Value="200" 
                            OnClientValueChange="OnClientValueChange" 
                            OnClientSlideStart="OnClientSlideStart" 
                            /> 
                        </ItemTemplate> 
                    </telerik:GridTemplateColumn> 
                </Columns> 
            </MasterTableView> 
        </telerik:RadGrid> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    C#:
     protected string[] data= {"a","b","c"};  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            RadGrid1.DataSource = data;  
            RadGrid1.DataBind();  
        } 


    Hope this helps!
Back to Top