editable Boolean|Object (default: false)
If set to true, the user will be able to edit the data to which the TreeList is bound. By default, editing is disabled.
editable can be set to a JavaScript object (which represents the editing configuration) or to a string (which specifies the edit mode).
The supported string values are:
- (Default)
inline popupincell
- The inline and popup edit modes are triggered by the
editcolumn command. Therefore, in order for these edit modes to work correctly, you need to have a column with theeditcommand.- In order for the edit operations to work correctly, configure the dataSource for CRUD operations.
Example - enabling editing
<div id="treelist"></div>
<script>
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
editable: true,
height: 540,
columns: [
{ field: "FirstName", title: "First Name", width: 220 },
{ field: "LastName", title: "Last Name", width: 100 },
{ field: "Position" },
{ title: "Edit", command: [ "edit" ], width: 180 }
],
dataSource: {
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory/All",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "EmployeeId",
parentId: "ReportsTo",
fields: {
EmployeeId: { type: "number", editable: false, nullable: false },
ReportsTo: { nullable: true, type: "number" },
FirstName: { validation: { required: true } },
LastName: { validation: { required: true } },
Position: { type: "string" }
},
expanded: true
}
}
}
});
</script>
Example - enabling popup editing
<div id="treelist"></div>
<script>
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
editable: "popup",
height: 540,
columns: [
{ field: "FirstName", title: "First Name", width: 220 },
{ field: "LastName", title: "Last Name", width: 100 },
{ field: "Position" },
{ title: "Edit", command: [ "edit" ], width: 180 }
],
dataSource: {
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory/All",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "EmployeeId",
parentId: "ReportsTo",
fields: {
EmployeeId: { type: "number", editable: false, nullable: false },
ReportsTo: { nullable: true, type: "number" },
FirstName: { validation: { required: true } },
LastName: { validation: { required: true } },
Position: { type: "string" }
},
expanded: true
}
}
}
});
</script>
editable.mode String (default: "inline")
The edit mode that will be used.
The supported edit modes are:
inlinepopupincell
The inline and popup edit modes are triggered by the
editcolumn command. Therefore, in order for these edit modes to work correctly, you need to have a column with theeditcommand.
Example - specifyinging the inline edit mode
<div id="treelist"></div>
<script>
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
editable: {
mode: "inline"
},
height: 540,
columns: [
{ field: "FirstName", title: "First Name", width: 220 },
{ field: "LastName", title: "Last Name", width: 100 },
{ field: "Position" },
{ title: "Edit", command: [ "edit" ], width: 180 }
],
dataSource: {
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory/All",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "EmployeeId",
parentId: "ReportsTo",
fields: {
EmployeeId: { type: "number", editable: false, nullable: false },
ReportsTo: { nullable: true, type: "number" },
FirstName: { validation: { required: true } },
LastName: { validation: { required: true } },
Position: { type: "string" }
},
expanded: true
}
}
}
});
</script>
editable.move Boolean|Object (default: false)
Enables the drag-and-drop UI of rows between parents.
Example - using the drag-and-drop functionality for editing the row parent node
<div id="treelist"></div>
<script>
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
editable: {
move: true
},
columns: [
{ field: "FirstName", title: "First Name", width: 220 },
{ field: "LastName", title: "Last Name", width: 160 },
{ field: "Position" }
]
});
</script>
editable.move.clickMoveClick Boolean (default: true)
If set to true (default), when there is a drag column for the items in the TreeList, the user will be allowed to reorder rows via click move click interaction as an alternative of the drag and drop one.
Example
<div id="treelist"></div>
<script>
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
editable: {
move: {
reorderable: true,
clickMoveClick: false
}
},
columns: [
{ draggable: true, width: "40px" },
{ field: "FirstName", title: "First Name", width: 220 },
{ field: "LastName", title: "Last Name", width: 160 },
{ field: "Position" }
]
});
</script>
editable.move.reorderable Boolean (default: false)
Enables reordering of rows via a drag-and-drop UI.
Example - using the drag-and-drop functionality for editing the row parent node
<div id="treelist"></div>
<script>
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
editable: {
move: {
reorderable: true
}
},
columns: [
{ field: "FirstName", title: "First Name", width: 220 },
{ field: "LastName", title: "Last Name", width: 160 },
{ field: "Position" }
]
});
</script>
editable.template String|Function
The template which renders the popup editor.
The template has to contain elements whose name HTML attribute is set to the name of the editable field. In this way, the TreeList recognizes
the field to which it has to bind the each editor. Alternatively, use MVVM bindings for binding HTML elements to data item fields.
To initialize Kendo UI widgets in the template, use the
roledata attribute. For more information, refer to the data attribute initialization.
Example - customizing the popup editor
<div id="treelist"></div>
<script id="popup-editor" type="text/x-kendo-template">
<label>First Name:<input name="FirstName" /></label>
<label>Last Name:<input name="LastName" /></label>
<label>Position:
</label>
<select name="Position">
<option>Software Developer</option>
<option>Team Lead</option>
<option>Technical Lead</option>
</select>
</label>
</p>
</script>
<script>
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
editable: {
template: kendo.template($("#popup-editor").html()),
mode: "popup"
},
columns: [
{ field: "FirstName", title: "First Name", width: 220 },
{ field: "LastName", title: "Last Name", width: 160 },
{ field: "Position" },
{ command: ["edit"] }
]
});
</script>
Example - using MVVM in the popup editor template
<div id="treelist"></div>
<script id="popup-editor" type="text/x-kendo-template">
<label>First Name:<input data-bind="value: FirstName" /></label>
<label>Last Name:<input data-bind="value: LastName" /></label>
<label>Position:
</label>
<select data-bind="value: Position">
<option>CEO</option>
<option>Team Lead</option>
<option>Technical Lead</option>
</select>
</label>
</p>
</script>
<script>
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
editable: {
template: kendo.template($("#popup-editor").html()),
mode: "popup"
},
columns: [
{ field: "FirstName", title: "First Name", width: 220 },
{ field: "LastName", title: "Last Name", width: 160 },
{ field: "Position" },
{ command: ["edit"] }
]
});
</script>
editable.window Object
Configures the Kendo UI Window instance which is used when the TreeList edit mode is set to popup. For more information, refer to the configuration API of the Window.
Example - configuring the Window in the popup edit mode
<div id="treelist"></div>
<script>
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
open: myOpenEventHandler
}
},
columns: [
{ field: "FirstName", title: "First Name", width: 220 },
{ field: "LastName", title: "Last Name", width: 160 },
{ field: "Position" },
{ command: ["edit"] }
]
});
function myOpenEventHandler(e) {
// ...
}
</script>