columns.command Array
The configuration of the column commands. If set, the column will display a button for every command. Commands can be custom or built-in
The built-in commands are:
-
edit- Switches the current table row to edit mode. Supports theinlineandpopupedit modes. -
createChild- Adds a new child item to the current table row and switches to edit mode. -
destroy- Removes the data item to which the current table row is bound.
Custom commands are supported by specifying the click option.
- Each custom command requires you to explicitly specify its name.
- A command column cannot be expandable.
- The built-in commands work only if editing is enabled through the editable option and the DataSource of the TreeList is configured for CRUD operations.
Example - setting the command as an array of strings
<div id="treelist"></div>
<script>
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
editable: true,
height: 540,
columns: [
{ field: "FirstName", expandable: true, title: "First Name", width: 220 },
{ field: "LastName", title: "Last Name", width: 100 },
{ field: "Position" },
{ title: "Edit", command: [ "createChild", "edit" ], width: 180 }
],
dataSource: {
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory/All",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
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 - setting the command as an array of objects
<div id="treelist"></div>
<script>
$("#treelist").kendoTreeList({
columns: [
{ field: "lastName", title: "Last Name" },
{ field: "position", title: "Position" },
{ command: [
{
name: "details",
text: "Details",
click: function(e) {
// command button click handler
},
imageClass: "k-i-info"
},
{ name: "destroy" } // built-in "destroy" command
]}
],
dataSource: [
{ id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
{ id: 2, parentId: 1, lastName: "Weber", position: " VP, Engineering" }
]
});
</script>
columns.command.className String
The CSS class that is applied to the command button.
Example - setting the CSS class of the command
<div id="treelist"></div>
<script>
$("#treelist").kendoTreeList({
columns: [
{ field: "lastName", title: "Last Name" },
{ field: "position", title: "Position" },
{ command: [
{
name: "details",
text: "Details",
className: "btn-details"
}
]}
],
dataSource: [
{ id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
{ id: 2, parentId: 1, lastName: "Weber", position: " VP, Engineering" }
]
});
</script>
<style>
.btn-details {
color: green;
font-weight: bold;
}
</style>
columns.command.imageClass String
The CSS class that is applied to the icon span of the command button.
Example - setting the CSS class of the command icon
<div id="treelist"></div>
<script>
$("#treelist").kendoTreeList({
columns: [
{ field: "lastName", title: "Last Name" },
{ field: "position", title: "Position" },
{ command: [
{
name: "details",
text: "Details",
imageClass: "k-i-info"
}
]}
],
dataSource: [
{ id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
{ id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
]
});
</script>
columns.command.click Function
The JavaScript function that is executed when the user clicks the command button. The function receives a jQuery event as an argument. The function context that is available through the this keyword will be set to the TreeList instance.
Example - handling the click event of the custom command button
<div id="treelist"></div>
<script>
$("#treelist").kendoTreeList({
columns: [
{ field: "lastName", title: "Last Name" },
{ field: "position", title: "Position" },
{ command: [
{
name: "details",
text: "Details",
click: function(e) {
// e.target is the DOM element which represents the button
var tr = $(e.target).closest("tr"); // get the current table row (tr)
// get the data bound to the current table row
var data = this.dataItem(tr);
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Details for: " + data.lastName);
}
}
]}
],
dataSource: [
{ id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
{ id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
]
});
</script>
columns.command.name String
The name of the command. Commands can be built-in ("edit", "createChild" and "destroy") or custom. When set to a custom value, the name is rendered as a data-command attribute. For more information, refer to the columns.command section.
Example - setting the command name
<div id="treelist"></div>
<script>
$("#treelist").kendoTreeList({
columns: [
{ field: "lastName", title: "Last Name" },
{ field: "position", title: "Position" },
{ command: [
{
name: "details",
text: "Details",
imageClass: "k-i-info"
}
]}
],
dataSource: [
{ id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
{ id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
]
});
</script>
columns.command.text String
The text that is displayed by the command button. If not set, the name option is used as the button text.
Example - customizing the text of the command
<div id="treelist"></div>
<script>
$("#treelist").kendoTreeList({
columns: [
{ field: "lastName", title: "Last Name" },
{ field: "position", title: "Position" },
{ command: [
{
name: "custom",
text: "Details"
}
]}
],
dataSource: [
{ id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
{ id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
]
});
</script>