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

Messages

configuration

The configuration of the Gantt messages. Use this option to customize or localize the Gantt messages.

messages

Object
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
    dataSource: [
        { id: 1, title: "Task 1", start: new Date("2023/1/1"), end: new Date("2023/1/5") }
    ],
    messages: {
        actions: {
            addChild: "Add Child Task",
            append: "Add Task",
            insertAfter: "Add Below",
            insertBefore: "Add Above",
            pdf: "Export to PDF"
        },
        editor: {
            addNew: "Add new task",
            name: "Title",
            percentCompleteHint: "% complete"
        }
    }
});
</script>

The configuration of the Gantt action messages. Use this option to customize or localize the Gantt action messages.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
    dataSource: [
        { id: 1, title: "Task 1", start: new Date("2023/1/1"), end: new Date("2023/1/5") }
    ],
    messages: {
        actions: {
            addChild: "Add Child Task",
            append: "Add Task",
            insertAfter: "Add Below",
            insertBefore: "Add Above",
            pdf: "Export to PDF"
        }
    }
});
</script>

The text similar to "Cancel" displayed in Gantt.

Default: "Cancel"

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
     id: 1,
     orderId: 0,
     parentId: null,
     title: "Task1",
     start: new Date("2014/6/17 9:00"),
     end: new Date("2014/6/17 11:00")
  }],
  messages: {
    cancel: "Undo"
  }
});
</script>

The text similar to "Are you sure you want to delete this dependency?" displayed in Gantt dependency delete dialog.

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

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
     id: 1,
     orderId: 0,
     parentId: null,
     title: "Task1",
     start: new Date("2014/6/17 9:00"),
     end: new Date("2014/6/17 10:00")
  }, {
     id: 2,
     orderId: 0,
     parentId: null,
     title: "Task2",
     start: new Date("2014/6/17 11:00"),
     end: new Date("2014/6/17 12:00")
  }],
  dependencies: [{
     id: 1,
     type: 1,
     predecessorId: 1,
     successorId: 2
  }],
  messages: {
    deleteDependencyConfirmation: "Proceed with dependency deletion?"
  }
});
</script>

The text similar to "Delete dependency" displayed in Gantt dependency delete dialog title.

Default: "Delete dependency"

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
     id: 1,
     orderId: 0,
     parentId: null,
     title: "Task1",
     start: new Date("2014/6/17 9:00"),
     end: new Date("2014/6/17 10:00")
  }, {
     id: 2,
     orderId: 0,
     parentId: null,
     title: "Task2",
     start: new Date("2014/6/17 11:00"),
     end: new Date("2014/6/17 12:00")
  }],
  dependencies: [{
     id: 1,
     type: 1,
     predecessorId: 1,
     successorId: 2
  }],
  messages: {
    deleteDependencyWindowTitle: "Delete dependency?"
  }
});
</script>

The text similar to "Are you sure you want to delete this task?" displayed in Gantt task delete dialog.

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

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
     id: 1,
     orderId: 0,
     parentId: null,
     title: "Task1",
     start: new Date("2014/6/17 9:00"),
     end: new Date("2014/6/17 11:00")
  }],
  messages: {
    deleteTaskConfirmation: "Proceed with task deletion?"
  }
});
</script>

The text similar to "Delete task" displayed in Gantt task delete dialog title.

Default: "Delete task"

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
     id: 1,
     orderId: 0,
     parentId: null,
     title: "Task1",
     start: new Date("2014/6/17 9:00"),
     end: new Date("2014/6/17 11:00")
  }],
  messages: {
    deleteTaskWindowTitle: "Delete task?"
  }
});
</script>

The text similar to "Delete" displayed in Gantt.

Default: "Delete"

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
     id: 1,
     orderId: 0,
     parentId: null,
     title: "Task1",
     start: new Date("2014/6/17 9:00"),
     end: new Date("2014/6/17 11:00")
  }],
  messages: {
    destroy: "Destroy"
  }
});
</script>

The configuration of the Gantt editor messages. Use this option to customize or localize the Gantt editor messages.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
    dataSource: [
        { id: 1, title: "Task 1", start: new Date("2023/1/1"), end: new Date("2023/1/5") }
    ],
    messages: {
        editor: {
            editorTitle: "Task Editor",
            start: "Start Date",
            end: "End Date",
            title: "Task Title",
            percentComplete: "Progress"
        }
    }
});
</script>

The configuration of the Gantt messages for Planned tasks.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
    dataSource: [
        { id: 1, title: "Task 1", start: new Date("2023/1/1"), end: new Date("2023/1/5") }
    ],
    messages: {
        plannedTasks: {
            switchText: "Show Planned Tasks",
            offsetTooltipAdvanced: "Completed earlier",
            offsetTooltipDelay: "Completed later"
        }
    }
});
</script>

The text similar to "Save" displayed in Gantt.

Default: "Save"

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
     id: 1,
     orderId: 0,
     parentId: null,
     title: "Task1",
     start: new Date("2014/6/17 9:00"),
     end: new Date("2014/6/17 11:00")
  }],
  messages: {
    save: "Update"
  }
});
</script>

The aria-label of the View select element.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
     id: 1,
     orderId: 0,
     parentId: null,
     title: "Task1",
     start: new Date("2014/6/17 9:00"),
     end: new Date("2014/6/17 11:00")
  }],
  messages: {
    selectView: "Custom"
  }
});
</script>

The configuration of the Gantt view messages. Use this option to customize or localize the Gantt view messages.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
    dataSource: [
        { id: 1, title: "Task 1", start: new Date("2023/1/1"), end: new Date("2023/1/5") }
    ],
    messages: {
        views: {
            day: "Daily View",
            week: "Weekly View",
            month: "Monthly View",
            year: "Yearly View"
        }
    }
});
</script>