Scroll while dragging

Posted by Famke Bergmans on 02-Mar-2016 09:24

Hi there,

I'm having a problem using Kendo UI in Rollbase. I'm currently using the drag & drop functionality, which works fine, but I need to be able to scroll the page while I'm dragging. The Kendo documentation says this should be possible using 'autoScroll:true'. Unfortunately, this works only when I put the mouse at the most left or right position on my screen - and therefore out of my content.

The draggable objects are in a section that contains three rows. All I need for it to do is to scroll when I hold the draggabe and try to drag it upwards.

Does anyone have any ideas?

Greetings,
Famke

All Replies

Posted by Mani Kumar on 02-Mar-2016 22:38

Hello Famke,

Can you please share the chunk of code you've used for the autoScroll?

Also, are you using autoScroll in a scrollable container? If so, you should be able to able to/ it should autoscroll the container when the mouse is close to the op or bottom of it.

-Mani.

Posted by Famke Bergmans on 03-Mar-2016 01:47

Heyhey,

The container isn't scrollable. The mouse now just leaves the container and goes straight into header with the draggable.

Here's the chunk of code for the draggable, I haven't coded anything specificly for the container:

$(".draggableTire").hover(function(){
    $(".draggableTire").removeClass("dragTire");
    $(this).addClass("dragTire");
    $(".dragTire").kendoDraggable({
        holdToDrag:true,
        hold:function(e){
            $(".dragTire").css({"border":"3px solid orange","border-radius":"13px"});
        },
        hint:function(e){
            return e.clone();
        },
        dragend:function(e){
            $(".draggableTire").css({"border":"0px","border-radius":"0px"});
        },
        autoScroll:true,
    }).data("kendoDraggable").userEvents.minHold = 175;
});

Posted by Famke Bergmans on 03-Mar-2016 06:11

I made the container scrollable and autoScroll now works. Still, I want the complete content to be visible and still be able to use autoScroll, so I don't want to have a scrollable container. Any ideas?

Posted by Mani Kumar on 03-Mar-2016 06:28

Good to know that the using scrollable container works fine with the autoScroll.

However, as you don't want to have a scorllable container, can you please confirm if you've tried the "TreeView"?

You can implement the autoScroll in the TreeView viewport to make it scrollable to the selected node (I haven't tried this, but this is a very good functionality for the scrollable functionality and user experience).

Regards,

Mani.

Posted by Mani Kumar on 03-Mar-2016 06:33

For some more information on TreeView, you can refer to below documentation:

docs.telerik.com/.../scroll-to-selected-item

-Mani.

Posted by Famke Bergmans on 07-Mar-2016 07:02

That looks interesting, but I'm not sure it will work in my situation. I have a vehicle (a truck) with tires, those tires are generated from within Rollbase and those are the things that need to move, it looks like this:

I get the tires by grabbing info through a select query, then make images and interactivity in multiple functions and I have no idea - as a beginner - how to work that into TreeView... Might as well give it a shot, though :)

Posted by Mani Kumar on 10-Mar-2016 08:01

Before I could suggest you few things, can you please help me with the below information:

1. As in image/SS, is the Truck and the side columns(Drop) components are in same page view? (If so, why would this need scrolling on same screen).

2. Would it be possible for you to share you application xml to understand your exact implementation?

Regards,

Mani.

This thread is closed