columns.command Array

The configuration of the column command(s). If set the column would display a button for every command. Commands can be custom or built-in ("edit", "createChild" or "destroy"):

• The "edit" built-in command switches the current table row to edit mode.
• The "createChild" built-in command adds a new child item to the current table row and switches to edit mode.
• The "destroy" built-in command 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 "edit", "createChild" and "destroy" commands work only if editing is enabled via the editable option, and the TreeList DataSource is configured for CRUD operations. The "edit" command supports "inline" and "popup" editing modes.

Example - set command as 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 - set command as 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 applied to the command button.

Example - set 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 applied to the icon span of the command button.

Example - set 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 executed when the user clicks the command button. The function receives a jQuery Event as an argument.

The function context (available via the this keyword) will be set to the treelist instance.

Example - handle 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 representing 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);
            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. The built-in command names are "edit", "createChild" and "destroy". Check the columns.command section for additional important information. When set to a custom value, the name is rendered as a data-command attribute.

Example - set 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 displayed by the command button. If not set the name option is used as the button text.

Example - customize 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>