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

Toolbar.items

configuration

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

toolbar.items

Array

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

Function

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

<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: "custom",
          text: "Custom Action", 
          click: function(e) { 
            console.log("Custom action clicked"); 
            alert("Custom toolbar button clicked!");
          } 
        }
      ]
    }
  });
</script>

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({
    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: "settings",
          text: "Settings", 
          icon: "k-icon k-i-gear"
        }
      ]
    }
  });
</script>

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.

<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: "custom",
          text: "Custom", 
          imageClass: "custom-toolbar-icon"
        }
      ]
    }
  });
</script>

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.

<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", text: "Export to PDF" },
        { name: "excel", text: "Export to Excel" }
      ]
    }
  });
</script>

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

<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: [
        { 
          template: (data) => `<button class='k-button' onclick='myFunction()'>Custom Button</button>`
        }
      ]
    }
  });
  
  function myFunction() {
    console.log("Custom template button clicked");
  }
</script>

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.

<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", text: "Export to PDF" },
        { name: "excel", text: "Export to Excel" }
      ]
    }
  });
</script>