Inline Editor inside TreeView item

[Jan]

I am trying to implement an inline editor inside each item of a TreeView widget.

TreeView initialization:

01.@(Html.Kendo()
02.    .TreeView()
03.    .Name("treeview")
04.    .TemplateId("treeview-template")
05.    .Items(it1 =>
06.    {
07.        it1.Add().Id("1").Text("Test1")
08.            .Items(it2 =>
09.            {
10.                it2.Add().Id("2").Text("Test2");
11.            });
12.    })
13.)

TreeView template:

1.<script id="treeview-template" type="text/kendo-ui-template">
2.#var id = 'editor_' + item.id;#
3.@(Html.Kendo()
4.    .Editor()
5.    .Name("#=id#")
6.    .Value("#=item.text#")
7.    .ToClientTemplate())
8.</script>

 

But when I click on an item, the editor is not opening. The click just selects the TreeView item.

When I add a click listener in javascript to the editor instance and call "...date('kendoEditor').toolbar.show()",

I get the toolbar but no focus, and when I set the focus manually its always at the beginning of the text.

It seems that some events on the TreeView are preventing the inline edit event (i.e. the 'select' event of the TreeView?).

Another example: http://demos.telerik.com/aspnet-core/treeview/index add a "contenteditable=true" to any item and try to click it. The cursor appears for a second and then the item loses focus.

Do you think there is any possibility to get this working?

[Jan]

Additional info: I need the inline edit mode inclusive the drag and drop feature of the TreeView. In drag and drop mode the editor dont react at all. Without drag and drop mode it shows the editor for a second as described above.

[Ianko]

Hello Jan,

Kendo TreeView is not intended to hold editable containers in their items so that such to be considered. Basically, what happens is that the TreeView handles DOM events for selection and Drag and Drop that interfere with the events of Kendo Editor. Having both is currently not possible.

I am not sure what you are after, but one solution is to have a UI abstraction (an edit button) that opens an editor to edit the item. 

Or, if you need more complexity, you can consider the Treelist with editing: http://demos.telerik.com/kendo-ui/treelist/editing.

If, however, your opinion is that TreeView should support such scenarios and have an option to hold editable containers, I suggest you posting your opinion in our feedback portal so that the dev team can evaluate this requets.

Regards,
Ianko
Telerik by Progress

[Jan]

Thank you for your response. I decided to open a telerik window on a treeItem click, because I have to add more data than just the string to that item.