disable dragtext in customize slider

8 posts, 0 answers
  1. kamini
    kamini avatar
    32 posts
    Member since:
    Jun 2010

    Posted 26 Jun 2010 Link to this post

    hello

    i have made customize slider by setting properties of RadSlider as

    EnableEmbeddedSkins

     

    ="false"
    EnableEmbeddedBaseStylesheet="false" 
    and set a customize skin.
    everything is working properly but i am not able to make dragtext disable.
    dragtext appears along with drag image.

    if anyone has a solution. please let me know..

    thanks
    kamini

     

     

     

     

     

     

     

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 28 Jun 2010 Link to this post

    Hello kamini,
    You can remove the tooltip for the dragHandle of RadSlider by setting the DragText of the control to an empty string. For example:
    <telerik:RadSlider ID="RadSlider1" runat="server" DragText=""></telerik:RadSlider>

    All the best,
    Tsvetie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. kamini
    kamini avatar
    32 posts
    Member since:
    Jun 2010

    Posted 29 Jun 2010 Link to this post

    Hello

    i have already tried it but there is another problem by doing so. i have provided the height and width of dragimage in customize skin stylesheet, but dragimage get invisible by making DragText empty.

    Thank you
    Kamini
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 29 Jun 2010 Link to this post

    Hi Kamini,
    The DragText property only sets or not the title of the A element that represents the thumb of the slider control. It does not influence the appearance of the thumb. That is why, I suppose that there is a problem in your custom skin. Please make sure that you have specified the correct background-position for all states of the thumb:

    .RadSlider .rslHorizontal a.rslDraghandle
    .RadSlider .rslHorizontal a.rslDraghandle:hover
    .RadSlider .rslHorizontal a.rslDraghandle:focus,
    .RadSlider .rslHorizontal a.rslDraghandle:active

    In case you need additional help with your custom skin, please open a new support ticket and send me a running test project that demonstrates the problem you have.

    All the best,
    Tsvetie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. kamini
    kamini avatar
    32 posts
    Member since:
    Jun 2010

    Posted 03 Jul 2010 Link to this post

    hello

    i am still not getting that what exactly i have to do.. so i am sending the custome skin css codeand the aspx code

    Default.aspx  
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SlederExmp._Default" %>  
     
    <%@ 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>  
        <link href="MySkin/Slider.MySkin.css" rel="Stylesheet" type="text/css" />  
         
       <style type="text/css">   
        
        .Content_Wrapper,.Boxes_Wrapper  
        {  
            overflow:hidden;  
            position:relative;  
            /* set width ! */ 
        }  
        .Content,.Boxes_Content  
        {  
            position:absolute;  
            top:0;  
            left:0;  
        }  
          
        .Lorem{position:relative;width:522px;height:324px;background:url(Images/Content_back.png) 0 0 repeat-y; margin-left:76px;}  
        .Lorem .Content_Wrapper{width:457px;height:185px;top:80px;left:28px;}  
        .Lorem .RadSlider{position:absolute;top:63px;right:14px}  
        .Lorem .Content h2{font:30px/40px georgia,serif;color:#ffffff;margin:0 0 0.4em;padding:0}  
        .Lorem .Content{font:12px/18px arial,sans-serif; color:#ffffff}  
          
          
        </style>  
    </head>  
    <body>  
    <%--<script src="Scripts/Slider/RadSliderScripts.js" type="text/javascript"></script>  
    --%><script type="text/javascript">  
        function OnClientBeforeValueChange(sender, args)     
        {     
            // In order for the dragHandle of the slider to never leave the track,      
            // the values from -1 to -10 and from 101 and 110 are not valid values.     
              
            var newValue = args.get_newValue();     
            if(newValue < 0)     
            {     
                args.set_cancel(true);     
                sender.set_value(0);     
            }     
            else if(newValue > 100)     
            {     
                args.set_cancel(true);     
                sender.set_value(100);     
            }     
        }     
     
        function ScrollText(sender, eventArgs)  
        {  
            sender.set_dragText(sender.get_value());  
          
            var wrapperDiv = document.getElementById('content_wrapper');  
            var contentDiv = document.getElementById('content');   
            var availableHeight = contentDiv.scrollHeight - wrapperDiv.offsetHeight;   
                     
            var sliderSmallChange = sender.get_smallChange();  
            var sliderMinValue = sender.get_minimumValue();  
            var sliderValue = sender.get_value();  
              
            var steps = sliderValue / sliderSmallChange;  
            var stepLength = availableHeight / ((sender.get_maximumValue() - sliderMinValue) / sliderSmallChange);  
              
            var newPosition = (-1) * steps * stepLength;      
            contentDiv.style.top = ((sliderValue == sliderMinValue) ? 0 : newPosition) + "px";  
        }  
          
        </script>  
        <form id="Form1" method="post" runat="server">  
            <asp:ScriptManager ID="ScriptManager" runat="server">  
            </asp:ScriptManager>  
              
            <div class="Lorem">  
                <div id="content_wrapper" class="Content_Wrapper">  
                    <div id="content" class="Content">  
                        <h2>  
                            Lorem Ipsum Dolor Sit Amet</h2>  
                        <p>  
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ac mi. Suspendisse  
                            laoreet faucibus nibh. Quisque justo. Mauris pharetra magna ut felis. Nullam rhoncus  
                            pulvinar risus. Sed turpis dui, consequat ut, molestie vel, congue vel, mi. Nunc  
                            luctus venenatis ipsum. Nulla non mauris ut lorem aliquam tincidunt. Phasellus tincidunt  
                            augue at orci.</p>  
                        <p>  
                            Phasellus eu sapien et dolor pharetra aliquam. Praesent tellus. In nonummy, nibh  
                            quis tincidunt varius, sem pede vehicula neque, eget dapibus augue odio non dolor.  
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla egestas, nisl id  
                            blandit hendrerit, erat dui ullamcorper leo, nec aliquet sem ligula in nulla. Pellentesque  
                            tristique. Suspendisse sagittis. Nam in augue. Praesent iaculis justo non dolor.  
                            Aenean quis lacus. Nam facilisis mauris in tellus. Pellentesque vitae diam in massa  
                            commodo tincidunt. Integer molestie elit rutrum nunc. Suspendisse velit orci, suscipit  
                            eget, sagittis at, pellentesque feugiat, erat. Nulla sit amet orci a tellus varius  
                            malesuada. Nunc adipiscing vehicula leo. Donec condimentum libero volutpat orci.  
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pulvinar.  
                            Sed lectus. Aliquam in felis ut nisi malesuada interdum.</p>  
                    </div>  
                </div>  
                  
                    <telerik:RadSlider ID="RadSlider1" runat="server" SmallChange="1" Height="200" Value="0"   
                    Orientation="Vertical" OnClientValueChanged="ScrollText" OnClientLoad="ScrollText" OnClientBeforeValueChange="OnClientBeforeValueChange" 
                    Skin="MySkin" ShowDecreaseHandle="false" ShowIncreaseHandle="false" EnableEmbeddedSkins="false"  EnableEmbeddedBaseStylesheet="false" />  
            </div>  
        </form>  
    </body>  
    </html>  
     

    Slider.MySkin.css
    /* RadSlider for ASP.NET AJAX WebBlue Skin */ 
    .RadSlider_MySkin .rslHorizontal a.rslHandle  
    {  
        background-image:url('Slider/Slider/Handles.gif');  
    }  
     
    .RadSlider_MySkin .rslHorizontal a.rslDraghandle  
    {  
        background-image:url('Slider/DragHandle.gif');  
    }  
     
    .RadSlider_MySkin .rslHorizontal .rslTrack  
    {     
        background:url('Slider/TrackBgr.gif'repeat-x;  
    }  
     
    .RadSlider_MySkin .rslHorizontal .rslSelectedregion  
    {  
        background:url('Slider/SelectedRegionHorizontalBgr.gif'rightright top no-repeat;  
    }  
     
    /* vertical slider */ 
    .RadSlider_MySkin .rslVertical a.rslHandle  
    {  
        background-image:url('Slider/HandlesVertical.gif');  
    }  
     
    .RadSlider_MySkin .rslVertical .rslTrack  
    {  
        background:url('Slider/slider_line.png'repeat-y;  
        width:22px;  
    }  
     
    .RadSlider_MySkin .rslVertical .rslSelectedregion  
    {  
        background:url('Slider/slider_line.png'left bottombottom no-repeat;  
    }  
     
    .RadSlider_MySkin .rslVertical a.rslDraghandle  
    {  
        background:url('Slider/Slider_drag.png'no-repeat 1px;  
        width:22px;  
        height:38px;  
    }  
     
    .RadSlider_MySkin .rslVertical a.rslDraghandle:hover  
    {  
        background-position:1px;  
    }  
     
    .RadSlider_MySkin .rslVertical a.rslDraghandle:focus  
    {  
        background-position:1px;  
    }  
     
    .RadSlider_MySkin .rslVertical a.rslDraghandle:active  
    {  
        background-position:1px;  
    }  
     
    .RadSlider_MySkin .rslItem,  
    .RadSlider_MySkin .rslLargeTick span  
    {  
        color:#333;  
    }  
     
    .RadSlider_MySkin .rslItemsWrapper .rslItemSelected  
    {  
        color:#000;  
        top:38px !important;   
    }  
     
    /* horizontal slider items */ 
    .RadSlider_MySkin .rslHorizontal .rslItem  
    {  
        background-image:url('Slider/ItemHorizontalBgr.gif');  
    }  
     
    /* vertical slider items */ 
    .RadSlider_MySkin .rslVertical .rslItem  
    {  
        background-image:url('Slider/ItemVerticalBgr.gif');  
    }  
     
    /* horizontal slider - TrackPosition=Top/Bottom */ 
    .RadSlider_MySkin .rslTop .rslSmallTick,  
    .RadSlider_MySkin .rslBottom .rslSmallTick  
    {  
        background-image:url('Slider/SmallChangeHorizontal.gif');  
    }  
     
    .RadSlider_MySkin .rslTop .rslLargeTick,  
    .RadSlider_MySkin .rslBottom .rslLargeTick  
    {  
        background-image:url('Slider/LargeChangeHorizontal.gif');  
    }  
     
    /* vertical slider - TrackPosition=Left/Right */ 
    .RadSlider_MySkin .rslLeft .rslSmallTick,  
    .RadSlider_MySkin .rslRight .rslSmallTick  
    {  
        background-image:url('Slider/SmallChangeVertical.gif');  
    }  
     
    .RadSlider_MySkin .rslLeft .rslLargeTick,  
    .RadSlider_MySkin .rslRight .rslLargeTick   
    {  
        background-image:url('Slider/LargelChangeVertical.gif');  
    }  
     
    /* horizontal slider - TrackPosition=Center */ 
    .RadSlider_MySkin .rslMiddle .rslSmallTick  
    {  
        background-image:url('Slider/SmallChangeMiddleHorizontal.gif');  
    }  
     
    .RadSlider_MySkin .rslMiddle .rslLargeTick    
    {  
        background-image:url('Slider/LargeChangeMiddleHorizontal.gif');  
    }  
     
    /* vertical slider - TrackPosition=Center */ 
    .RadSlider_MySkin .rslCenter .rslSmallTick  
    {  
        background-image:url('Slider/SmallChangeCenterVertical.gif');  
    }  
     
    .RadSlider_MySkin .rslCenter .rslLargeTick   
    {  
        background-image:url('Slider/LargelChangeCenterVertical.gif');  

    here, i have used two images that are slider_line.png and slider_drag.png instead of TrackVerticalBgr.gif and DragVerticalHandle.gif respectively

    Thank you
    kamini
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 07 Jul 2010 Link to this post

    Hi Kamini,
    The reason why you get a tooltip for the drag handle (the thumb) is because you set the dragText property with JavaScript:
    function ScrollText(sender,eventArgs)
    {
        sender.set_dragText(sender.get_value());
     
        var wrapperDiv = document.getElementById('content_wrapper');
        var contentDiv = document.getElementById('content');
        var availableHeight = contentDiv.scrollHeight - wrapperDiv.offsetHeight;
     
        var sliderSmallChange = sender.get_smallChange();
        var sliderMinValue = sender.get_minimumValue();
        var sliderValue = sender.get_value();
     
        var steps = sliderValue / sliderSmallChange;
        var stepLength = availableHeight / ((sender.get_maximumValue() - sliderMinValue) / sliderSmallChange);
     
        var newPosition = (-1) * steps * stepLength;
        contentDiv.style.top = ((sliderValue == sliderMinValue) ? 0 : newPosition) + "px";
    }

    In case you do not want a tooltip for the drag handle, please set the dragText property of the slider control to an empty string. For example:
    <telerik:RadSlider ID="RadSlider1" runat="server" DragText="" SmallChange="1" Height="200" Value="0"
        Orientation="Vertical" OnClientValueChanged="ScrollText" OnClientLoad="ScrollText"
        OnClientBeforeValueChange="OnClientBeforeValueChange" ShowDecreaseHandle="false"
        ShowIncreaseHandle="false" />


    function ScrollText(sender,eventArgs)
    {
        var wrapperDiv = document.getElementById('content_wrapper');
        var contentDiv = document.getElementById('content');
        var availableHeight = contentDiv.scrollHeight - wrapperDiv.offsetHeight;
     
        var sliderSmallChange = sender.get_smallChange();
        var sliderMinValue = sender.get_minimumValue();
        var sliderValue = sender.get_value();
     
        var steps = sliderValue / sliderSmallChange;
        var stepLength = availableHeight / ((sender.get_maximumValue() - sliderMinValue) / sliderSmallChange);
     
        var newPosition = (-1) * steps * stepLength;
        contentDiv.style.top = ((sliderValue == sliderMinValue) ? 0 : newPosition) + "px";
    }


    Greetings,
    Tsvetie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. kamini
    kamini avatar
    32 posts
    Member since:
    Jun 2010

    Posted 08 Jul 2010 Link to this post

    Hello

    i have tried your suggetion but it cause another problem that is the drag handle doesn't appear. it is working fine with default skin but not with customize skin. i have tried 1 more thing is i remove EnableEmbeddedBaseStylesheet="false" and keep only EnableEmbeddedSkins="false" then the result i get is drag handle moves properly but this time the image of track get disappear and also the image of drag handle appears properly only on 'hover' otherwise it appears half of its size.

    i think i have to make some changes in my customize skin css

    thank you
  9. kamini
    kamini avatar
    32 posts
    Member since:
    Jun 2010

    Posted 08 Jul 2010 Link to this post

    Hello

    i got the solution. i set EnableEmbeddedBaseStylesheet="false" but i didn't apply base stylesheet and thats why i was having all that problems. but now it is solved.

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