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).

Hardylardy

[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.

Answer 1

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 wa sleft was to style it as so:

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 ;)

HARDLARDY