Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

disable dragtext in customize slider

7 Answers 175 Views
Slider
This is a migrated thread and some comments may be shown as answers.
kamini
Top achievements
Rank 1
kamini asked on 26 Jun 2010, 09:31 AM
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

 

 

 

 

 

 

 

7 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 28 Jun 2010, 06:29 PM
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
0
kamini
Top achievements
Rank 1
answered on 29 Jun 2010, 05:35 AM
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
0
Tsvetie
Telerik team
answered on 29 Jun 2010, 11:15 AM
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
0
kamini
Top achievements
Rank 1
answered on 03 Jul 2010, 11:23 AM
img-sol-expl.gif
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
0
Tsvetie
Telerik team
answered on 07 Jul 2010, 10:28 PM
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
0
kamini
Top achievements
Rank 1
answered on 08 Jul 2010, 06:49 AM
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
0
kamini
Top achievements
Rank 1
answered on 08 Jul 2010, 09:06 AM
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
Tags
Slider
Asked by
kamini
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
kamini
Top achievements
Rank 1
Share this question
or