[Solved] Drag & Drop Icon behind Window Control

[Paul]

I have a TreeView inside a Window control that is set to Modal and I see the icons when I click...drag...off the side of the window but it is hidden behind the Window control.  Obviously this has to do with the z-index in the CSS but I wanted to find out how you suggest I fix this issue?

It's really hard to tell where i'm dragging and dropping when the window control is hiding the visual queues.

Any help would be greatly appreciated.

Thanks,
Paul

[Paul]

I have come up with this solution which I found would not work in the OnNodeStart method because the dragClue and dropClue tags weren't created yet.  I had to put this code in the OnNodeDragging method which isn't ideal but it did the trick:

function onNodeDragging(e) {
    //update the z-index of the drag clue
    var $currentDragClue = $('div.t-drag-clue');
    $currentDragClue.css('z-index', '500000');

    //update the z-index of the drop clue
    var $currentDropClue = $('div.t-drop-clue');
    $currentDropClue.css('z-index', '500000');
}

The other piece to note is the previous z-index of those items was set to 10,000 so it's good to know it wasn't set to 0.  =)

If someone has a better solution please let me know.

Thanks,
Paul

[Alex Gyoshev]

Hello Paul,

Instead of using JavaScript, you can patch this with one line of CSS:

    .t-drag-clue { z-index: 10003; /* can be 50000 :) */ }

We fixed it in our code -- sadly, the fix didn't make it in the service pack released today. Your Telerik points have been updated.

Sincerely yours,
Alex Gyoshev
the Telerik team