This is a migrated thread and some comments may be shown as answers.

Inline Editor inside TreeView item

3 Answers 236 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jan
Top achievements
Rank 1
Jan asked on 04 May 2017, 09:03 AM

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?

3 Answers, 1 is accepted

Sort by
0
Jan
Top achievements
Rank 1
answered on 04 May 2017, 09:08 AM
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.
0
Ianko
Telerik team
answered on 09 May 2017, 10:27 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jan
Top achievements
Rank 1
answered on 09 May 2017, 11:43 AM
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.
Tags
Editor
Asked by
Jan
Top achievements
Rank 1
Answers by
Jan
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or