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:
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
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:
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
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"]
});
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 2nd 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