toolbar String|Function|Array|Object

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

  • If an Object value is assigned, it will propagate these properties to the underlying Toolbar:

  • items - an array of commands as explained above
  • overflow - an object that configures the overflow behavior of the toolbar. The same as Toolbar.overflow property

Example - configuring the TreeList toolbar as a string template

Open In Dojo
  <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

Open In Dojo
<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

Open In Dojo
<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

Open In Dojo
<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

Open In Dojo
<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

Open In Dojo
<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

Open In Dojo
<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

Open In Dojo
<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

Open In Dojo
<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

Open In Dojo
<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

Open In Dojo
<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>

toolbar.items.click Function

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

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

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

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

toolbar.items.template String|Function

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

Check Toolbar template for a live demo.

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

toolbar.overflow Object

Specifies Toolbar.overflow configuration for the toolbar.

toolbar.overflow.mode String (default: "menu")

Defines the overflow mode. The available options are:

  • "menu" — Moves overflowing items into a dropdown menu.
  • "scroll" — Keeps items visible and enables horizontal scrolling.
  • "section" — Groups items into collapsible sections.
  • "none" — Disables overflow handling; items may be cut off.

toolbar.overflow.scrollButtons String (default: "auto")

Defines the visibility of scroll buttons when mode is "scroll". The available options are:

  • "auto" — Displays scroll buttons only when needed.
  • "hidden" — Hides the scroll buttons at all times.
  • "visible" — Always shows the scroll buttons.

toolbar.overflow.scrollButtonsPosition String (default: "split")

Defines the placement of scroll buttons. The available options are:

  • "split" — Scroll buttons appear at both ends of the toolbar.
  • "start" — Scroll buttons appear only at the start of the toolbar.
  • "end" — Scroll buttons appear only at the end of the toolbar.

toolbar.overflow.scrollDistance Number (default: 50)

Specifies the distance (in pixels) the toolbar scrolls when a scroll button is clicked.