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

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