Editable Treeview, disable enter key

Dec 15, 2011 at 10:14 AM

How do i disable the enter key press in the Editable tree view node section text box?

Coordinator
Dec 15, 2011 at 10:36 AM

The TreeView is completely templated, so you can provide a template with YOUR OWN textbox+some javascript that handles the keyboard in the way you like. In fact the template can also contain some javascript. You can also just add a css attribute, and then you can handle the keyboard events with the jQuery on method: http://api.jquery.com/on/. This way you avoid adding too much javascript in the page.

If you explain me better WHAT is your final purpose I may give a more detailed, and better advice...maybe you just need to add som event handler to the existing textbox.

Dec 16, 2011 at 1:30 AM

Here is what i want to do

1. When i am editing a node in treeview, i want to disable Enter Key. Because it posts back to server and form gets submitted.

2. I have achieved this by disabling enter key in the already loaded treeview nodes when page gets loaded using document.ready function.

However, when user adds a new node by clicking "Add" button in treeview, the Enter key is active in the newly added text box as its a new element in DOM

Coordinator
Dec 16, 2011 at 8:32 AM

As I already said there are just two ways to attach an event handler to ALL nodes, also the ones that will be added in the future:

1) Add the small piece of code that add the handler in the node template, so it will be executed also when a new node is created. However one should avoid mixing javascript and html, so WHEN POSSIBLE (sometimes this is the only solution) one should move the second solution.

2) Attach the event handle to the root of the tree, and exploit event bubbling. This way the event handle will cath also the events of newly created nodes. You can do this with the the on lquery function. Say you want attach a click event, and say the root of the tree has a css class of "treeview", while the elements you want to generate the click event have a css class of "toClick", then you write; $('.treeview')('click', '.toClick', function(){......});