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

Messages

configuration

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

messages

Object
<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            label: "Org label",
            edit: "Modify",
            create: "New",
            destroy: "Remove",
            destroyContent: "Remove this item and all its children?",
            destroyTitle: "Remove item",
            cancel: "Skip",
            save: "OK",
            menuLabel: "Modify menu",
            uploadAvatar: "Upload new image",
            parent: "Related to",
            name: "Full name",
            title: "Position",
            none: "--Select--",
            expand: "open",
            collapse: "close"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the cancel action button text.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            cancel: "Skip"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used to label the Collapse button.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            collapse: "close"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the create action in the edit pop-up Menu.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            create: "New"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the destroy action in the edit pop-up Menu.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            destroy: "Remove",
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the destroy confirmation pop-up content.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            destroyContent: "Remove this item and all its children?"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the destroy confirmation pop-up title.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            destroyTitle: "Remove item"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the edit action in the edit pop-up Menu.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            edit: "Modify"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used to label the Expand button.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            expand: "open"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The label that will be used for the aria-label value of the OrgChart widget.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            label: "Org label"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the aria-label of the edit pop-up Menu.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            menuLabel: "Modify menu"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the "name" text.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            name: "Full name",
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used in the Parent DropDownList editor to specify the null option (no parent).

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            none: "--Select--"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the "parent" text.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            parent: "Related to"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for save action button text.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            save: "OK"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the "title" text.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            title: "Full name",
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>

The message that will be used for the avatar Upload's label.

<div id="orgchart"></div>

<script>
    $("#orgchart").kendoOrgChart({
        messages: {
            uploadAvatar: "Upload new image"
        },
        dataSource: [
            { id: 1, name: "Jane", title: "Boss", expanded: true },
            { id: 2, name: "John", title: "Lead", expanded: true, parentId: 1 },
            { id: 3, name: "Jill", title: "Worker", expanded: true, parentId: 2 },
            { id: 4, name: "James", title: "Worker", expanded: true, parentId: 2 },
        ]
    });
</script>