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

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>
In this article
Not finding the help you need? Improve this article