dataSource Object|Array|kendo.data.DataSource

Sets the DataSource for the Cards 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: "Doing", status: "doing" },
      { text: "Backlog", status: "backlog" },
      { text: "Done", status: "done" }
    ]
  });
</script>

Example - remote binding

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

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

  $("#taskBoard").kendoTaskBoard({
    dataDescriptionField: "Description",
    dataTitleField: "Title",
    dataStatusField: "Status",
    dataOrderField: "Order",
    dataSource: {
        transport: {
            read: {
                url: crudServiceBaseUrl + "/taskboard"
            },
            create: {
                url: crudServiceBaseUrl + "/taskboard/create",
                method: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/taskboard/update",
                method: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/taskboard/destroy",
                method: "POST"
            }
        },
        schema: {
            model: {
                id: "ID",
                fields: {
                    "ID": { type: "number" },
                    "Category": { type: "string" },
                    "Description": { type: "string" },
                    "Title": { type: "string" },
                    "Status": { type: "string" },
                    "Order": { type: "number" }
                }
            }
        }
    },
    columns: [
      { text: "Pending", status: "todo" },
      { text: "Under Review", status: "inProgress" },
      { text: "Scheduled", status: "done" }
    ]
  });
</script>