columns Object|Array|kendo.data.DataSource

Sets the DataSource for the Columns of the TaskBoard. Can be bound to a remote service or local data.

Example

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

<script>
$("#taskBoard").kendoTaskBoard({
    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: "Backlog", status: "backlog" },
        { text: "Doing", status: "doing" },
        { text: "Done", status: "done" }
    ]
});
</script>

Example - remote binding

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

<script>
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";

$("#taskBoard").kendoTaskBoard({
  columnSettings: {
    dataTextField: "Text",
    dataStatusField: "Status",
    dataOrderField: "Order"
  },
  columns: {
    transport: {
      read: {
        url: crudServiceBaseUrl + "/taskboard/columns"
      },
      create: {
        url: crudServiceBaseUrl + "/taskboard/columns_create",
        method: "POST"
      },
      update: {
        url: crudServiceBaseUrl + "/taskboard/columns_update",
        method: "POST"
      },
      destroy: {
        url: crudServiceBaseUrl + "/taskboard/columns_destroy",
        method: "POST"
      }
    },
    schema: {
      model: {
        id: "ID",
        fields: {
          "ID": { type: "number" },
          "Text": { type: "string" },
          "Status": { type: "string", defaultValue: "todo" },
          "Order": { type: "number" }
        }
      }
    }
  },
  dataSource: [
    { id: 1, title: "Campaigns", order: 1, description: "Create a new landing page for campaign", status: "todo", color: "orange" },
    { id: 2, title: "Newsletters", order: 2, description: "Send newsletter", status: "inProgress", color: "orange" },
    { id: 3, title: "Ads Analytics", order: 3, description: "Review ads performance", status: "done", color: "orange" }
  ]
});
</script>