toolbar String|Function|Array

• If a String value is assigned to the toolbar configuration option, it will be treated as a single string template for the whole TreeList toolbar and the string value will be passed as an argument to a kendo.template() function.
• If a Function value is assigned (it may be a kendo.template() function call or a generic function reference), then the return value of the function will be used to render the contents of the TreeList toolbar.
• If an Array value is assigned, it will be treated as the list of commands which are displayed in the TreeList toolbar. Commands can be custom or built-in. The supported built-in commands are:
• create - Adds an empty data item to the treelist.
• excel - Exports the TreeList data in MS Excel format.
• pdf - Exports the TreeList data in PDF format.
• search - built-in search panel for the TreeList.

Example - configuring the TreeList toolbar as a string template

  <div id="treeList"></div>
  <script>
    $("#treeList").kendoTreeList({
      toolbar: "<p>My string template in a paragraph.</p>",
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      sortable: {
        mode: "multiple"
      },
      dataSource: {
        data: [
          { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
          { id: 2, parentId: 1, name: "John Doe", age: 24 },
          { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
        ]
      }
    });
  </script>

Example - configuring the TreeList Toolbar template with a function and including the built in search functionality

<div id="treeList"></div>
<script type="text/x-kendo-template" id="template">
        <a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
  <span class="k-textbox k-grid-search k-display-flex">
      <input autocomplete="off" placeholder="Search..." title="Search..." class="k-input">
      <span class="k-input-icon">
          <span class="k-icon k-i-search"></span>
      </span>
  </span>
</script>
<script>
  function toolbar_click() {
    kendo.alert("Toolbar command is clicked!");
    return false;
  }

  $("#treeList").kendoTreeList({
    toolbar: kendo.template($("#template").html()),
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    sortable: {
      mode: "multiple"
    },
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
      ]
    }
  });
</script>

Example - configuring the TreeList toolbar as an array of commands

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    toolbar: ["excel", "pdf", "search"],
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    sortable: {
      mode: "multiple"
    },
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
      ]
    }
  });
</script>

toolbar.click Function

The click handler of the toolbar command. Used for custom toolbar commands.

Example - specifying the name of the command

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    toolbar: [
      { name: "custom", click: function() { alert("custom"); } }
    ],
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    sortable: {
      mode: "multiple"
    },
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
      ]
    }
  });
</script>

toolbar.imageClass String

A class name that will be rendered inside the toolbar button. When you set this option, the TreeList renders an additional span element inside the toolbar button which has a class name set to the option value. This approach allows you to display an icon inside your custom toolbar commands.

Example - specifying the name of the command

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    toolbar: [{name: "custom", text: "About", imageClass: "k-i-info" }],
    columns: [
      "lastName",
      "position"
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "  VP, Engineering" }
    ]
  });
</script>

toolbar.name String

The name of the toolbar command. Can be either a built-in ("create", "excel", or "pdf") or a custom string. The name is output in the HTML as a value of the data-command attribute of the button.

Example - specifying the name of the command

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    toolbar: [
      { name: "custom", click: function() { alert("custom"); } }
    ],
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    sortable: {
      mode: "multiple"
    },
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
      ]
    }
  });
</script>

toolbar.text String

The text that is displayed by the command button. If not set, the TreeList will use the name` option as the button text instead.

Example - specifying the text for the command button

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    toolbar: [
      { name: "custom", text: "My Command" }
    ],
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    sortable: {
      mode: "multiple"
    },
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
        { id: 2, parentId: 1, name: "John Doe", age: 24 },
        { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
      ]
    }
  });
</script>