New to Kendo UI for jQuery? Start a free 30-day trial

Columns.command

configuration

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 the inline and popup edit 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.

columns.command

Array

  <div id="treelist"></div>

  <script>
      var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";

      $("#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"
            },
            update: {
              url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
              type: "POST",
              contentType: "application/json"
            },
            create: {
              url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
              type: "POST",
              contentType: "application/json"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return 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>

<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.

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

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.

<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.icon

String

Specifies the icon's name of the command button.

<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.

<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.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.

<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.

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