How To Add a Custom Command to Display Comments in TaskBoard
Environment
Product | Progress® Kendo UI® TaskBoard for jQuery |
Description
How can I add a custom command that will enable the user to add comments in the TaskBoard Cards?
Solution
- In the
cardMenu
define a button for the custom command. - Add comments list as a resource.
- Extend the TaskBoard commands and implement adding of new items to the commands resources.
<div id="taskBoard"></div>
<script>
var commentsDS = new kendo.data.DataSource({
data: [{ id: 1, text: "My Comment", author: "Greg" }]
});
var UNIQUE_ID = 1;
$("#taskBoard").kendoTaskBoard({
dataOrderField: "order",
dataSource: [
{ id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "red", comments: [ 1 ] },
{ id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "red", comments: [ ] },
{ id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "green", comments: [ ] },
{ id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "green", comments: [ ] },
{ id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "blue", comments: [ ] }
],
columns: [
{ text: "Backlog", status: "backlog" },
{ text: "Doing", status: "doing" },
{ text: "Done", status: "done" }
],
cardMenu: [ { name: "CustomButton", text: "Add Comment", icon: "comment", command: "AddCommentCommand" } ],
previewPane: {
template: "<p>#:description#</p>" +
"#if(resources.comments) {#" +
"<p>#:resources.comments[0].title#:</p>" +
"# for (var i = 0; i < resources.comments.length; i++) { " +
"var comment = resources.comments[i];" +
"var item = commentsDS.get(comment.value);" +
"var author = item.author;#" +
"<hr/><p><strong>#:author#:</strong> <span>#:comment.text#</span></p>" +
"# } }# </p>"
},
resources: [{
field: "comments",
multiple: true,
dataValueField: "id",
dataTextField: "text",
title: "Comments",
dataSource: commentsDS
}],
});
kendo.ui.taskboard.commands["AddCommentCommand"] = kendo.ui.taskboard.Command.extend({
exec: function () {
var taskboard = this.taskboard;
var options = this.options;
var card = options.card;
var cardElm = options.cardElement;
var column = options.column;
var columnElm = options.columnElement;
var author, comment;
var promptForComment = function () {
kendo.prompt("Enter your comment", "My Comment")
.done(function(data){
comment = data;
var newComment = commentsDS.add({ id: UNIQUE_ID, text: comment, author: author });
UNIQUE_ID += 1;
card.comments.push(newComment.id);
taskboard.previewCard(cardElm);
});
};
var promptForName = function () {
kendo.prompt("Enter your name", "Greg")
.done(function(data){
author = data;
promptForComment();
});
};
promptForName();
}
});
</script>