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>

Apart from the built-in tools, the TreeList fully exposes the ToolBar.items API. This way you can specify any custom tools in the widget using the components available in the ToolBar itself. Note that all tools (commands) must have their name specified:

Example

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    toolbar: [ {
        name: "btn-cmd",
        type: "button",
        text: "Button"
    }, {
        name: "toggle-cmd",
        type: "button",
        text: "Toggle",
        togglable: true,
        icon: "cancel"
    }, {
        name: "split-cmd",
        type: "splitButton",
        text: "SplitButton",
        menuButtons: [{text: "Option 1"}, {text: "Option 2"}]
    } ],
    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.icon String

Specifies the icon's 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 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", icon: "info-circle", imageClass: "custom-info" }],
    columns: [
      "lastName",
      "position"
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "  VP, Engineering" }
    ]
  });
</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", icon: "info-circle", imageClass: "custom-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.template String|Function

The template which renders the command. By default renders a button. Uses the template for a ToolBar item toolbar.items.template

Example - set the template as a function

<div id="treelist"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
</script>
<script>
function toolbar_click() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("Toolbar command is clicked!");
  return false;
}
$("#treelist").kendoTreeList({
  toolbar: [
    { template: kendo.template($("#template").html()) }
  ],
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
</script>

Check Toolbar template for a live demo.

Example - set the template as a string

<div id="treelist"></div>
<script>
function toolbar_click() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("Toolbar command is clicked!");
  return false;
}
$("#treelist").kendoTreeList({
  toolbar: [
    {
      template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'
    }
  ],
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
</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>
In this article
Related articles
Not finding the help you need? Improve this article