how to change the cursor correctly?

[Roger]

I have a couple of examples of how to change the cursor for certain actions but, I can't seem to get it to work.

Here is what I am trying to do:
I am using a web service to populate my treenodes on demand. It work wonderfully.
To allow the user to copy one node (and its children) to another node, I have created a context menu for the nodes. When the user selects the "cut" option, I am disabling the node they just chose to cut, and I want to change the cursor to a "cut" cursor (I have an image for that cursor").

I tried change the document.body.style.cursor attribute in my OnClientContextMenuItemClicking event. But that would change the cursor for everywhere EXCEPT over the treeview. So, I figured the cursor is being changed/set at the node level.

So, I have tried this code for the OnClientMouseOver event of the nodes:

        function OnClientMouseOver(sender, args) {
            var pasteType = document.getElementById('<%= hdnPasteOperationType.ClientID %>');
            switch(pasteType.value)
            {
                case "cut":
                    if (args.get_node()) {
                        sender.trackChanges();
                        args.get_node().set_cssClass("copyCursor");
                        sender.commitChanges();
                    }
                    break;
                case "copy", "copyAll":

                    break;
            }
        }

The code runs without any errors but, nothing happens. I originally did not have the trackChanges() and commitChanges() bit in there but, I thought it might help. It does not.

Can you advise me on the best way to handle what I am trying to accomplish.

When user selects "Cut", "Copy", or "Copy All" from the context menu, I want to change the cursor to an appropriate image, until they paste the nodes they just acted on to a new location.

Thanks for any advice you can give.

[Veronica]

Hi Roger,

As I understand you want the cursor to be changed to all of the nodes on the RadTreeView when a "Cut" RadTreeViewContextMenu is clicked. Then you need to use OnClientContextMenuItemClicked event. There you'll get the selected RadTreeViewContextMenu item and check if it's text is "Cut". If so all you have to do is get all nodes of the treeView and change their CssClass:

function ContextMenuItemClickedHandler(sender, args) {
            var item = args.get_menuItem();
            var treeView = $find("<%= RadTreeView1.ClientID %>");
            var nodes = treeView.get_allNodes();
            if (item.get_text() == "Cut") {
                for (var i = 0; i < nodes.length; i++) {
                    nodes[i].set_cssClass("Cursor");
                }
            }
        }

In my example I change the mouse cursor with a pointer. You may use whatever you want. For the CssClass I use this:

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

You may find the full code in the attached .zip file.

Please let me know if this was helpful.

Kind regards,
Veronica Milcheva
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.