slider drag handle - not dragging

9 posts, 0 answers
  1. Erik
    Erik avatar
    43 posts
    Member since:
    Feb 2009

    Posted 06 Jul 2010 Link to this post

    **UPDATE** Doesn't seem to work when adding it into a MasterPage Content page in IE7 only in FireFox it works??
    I'm trying to get the RadSlider drag handle to move when clicking on it and dragging it horizontally either direction with no luck.  Using the side arrows or clicking on the slider bar will move the handle, but dragging the handle itself doesn't work.  Not sure what I'm missing here or if I'm supposed to implement some javascript here to allow for that functionality?


     

    <telerik:RadSlider ID="RadSlider0" runat="server" ItemType="None" MinimumValue="0" MaximumValue="100" SelectionEnd="100" Value="0" OnClientSlide="clientSlide()"

     

     

    ShowDragHandle="true" AnimationDuration="300" Height="20px" Width="106px" Skin="Telerik" OnClientValueChange="HandleValueChange">

     

     

    </telerik:RadSlider>

     

    RadSlider0.Value = (

    Int32)dr[3];

     

    RadSlider0txt.Visible =

    true;

     

    RadSlider0.Visible =

    true;

     

  2. kamini
    kamini avatar
    32 posts
    Member since:
    Jun 2010

    Posted 07 Jul 2010 Link to this post

    hello Erik

    try this

     

    OnClientValueChanged

     

    ="ScrollProducts" OnClientLoad="ScrollProducts"

    <script type="text/javascript">

     

    function ScrollProducts(sender, eventArgs)

    {

    var wrapperDiv = document.getElementById('boxes_wrapper');

    var contentDiv = document.getElementById('boxes_content');

    var availableWidth = contentDiv.scrollWidth - wrapperDiv.offsetWidth;


    var sliderSmallChange = sender.get_smallChange();

    var sliderMinValue = sender.get_minimumValue();

    var sliderValue = sender.get_value();


    var steps = sliderValue/sliderSmallChange;

    var stepLength = availableWidth / ((sender.get_maximumValue() - sliderMinValue) / sliderSmallChange);


    var newPosition = (-1) * steps * stepLength;

    contentDiv.style.left = ((sliderValue == sliderMinValue) ? 0 : newPosition) + "px";

    }
    </script>

    or
    go through this link of demo
    http://demos.telerik.com/aspnet-ajax/slider/examples/customscrollbar/defaultcs.aspx

    and if still it won't work thn let me have the code inside the functions "clientSlide()" and "HandleValueChange"
    that u have used for OnClientSlide and OnClientValueChange

     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Erik
    Erik avatar
    43 posts
    Member since:
    Feb 2009

    Posted 08 Jul 2010 Link to this post

    kamini,
    thanks for the response!
    ***I have this working in FireFox, but not IE7????  It doesn't even go into the OnClientSlideEnd function and narrowing the possibilities it does work when not in a content page, but with master page it fails??***
     My sliders are simply updating numeric values in a textbox and everything works fine, except when you try and drag the handle and change the values and nothing happens....it wont move left or right, but again...clicking on the slider bar works and clicking the slider arrows work, just not the slidehandle??????.  Is there something I need to set to say when the user moves the draghandle that I need to set the draghandle properties somewhere  (i.e dragHandle.value() = sender.get_value())?  I'd imagine this is something that should be built into the control and moved based on my set min/max values, but this doesn't seem to be the case.  Everything about the control works except this.....

    My clientSlide function has nothing in it because I'm not sure what to put in there or if it's even needed and all my updating of the numeric values in my associated textboxes happen in the OnClientValueChange which doesn't involve the slider control per say.
    Interestingly, adding in OnClientSlideStart="OnClientSlideStart" and OnClientSlideEnd="OnClientSlideEnd" result in nothing happening either...which I'm guessing since I cannot drag the handle it never enters these functions!
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 13 Jul 2010 Link to this post

    Hi Erik,
    There is a problem in the original code that you posted that prevents the dragHandle from moving as expected:
    <telerik:RadSlider ID="RadSlider0" runat="server" ItemType="None" MinimumValue="0"
        MaximumValue="100" SelectionEnd="100" Value="0" OnClientSlide="clientSlide()"
        ShowDragHandle="true" AnimationDuration="300" Height="20px" Width="106px" Skin="Telerik"
        OnClientValueChange="HandleValueChange">
    </telerik:RadSlider>

    You should set the OnClientSlide property to the name of the client-side function, that is, you should remove the brackets:
    <telerik:RadSlider ID="RadSlider0" runat="server" ItemType="None" MinimumValue="0"
        MaximumValue="100" SelectionEnd="100" Value="0" OnClientSlide="clientSlide"
        ShowDragHandle="true" AnimationDuration="300" Height="20px" Width="106px" Skin="Telerik"
        OnClientValueChange="HandleValueChange">
    </telerik:RadSlider>

    In case this does not fix the problem, please open a new support ticket and send me a running test project that demonstrates the problem.

    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
  6. Erik
    Erik avatar
    43 posts
    Member since:
    Feb 2009

    Posted 13 Jul 2010 Link to this post

    thx, for the response......the onclientslide issue you are correct, it was my futile attempt to get the javascript function to be called and was really just the issue of what I found below:

    The problem I've discovered is being caused by CSS styling attributes and it seems that the Telerik slider control "drag handle" will not work in IE7 if you have the following in your css.  Note this WILL work in firefox just not IE7 and I have not tested IE6 or IE8 versions.

    <style type="text/css">
        a:hover
        {
            cursor:pointer !important;
        }
    </style>

    I hope this helps someone save a lot of hours and frustration.
  7. Paul Desormeaux
    Paul Desormeaux avatar
    11 posts
    Member since:
    Jun 2010

    Posted 02 Oct 2010 Link to this post

    I'm having the same kind of issue: a slider connected to two numeric text-boxes, mutually updatable.
    The code below works fine in IE. In FireFox & Chrome, the slider does not slide.
    If I remove slider event OnClientValueChanged="HandleValueChanged_ListPrice", then the slider works
    but the text-boxes are not updated.

    Help would be appreciated here.

    Paul
    --------------------------------------------------------------------------------------------------

                            <telerik:RadSlider
                                ID="RadSlider_ListPrice"
                                runat="server"
                                Height="22px"
                                IsSelectionRangeEnabled="True"
                                SelectionEnd="1000000000"
                                Skin="Outlook"
                                Width="170px"
                                MaximumValue="1000000000"
                                ShowDecreaseHandle="False"
                                ShowIncreaseHandle="False"
                                SmallChange="0"
                                Length="170"
                                SlideStep="0"
                                DragText="Set List Price range."
                                Font-Names="Arial"
                                Font-Size="8pt"
                                ItemType="Item"
                                OnClientValueChanged="HandleValueChanged_ListPrice"
                                OnClientSlideStart="OnClientSlideStart_ListPrice"
                                OnClientSlideEnd="OnClientSlideEnd_ListPrice"

                                ToolTip="Specify List Price range.">
                            </telerik:RadSlider>

                            <telerik:RadNumericTextBox
                                ID="RadNumericTextBox_ListPriceLow"
                                Runat="server"
                                Culture="English (United States)"
                                EmptyMessage="Please enter a minimum List Price here."
                                MaxValue="100000000"
                                MinValue="0"
                                ShowSpinButtons="True"
                                Skin="Outlook"
                                Type="Currency"
                                Value="0"
                                Width="95px"
                                DataType="System.UInt64"
                                Font-Names="Arial"
                                Font-Size="8pt"
                                InvalidStyleDuration="300"
                                ToolTip="Minimum List Price."
                                MaxLength="12"
                            >
                                <ClientEvents
                                    OnBlur="HandleOnBlur_ListPriceLow"
                                    OnButtonClick="HandleOnButtonClick_ListPriceLow"
                                />
                            </telerik:RadNumericTextBox>
                        </td>
                        <td style="text-align: left">
                            <telerik:RadNumericTextBox
                                ID="RadNumericTextBox_ListPriceHigh"
                                Runat="server"
                                Culture="English (United States)"
                                DataType="System.UInt64"
                                EmptyMessage="Please enter a maximum List Price here."
                                Font-Names="Arial"
                                Font-Size="7pt"
                                InvalidStyleDuration="300"
                                MaxValue="100000000"
                                MinValue="50000"
                                ShowSpinButtons="True"
                                Skin="Outlook"
                                ToolTip="Maximum List Price [$100,000,000 = Unlimited]."
                                Type="Currency"
                                Value="100000000"
                                Width="95px"
                                MaxLength="12"
                             >
                                <ClientEvents
                                    OnBlur="HandleOnBlur_ListPriceHigh"
                                    OnButtonClick="HandleOnButtonClick_ListPriceHigh"
                                />
                            </telerik:RadNumericTextBox>

    <script type="text/javascript">

        var In_HandleOnBlur_ListPriceLow_Or_High = false;
        var RadSlider_ListPrice_Sliding = false; // state of slider


        function HandleValueChanged_ListPrice(sender,eventArgs)
            {
            if ( ! RadSlider_ListPrice_Sliding ) // wait until ListPriceSlider slide has ended!
                {
                if ( ! In_HandleOnBlur_ListPriceLow_Or_High )
                    {
                    var items = sender.get_items();

                    var inx_low = sender.get_selectionStart();
                    var value_low = items[ inx_low ].get_value();
                    var list_price_low = $find( 'RadNumericTextBox_ListPriceLow' );
                    list_price_low.set_value( value_low );

                    var inx_high = sender.get_selectionEnd();
                    var value_high = items[ inx_high ].get_value();
                    var list_price_high = $find( 'RadNumericTextBox_ListPriceHigh' );
                    list_price_high.set_value( value_high );
                    }
                else
                    In_HandleOnBlur_ListPriceLow_Or_High = false;
                }
            }
           
        function OnClientSlideStart_ListPrice( sender, eventArgs )
            {
            RadSlider_ListPrice_Sliding = true;
            }

        function OnClientSlideEnd_ListPrice(sender,eventArgs)
            {
            RadSlider_ListPrice_Sliding = false;

             // this event fired before ValueChanged event -so set the Min & Max ListPrice values here
             // to make sure the AJAX callback to server is executed!

            var items = sender.get_items();

            var inx_low = sender.get_selectionStart();
            var value_low = items[ inx_low ].get_value();
            var list_price_low = $find( 'RadNumericTextBox_ListPriceLow' );
            list_price_low.set_value( value_low );

            var inx_high = sender.get_selectionEnd();
            var value_high = items[ inx_high ].get_value();
            var list_price_high = $find( 'RadNumericTextBox_ListPriceHigh' );
            list_price_high.set_value( value_high );
            }

    </script>
    -----------------------------------------------------------------------------------------------------------------------
  8. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 04 Oct 2010 Link to this post

    Hello Paul Desormeaux,
    There are several problems in the code that you have posted, all of which prevent the client-side code of RadSlider from working. Basically, as there is a JS error on your page, the slider cannot initialize correctly.

    The first error that I get is the following:
    Error: Sys.ArgumentOutOfRangeException: SmallChange should be decimal bigger than 0
    Parameter name: value
    Actual value was 0.

    This error is a result of the fact that you have tried to set the SmallChange/SlideStep properties of the slider to "0". Please set these properties to a value, bigger than 0.

    Then, when I changed the value of the properties to 1, I got four errors that the following functions are not defined:
    <ClientEvents OnBlur="HandleOnBlur_ListPriceLow" OnButtonClick="HandleOnButtonClick_ListPriceLow" />

    <ClientEvents OnBlur="HandleOnBlur_ListPriceHigh" OnButtonClick="HandleOnButtonClick_ListPriceHigh" />

    As soon as I added these functions to the page, the page opened without a JS error. However, when I tried to move the dragHandle of the slider, I got another JS error:
    Error: 'undefined' is null or not an object

    The error was raised in your code as there are no items in the Items collection of the slider:
    var value_low = items[inx_low].get_value();

    As soon as I added a few items to the Items collection of the slider, the page opened without a JS error and I was able to move both dragHandles in IE and FF. I have attached my test page for your reference.

    In case this information does not help you fix the problem, please open a formal support ticket and send me a running test project that demonstrates the problem.

    Kind regards,
    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
  9. Paul Desormeaux
    Paul Desormeaux avatar
    11 posts
    Member since:
    Jun 2010

    Posted 23 Feb 2011 Link to this post

    Hi.

    Thank you for that reply.

    I just discovered why the RadSlider drag handle was not dragging (moving) under FF (Firefox) & Chrome browsers, so thought it could be useful to the community.

    My HandleValueChanged_ListPrice() handler function had a document control reference error of some kind when executing in FF or Chrome environments (note: it works OK in IE) and was generating a runtime exception. I placed try {] catch {} (gotta use more of those...) around the code and now handle the situation appropriately.

    So, take note, if there is an error in a slider event handler, the handles don't move.

    Hope this helps someone...

    Paul
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 24 Feb 2011 Link to this post

    Hello Paul,

    What you report is possible to happen no matter the js error is throws in the handler or not. Generally, when a js error is thrown, this causes unexpected behavior and most often prevents any other javascript from execution. Since RadControls are mostly javascript this causes e.g the slider handle not to drag (this is done through javascript in the source code), the RadWindow will not open. etc. This being said, you should always make sure that you do not have javascript errors, no matter you use RadControls or not, especially when your page relies on javascript.

    Regards,

    Svetlina
    the Telerik team

     

    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017