Cancel event for new node

[Dmitry]

Hello,
I'm adding new node on client side. When users presses Escape key, I have to delete new node. How do I do that? NodeEdited event wont fire in this case.
3 years ago you promised here to implement this event but nothing has changed.
Thank you.

[Plamen]

Hi Dmitry,

You can try this javascript code that deletes the selected node after pressing the Escape key at my side:

function OnClientKeyPressing(sender, args) {
            var treeView = $find("<%= RadTreeView1.ClientID %>");
            var node = args.get_node();
            var key = args.get_domEvent().keyCode;

            if (key == "27") {
                treeView.trackChanges();

                var parent = node.get_parent();
                parent.get_nodes().remove(node);

                treeView.commitChanges();

            }
        }

Hope this is helpful.

Best wishes,
Plamen Zdravkov
the Telerik team

[Dmitry]

Hello,
Thank you for reply but OnClientKeyPressing event won't ever fire. I attached it to TreeView. Should I attach it to different control?

[Plamen]

Hi Dmitry,

Here is the sample project that worked at my side. OnClientKeyPressing fires when you press a custom key and a node is selected before that.

Hope this will help.

Best wishes,
Plamen Zdravkov
the Telerik team

[Dmitry]

Your solution will work. But did you try add a node on client side before? Try to add a node and when node just added and it's in edit mode, try to press Esc and see what will happen.

[Plamen]

Hello Dmitry,

I reproduced the issue and transferred it to our developers for further research.Thank you very much for reminding it to us.

All the best,
Plamen Zdravkov
the Telerik team

[Chris Badger]

Our company is experiencing this same issue.  Please add one more vote to getting this resolved ASAP.

Thanks,

Chris

[Plamen]

Hello Chris,

 
Thank you for sharing your interest about this case. I increased the priority of the issue. We will inform you once the issue is fixed.

Kind regards,
Plamen Zdravkov
the Telerik team

[Chris Badger]

For the benefit of others...here's a work-around that manually adds a "keydown" event to the input control used to edit a tree node.  This function should be wired up to the tree controls "OnClientNodeEditStart" event. 

The keydown event can be used to properly capture the pressing of the ESC key and remove a newly added node.  Note that I'm using some JQuery syntax here to register the event, but you could rewrite this without JQuery.  Also note that you may need to tweak this code if you want it to behave differently for aborting an edit of an existing node as opposed to aborting an edit of a new node.

 

var nodeInEditMode;

function onClientNodeEditStartHandler(sender, eventArgs)
{
   // get the node
   nodeInEditMode = eventArgs.get_node();

   // get a reference to the INPUT area of the edited node
   var textInput = nodeInEditMode.get_inputElement();

   // set the width and id property of the INPUT
   textInput.size = 15;
   textInput.id = "newNodeTextInput";

   // Add onclick event to text input box to handle ESC key (uses some JQuery)
   $('#' + textInput.id).keydown(function (event) {
    if (event.keyCode == '27') {
     tree.trackChanges();
     nodeInEditMode.get_parent().get_nodes().remove(nodeInEditMode);
     tree.commitChanges();
    }
   });
  }

[Plamen]

Hello Chris ,

 
Thank you very much for sharing your workaround of this issue with the community.

Greetings,
Plamen Zdravkov
the Telerik team