New to Kendo UI for jQuery? Start a free 30-day trial

Resources

configuration

The configuration of the TaskBoard resource(s). A TaskBoard resource is optional metadata that can be associated with a TaskBoard event.

resources

Array

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

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

resources.dataColorField

String

The field of the resource data item which contains the resource color.

Default: "color"

<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>

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.

<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>

pseudo

    <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>

resources.dataTextField

String

The field of the resource data item which represents the resource text.

Default: "text"

<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>

resources.dataValueField

String

The field of the resource data item which represents the resource value. The resource value is used to link a TaskBoard event with a resource.

Default: "value"

<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>

resources.field

String

The field of the TaskBoard event which contains the resource id.

<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>

If set to true the TaskBoard event can be assigned multiple instances of the resource. The TaskBoard event field specified via the field option will contain an array of resources. By default only one resource instance can be assigned to an event.

Default: false

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

<script id="card-template" type="text/x-kendo-template">
      <div class="template-container">
          <div class="template-header">
              <p><a class="k-card-title k-link" href="" data-command="SelectCardCommand">#: title #</a></p>
          </div>
          <p>#:description#</p>
          <p>Tags: # for (var i = 0; i < resources.tags.length; i++) { #
            <span style="color: #:resources.tags[i].color#">#:resources.tags[i].text#</span>
          # } # </p>
      </div>
  </script>

<script>
  $("#taskBoard").kendoTaskBoard({
    resources: [{
      field: "tags",
      multiple: true,
      dataSource: [
        { value: "bug", text: "Bug", color: "gray" },
        { value: "feature", text: "Feature", color: "orange" },
        { value: "client-side", text: "Client-side", color: "blue" },
        { value: "server-side", text: "Server-side", color: "green" }
      ]
    }],
    template: $("#card-template").html(),
    dataSource: [
      { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", tags: [ "bug", "client-side" ] },
      { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", tags: [ "feature", "client-side" ] },
      { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", tags: [ "feature", "server-side" ] },
      { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", tags: [ "chore", "client-side" ] },
      { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", tags: [ "chore", "server-side" ] }
    ],
    columns: [
      { text: "Doing", status: "doing" },
      { text: "Backlog", status: "backlog" },
      { text: "Done", status: "done" }
    ]
  });
</script>

resources.name

String

The name of the resource used to distinguish resource. If not set the value of the field option is used.

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

<script id="card-template" type="text/x-kendo-template">
      <div class="template-container">
          <div class="template-header">
              <p><a class="k-card-title k-link" href="" data-command="SelectCardCommand">#: title #</a></p>
          </div>
          <p>#: description#</p>
          <p>#:resources.priority.name#: <span style="color:#:resources.priority.color#">#:resources.priority.text#<span></p>
      </div>
  </script>

<script>
  $("#taskBoard").kendoTaskBoard({
    resources: [{
      field: "priority",
      title: "Category",
      name: "Category",
      dataSource: [
        { value: "urgent", text: "Urgent", color: "orange" },
        { value: "highpriority", text: "High Priority", color: "blue" },
        { value: "lowpriority", text: "Low Priority", color: "green" }
      ]
    }],
    template: $("#card-template").html(),
    dataSource: [
      { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", priority: "urgent" },
      { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", priority: "urgent" },
      { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", priority: "highpriority" },
      { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", priority: "lowpriority" },
      { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", priority: "lowpriority" }
    ],
    columns: [
      { text: "Doing", status: "doing" },
      { text: "Backlog", status: "backlog" },
      { text: "Done", status: "done" }
    ]
  });
</script>

resources.title

String

The user friendly title of the resource displayed in the TaskBoard edit form. If not set the value of the field option is used.

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

<script id="card-template" type="text/x-kendo-template">
      <div class="template-container">
          <div class="template-header">
              <p><a class="k-card-title k-link" href="" data-command="SelectCardCommand">#: title #</a></p>
          </div>
          <p>#: description#</p>
          <p>#:resources.priority.title#: <span style="color:#:resources.priority.color#">#:resources.priority.text#<span></p>
      </div>
  </script>

<script>
  $("#taskBoard").kendoTaskBoard({
    resources: [{
      field: "priority",
      title: "Category",
      name: "Category",
      dataSource: [
        { value: "urgent", text: "Urgent", color: "orange" },
        { value: "highpriority", text: "High Priority", color: "blue" },
        { value: "lowpriority", text: "Low Priority", color: "green" }
      ]
    }],
    template: $("#card-template").html(),
    dataSource: [
      { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", priority: "urgent" },
      { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", priority: "urgent" },
      { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", priority: "highpriority" },
      { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", priority: "lowpriority" },
      { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", priority: "lowpriority" }
    ],
    columns: [
      { text: "Doing", status: "doing" },
      { text: "Backlog", status: "backlog" },
      { text: "Done", status: "done" }
    ]
  });
</script>

resources.valuePrimitive

Boolean

Set to false if the TaskBoard event field specified via the field option contains a resource data item. By default the TaskBoard expects that field to contain a primitive value (string, number) which corresponds to the "value" of the resource (specified via dataValueField).

Default: true

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

<script id="card-template" type="text/x-kendo-template">
    <div class="template-container">
        <div class="template-header">
            <p><a class="k-card-title k-link" href="" data-command="SelectCardCommand">#: title #</a></p>
        </div>
        <p>#: description#</p>
        <p>#:resources.priority.title#: <span style="color:#:resources.priority.color#">#:resources.priority.text#<span></p>
    </div>
</script>

<script>
  $("#taskBoard").kendoTaskBoard({
    resources: [{
      field: "priority",
      valuePrimitive: false,
      dataValueField: "type",
      title: "Priority",
      dataSource: [
        { type: "urgent", text: "Urgent", color: "orange" },
        { type: "highpriority", text: "High Priority", color: "blue" },
        { type: "lowpriority", text: "Low Priority", color: "green" }
      ]
    }],
    template: $("#card-template").html(),
    dataCategoryField: "category",
    dataSource: [
      { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", priority: { type: "urgent" } },
      { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", priority: { type: "urgent" }  },
      { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", priority: { type: "highpriority" }  },
      { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", priority: { type: "lowpriority" } },
      { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", priority: { type: "lowpriority" } }
    ],
    columns: [
      { text: "Doing", status: "doing" },
      { text: "Backlog", status: "backlog" },
      { text: "Done", status: "done" }
    ]
  });
</script>