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

ColumnSettings

configuration

Defines the settings for the columns.

columnSettings

Object

<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" }
    ],
    columnSettings: {
      width: 200
    }
  });
</script>

columnSettings.buttons

Array

Defines the list of buttons rendered in the column.

<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" }
    ],
    columnSettings: {
      buttons: ["addCard"]
    }
  });
</script>

columnSettings.dataOrderField

String

The field used to order columns (number based). Automatically adds sorting to the columns DataSource instance.

If not set, columns will be rendered in the order they are fetched. And ordering will not be applied to the DataSource and respectively, not synced with the remote data source.

<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", Order: 1 },
      { Text: "Backlog", Status: "backlog", Order: 0},
      { Text: "Done", Status: "done", Order: 2 }
    ],
    columnSettings: {
      dataStatusField: "Status",
      dataTextField: "Text",
      dataOrderField: "Order"
    }
  });
</script>

columnSettings.dataStatusField

String

The field of the data item that provides the status of the column. Mapped with the status of the cards.

Default: "status"

<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", Order: 1 },
      { Text: "Backlog", Status: "backlog", Order: 0},
      { Text: "Done", Status: "done", Order: 2 }
    ],
    columnSettings: {
      dataStatusField: "Status",
      dataTextField: "Text",
      dataOrderField: "Order"
    }
  });
</script>

columnSettings.dataTextField

String

The text field of the column.

Default: "text"

<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", Order: 1 },
      { Text: "Backlog", Status: "backlog", Order: 0},
      { Text: "Done", Status: "done", Order: 2 }
    ],
    columnSettings: {
      dataStatusField: "Status",
      dataTextField: "Text",
      dataOrderField: "Order"
    }
  });
</script>

columnSettings.template

String|Function

Controls the rendering of the column header. In the template context the buttons field provides the HTML for the buttons of the column.

<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" }
    ],
    columnSettings: {
      template: '<div class="k-taskboard-column-header-actions" style="background-color: lightgray">#=buttons#</div>' +
                '<span class="k-spacer"></span>' +
                '<div class="k-taskboard-column-header-text k-text-ellipsis">#:text#(#:status#)</div>'
    }
  });
</script>

columnSettings.width

String|Number

Configures the width of the columns

<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" }
    ],
    columnSettings: {
      width: 200
    }
  });
</script>

Related Members