toolbar Boolean|Array|Object (default: true)

Configures the Tools of the TaskBoard.

Example

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

<script>
  $("#taskBoard").kendoTaskBoard({
    toolbar: [
      { 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>

Apart from the built-in tools, the TaskBoard 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. When passing an object to the toolbar configuration option it could also contain Toolbar.overflow configuration.

In this article
Related articles
Not finding the help you need? Improve this article