resources.dataSource Object|Array|kendo.data.DataSource

The data source which contains resource data items. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.DataSource instance.

If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.DataSource instance using that value as data source configuration.

If the dataSource option is an existing kendo.data.DataSource instance the widget will use that instance and will not initialize a new one.

Example

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

<script>
  $("#taskBoard").kendoTaskBoard({
    resources: [{
      field: "category",
      dataColorField: "Color",
      dataTextField: "Text",
      dataValueField: "Value",
      dataSource: [
        { Value: "urgent", Text: "Urgent", Color: "orange" },
        { Value: "highpriority", Text: "High Priority", Color: "blue" },
        { Value: "lowpriority", Text: "Low Priority", Color: "green" }
      ]
    }],
    dataSource: [
      { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "urgent" },
      { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "urgent" },
      { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "highpriority" },
      { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "lowpriority" },
      { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "lowpriority" }
    ],
    columns: [
      { text: "Doing", status: "doing" },
      { text: "Backlog", status: "backlog" },
      { text: "Done", status: "done" }
    ]
  });
</script>

Example - remote data binding

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

<script>
  $("#taskBoard").kendoTaskBoard({
    resources: [{
      field: "category",
      dataSource: {
        transport: {
          read: "url/to/endpoint"
        }
      }
    }],
    dataSource: [
      { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "urgent" },
      { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "urgent" },
      { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "highpriority" },
      { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "lowpriority" },
      { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "lowpriority" }
    ],
    columns: [
      { text: "Doing", status: "doing" },
      { text: "Backlog", status: "backlog" },
      { text: "Done", status: "done" }
    ]
  });
</script>