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

Messages

configuration

Provides configuration options for the messages present in the TaskBoard widget.

messages

Object

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

<script>
  $("#taskBoard").kendoTaskBoard({
    toolbar: [
      "addColumn",
      "myCustomButton", // Custom button
      "spacer",
      "search"
    ],
    messages: {
      myCustomButton: "Custom Button Text", // Text for custom buttons - mapped with their name field
      edit: "Edit",
      createNewCard: "Create new card",
      create: "Create",
      search: "Search",
      previewCard: "Preview card",
      addCard: "Add card",
      editCard: "Edit card",
      deleteCard: "Delete Card",
      addColumn: "Add column",
      editColumn: "Edit column",
      deleteColumn: "Delete column",
      close: "Close",
      cancel: "Cancel",
      "delete": "Delete",
      saveChanges: "Save changes",
      title: "Title:",
      description: "Description:",
      newColumn: "New column",
      deleteColumnConfirm: "Are you sure you want to delete this column?",
      deleteCardConfirm: "Are you sure you want to delete this card?"
    },
    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" }
    ]
  });
</script>

messages.addCard

String

Specifies text to be rendered for the "Add card" message.

Default: "Add card"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        addCard: "Create New Task"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.addColumn

String

Specifies text to be rendered for the "Add column" message.

Default: "Add column"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        addColumn: "Create New Column"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.cancel

String

Specifies text to be rendered for the "Cancel" message.

Default: "Cancel"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        cancel: "Discard Changes"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.close

String

Specifies text to be rendered for the "Close" message.

Default: "Close"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        close: "Exit"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.create

String

Specifies text to be rendered for the "Create" message.

Default: "Create"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        create: "Add Task"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.createNewCard

String

Specifies text to be rendered for the "Create new card" message.

Default: "Create new card"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        createNewCard: "Add New Task Card"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.delete

String

Specifies text to be rendered for the "Delete" message.

Default: "Delete"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        "delete": "Remove"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.deleteCard

String

Specifies text to be rendered for the "Delete Card" message.

Default: "Delete Card"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        deleteCard: "Remove Task"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.deleteCardConfirm

String

Specifies text to be rendered for the "Are you sure you want to delete this card?" message.

Default: "Are you sure you want to delete this card?"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        deleteCardConfirm: "Do you really want to remove this task permanently?"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.deleteColumn

String

Specifies text to be rendered for the "Delete column" message.

Default: "Delete column"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        deleteColumn: "Remove Column"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.deleteColumnConfirm

String

Specifies text to be rendered for the "Are you sure you want to delete this column?" message.

Default: "Are you sure you want to delete this column?"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        deleteColumnConfirm: "Do you really want to remove this column permanently?"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.description

String

Specifies text to be rendered for the "Description:" message.

Default: "Description:"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        description: "Task Details:"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.edit

String

Specifies text to be rendered for the "Edit" message.

Default: "Edit"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        edit: "Modify Card"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.editCard

String

Specifies text to be rendered for the "Edit card" message.

Default: "Edit card"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        editCard: "Modify Task"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.editColumn

String

Specifies text to be rendered for the "Edit column" message.

Default: "Edit column"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        editColumn: "Modify Column"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.newColumn

String

Specifies text to be rendered for the "New column" message.

Default: "New column"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        newColumn: "Add Status Column"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.previewCard

String

Specifies text to be rendered for the "Preview card" message.

Default: "Preview card"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        previewCard: "View Card Details"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.saveChanges

String

Specifies text to be rendered for the "Save changes" message.

Default: "Save changes"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        saveChanges: "Apply Changes"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.search

String

Specifies text to be rendered for the "Search" message.

Default: "Search"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        search: "Find Tasks"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

messages.title

String

Specifies text to be rendered for the "Title:" message.

Default: "Title:"

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    messages: {
        title: "Task Name:"
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>