previewPane.buttons Array
Defines a list of buttons rendering in the footer pane.
Example
<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
previewPane: {
buttons: [
"edit",
"delete",
{ name: "showDetails", text: "Details", command: "MyCustomCommand", primary: false }
]
},
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" }
]
});
kendo.ui.taskboard.commands["MyCustomCommand"] = kendo.ui.taskboard.Command.extend({
exec: function () {
var taskboard = this.taskboard;
var options = this.options;
var defaults = JSON.parse(options.value);
var card = options.card;
var cardElm = options.cardElement;
var column = options.column;
var columnElm = options.columnElement;
kendo.alert(kendo.format('<p>Title: {0}</p>' +
'<p>Description: {1}</p>' +
'<p>Status: {2}</p>' +
'<p>Category: {3}</p>' +
'<p>Order: {4}</p>',
card.title, card.description,
card.status, card.category, card.order));
}
});
</script>