Inline Editor inside TreeView item

4 posts, 0 answers
  1. Jan
    Jan avatar
    38 posts
    Member since:
    Apr 2017

    Posted 04 May 2017 Link to this post

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

    TreeView initialization:

    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.    })

    TreeView template:

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


    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 "'kendoEditor')",

    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: 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?

  2. Jan
    Jan avatar
    38 posts
    Member since:
    Apr 2017

    Posted 04 May 2017 Link to this post

    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.
  3. Ianko
    Ianko avatar
    1757 posts

    Posted 09 May 2017 Link to this post

    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:

    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.

    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.
  4. Jan
    Jan avatar
    38 posts
    Member since:
    Apr 2017

    Posted 09 May 2017 Link to this post

    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.
Back to Top