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

Toolbar.items

configuration

Configures the items collection of the toolbar.

toolbar.items

Array

<div id="taskBoard"></div>

<script>
  $("#taskBoard").kendoTaskBoard({
    toolbar: {
      items: [
        { type: "button", text: "Add Card", name: "addCard", text: "Add New Card", command: "CustomAddCardCommand", icon: "plus", showText: true },
        "spacer",
        "search"
      ]
    },
    dataOrderField: "order",
    dataSource: [
      { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "red" },
      { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "red" },
      { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "green" },
      { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "green" },
      { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "blue" }
    ],
    columns: [
      { text: "Doing", status: "doing" },
      { text: "Backlog", status: "backlog" },
      { text: "Done", status: "done" }
    ]
  });

  kendo.ui.taskboard.commands["CustomAddCardCommand"] = kendo.ui.taskboard.Command.extend({
    exec: function () {
      var taskboard = this.taskboard;
      var options = this.options;

      taskboard.addCard({ status: "doing", title: "Add Title", description: "Add Description", category: "green" });
      taskboard.dataSource.sync();
    }
  });
</script>

toolbar.items.attributes

Object

Specifies the HTML attributes of a ToolBar button.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { 
                text: "Custom Button", 
                icon: "plus",
                attributes: {
                    "data-action": "add",
                    "title": "Add new card",
                    "class": "custom-button"
                }
            }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.click

Function

Specifies the click handler of the button.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { 
                text: "Custom Action", 
                icon: "star",
                click: function(e) {
                    console.log("Custom button clicked!");
                    alert("Button clicked");
                }
            }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.command

String

Specifies the command of the button.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { command: "CustomCommand", text: "Custom Command", icon: "gear" },
            { command: "AddCard", text: "Add Card", icon: "plus" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.enable

Boolean

Specifies whether the control is initially enabled or disabled. Default value is "true".

Default: true

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Enabled Button", icon: "plus", enable: true },
            { text: "Disabled Button", icon: "gear", enable: false }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.hidden

Boolean

Determines if a button is visible or hidden. By default buttons are visible.

Default: false

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Visible Button", icon: "plus", hidden: false },
            { text: "Hidden Button", icon: "gear", hidden: true }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.icon

String

Sets icon for the item. The icon should be one of the existing in the Kendo UI theme sprite.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Add", icon: "plus" },
            { text: "Settings", icon: "gear" },
            { text: "Delete", icon: "trash" },
            { text: "Save", icon: "save" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.id

String

Specifies the ID of the button.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Add Card", icon: "plus", id: "addCardButton" },
            { text: "Settings", icon: "gear", id: "settingsButton" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.imageUrl

String

If set, the ToolBar will render an image with the specified URL in the button.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Custom Image", imageUrl: "/images/custom-icon.png" },
            { text: "Another Image", imageUrl: "https://via.placeholder.com/16x16" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.name

String

Specifies the name of the button.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { name: "addCard", text: "Add Card", icon: "plus" },
            { name: "customButton", text: "Custom", icon: "gear" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.options

String

Specifies the command options of the button.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { 
                command: "CustomCommand", 
                text: "Custom Command", 
                options: "option1,option2",
                icon: "gear"
            }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.overflow

String

Specifies the overflow of the button.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Always Visible", overflow: "never" },
            { text: "Can Overflow", overflow: "auto" },
            { text: "Always Hidden", overflow: "always" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.primary

Boolean

Specifies whether the button is primary. Primary buttons receive different styling.

Default: false

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Primary Action", icon: "plus", primary: true },
            { text: "Secondary Action", icon: "gear", primary: false }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.showIcon

String

Specifies where the button icon will be displayed. Possible values are: "toolbar", "overflow" or "both" (default).

Default: "both"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Toolbar Only", icon: "plus", showIcon: "toolbar" },
            { text: "Overflow Only", icon: "gear", showIcon: "overflow" },
            { text: "Both Places", icon: "star", showIcon: "both" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.showText

String

Specifies where the text will be displayed. Possible values are: "toolbar", "overflow" or "both" (default).

Default: "both"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Toolbar Only", icon: "plus", showText: "toolbar" },
            { text: "Overflow Only", icon: "gear", showText: "overflow" },
            { text: "Both Places", icon: "star", showText: "both" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.spriteCssClass

String

Defines a CSS class (or multiple classes separated by spaces) which will be used for button icon.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Custom Icon", spriteCssClass: "custom-icon-class" },
            { text: "Another Icon", spriteCssClass: "icon-sprite custom-class" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.template

String|Function

Specifies what element will be added in the ToolBar wrapper. Items with template does not have a type.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { 
                template: (data) => `<button class="k-button"><span class="k-icon k-i-star"></span>Custom Template</button>`
            },
            { text: "Regular Button", icon: "gear" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.text

String

Sets the text of the button.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Add New Card", icon: "plus" },
            { text: "Export Data", icon: "download" },
            { text: "Settings", icon: "gear" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.togglable

Boolean

Specifies if the button is togglable, e.g. has a selected and unselected state.

Default: false

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { text: "Toggle View", icon: "eye", togglable: true },
            { text: "Regular Button", icon: "gear", togglable: false }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.items.type

String

Specifies the type of the button.

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        items: [
            { type: "button", text: "Custom Button", icon: "plus" },
            {
                type: "splitButton", text: "Split Button", menuButtons: [
                    { id: "foo", text: "Foo" },
                    { id: "bar", text: "Bar" }
                ]
            }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>