Editing in Tree

Initially, Tree is a non-editable component. But you can easily make Tree editable by extending it with a special class - EditAbility.

Generally, the technique of making Tree editable looks like this:

  • Create a new component and inherit it from ui.tree and EditAbility classes.
  • Specify 3 parameters (inherited from EditAbility) in the constructor:
    • editable - enables editing in the component
    • editor - sets the type of the editor
    • editValue - the data property that will be edited

By default, editors are opened on a single click.

Making Tree editable

webix.protoUI({
    name:"edittree"
}, webix.EditAbility, webix.ui.tree);
 
 
var tree = new webix.ui({
    view:"edittree",
    ...
    editable:true,
    editor:"text",
    editValue:"value"
});

Related sample:  Editing in Tree

Types of editors

There are various types of data editors in the Webix library. You can use any of them in different components. To get more details read the article Data Editors.

Below we'll describe 2 most frequently used editors for the tree:

text

A basic text editor.

Specifying the 'text' editor for the tree

webix.protoUI({
    name:"edittree"
}, webix.EditAbility, webix.ui.tree);
 
var tree = new webix.ui({
    view:"edittree",
    editable:true,
    editValue:"value",
    ...
    editor:"text"
});

Related sample:  Editing in Tree

select

A dropdown list.

Specifying the 'select' editor for the tree

webix.protoUI({
    name:"edittree"
}, webix.EditAbility, webix.ui.tree);
 
 
var tree = new webix.ui({
    view:"edittree",
    editable:true,
    editValue:"value",
    ...
    editor:"select",
    options:["The Shawshank Redemption", "The Godfather"]
});

Denying editing specific items

To deny editing specific items, branches, levels etc. you can use the onBeforeEditStart event inherited from EditAbility. The event fires right before the user opens the editor and gets the id of the edited item as a parameter.
To deny editing of a item - return false for it within the appropriate event handler.

Making editable only the second nesting level

webix.protoUI({
    name:"edittree"
}, webix.EditAbility, webix.ui.tree);
 
var tree = new webix.ui({
    view:"edittree",
    ...         
    editable:true,
    editor:"select",
    editValue:"value",
    data: [
        { id:"1", open:true, value:"The Shawshank Redemption", data:[
            { id:"1.1", value:"Part 1" },
            { id:"1.2", value:"Part 2" },
            { id:"1.3", value:"Part 3" }
        ]},
        { id:"2", value:"The Godfather", data:[
            { id:"2.1", value:"Part 1" },
            { id:"2.2", value:"Part 2" }
        ]}
    ]
}); 
//only film parts (i.e. 'Part1', 'Part2') can be edited
tree.attachEvent("onBeforeEditStart", function(id){
    if ( this.getItem(id).$level != 1)
        return false;
});
Back to top