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
},
icon: "info-circle"
},
{ 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.icon String
Specifies the icon's name 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",
icon: "info-circle",
imageClass: "details-info"
}
]}
],
dataSource: [
{ id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
{ id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
]
});
</script>
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",
icon: "info-circle",
imageClass: "details-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",
icon: "info-circle"
}
]}
],
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. To have an icon button with no text, you can set the text property to an empty string.
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"
},
{
name: "details",
icon: "info-circle",
text: ""
}
]}
],
dataSource: [
{ id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
{ id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
]
});
</script>