toolbar - API Reference - Kendo UI TreeList

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

configuration

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

String|Function|Array|Object

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

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

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

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

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

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

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

Array

A JavaScript array that contains the ToolBar's commands configuration.

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    toolbar: {
      items: [
        { name: "pdf" },
        { name: "excel" },
        { name: "custom", text: "Custom", click: function() { console.log("Custom clicked"); } }
      ]
    }
  });
</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.

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

Object

Specifies Toolbar.overflow configuration for the toolbar.

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    toolbar: {
      items: [
        { name: "pdf" },
        { name: "excel" },
        { name: "custom1", text: "Custom1" },
        { name: "custom2", text: "Custom2" }
      ],
      overflow: {
        mode: "menu"
      }
    }
  });
</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

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

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

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

Related Members