Telerik RadTreeView Drag N Drop Nodes

Question

What's the best way to override the default text and create a "Visual Cue" when Dragging a RadTreeView Node to another. I've started by:

...
telerik:RadTreeView OnClientNodeDragging="ClientNodeDragging"
...

function ClientNodeDragging(sender, args)
{
    if (!visualClue)
    {
        visualClue = createVisualClue();
        document.body.insertBefore(visualClue, document.body.firstChild);
    }

    visualClue.style.left = args._domEvent.screenX + "px";
    visualClue.style.top = args._domEvent.screenY + "px";
}

Is the way to go about displaying the text on screen?

At the moment it's approx 20 px below the draggable node and the existing drag text (RadTreeView) still displays (displays the name of the node text - I want it removed or overridden/hidden).

UPDATE OK I've used args._domEvent.clientX and .clientY now. Close, but now I need a way of removing the RadTreevIew's own text.

score 2 · Answer 1 · edited Jun 29 '11 at 13:07

I Managed to sort it out by using IE's debugger (could have used any other debugger) and noticed the sender has this _draggingClue - BINGO!! So all that was left was to style it like this:

function ClientNodeDragging(sender, args)
{
    var node = args.get_node();
    if (node.get_level() != 0)
    {
        var dom = args.get_domEvent();
        var div = sender._draggingClue;
        var moveCopyText = "Copy";
        var hidden = document.getElementById("<%= MoveCopyHiddenField.ClientID %>");

        if (dom.shiftKey) {
            hidden.value = "true";
            moveCopy = true;
        }
        else if (dom.ctrlKey) {
            hidden.value = "false";
            moveCopy = false;
        }
        else {
            hidden.value = "true";
            moveCopy = true;
        }

        if(moveCopy)
            moveCopyText = "Move";
        else
            moveCopyText = "Copy";

        div.className = "DragFile";
        div.style.height = '15px';
        div.style.paddingTop = '3px';
        div.innerHTML = moveCopyText + " " + node.get_text();
    }
}

Hope this helps someone and perhaps myself in so many years time ;)

Telerik RadTreeView Drag N Drop Nodes

1 Answers1