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

Editable

configuration

If set to false, the user will not be able to edit the data to which the OrgChart is bound. By default, editing is enabled.

The editable option can also be set to a JavaScript object (which represents the editing configuration).

In order for the edit operations to work correctly, configure the dataSource for CRUD operations.

editable

Boolean|Object

Default: true

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

<script>
    $("#orgchart").kendoOrgChart({
        editable: false,
        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>

editable.create

Boolean

Allows the user to create new items as children of existing ones. If set to false, creating new items will not be available in the item edit pop-up menu.

Default: true

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

<script>
    $("#orgchart").kendoOrgChart({
        editable: {
            create: false
        },
        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>

editable.destroy

Boolean

Allows the user to delete items. If set to false, delete item will not be available in the item edit pop-up menu.

Default: true

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

<script>
    $("#orgchart").kendoOrgChart({
        editable: {
            destroy: false
        },
        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>

editable.fields

Boolean

Allows the user to edit the title, name, and avatar of the item. If set to false, editing those fields will not be available in the pop-up editor of the widget.

Default: true

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

<script>
    $("#orgchart").kendoOrgChart({
        editable: {
            fields: false
        },
        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>

editable.form

Object

A kendo.ui.Form configuration object that allows customization of the Form on the pop-up editor.

Default: true

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

<script>
    $("#orgchart").kendoOrgChart({
        editable: {
            form: {
                items: [{
                    field: "title",
                    label: "Position",
                    editor: "AutoComplete"
                }]
            }
        },
        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>

Allows editing the structure (id/parentId relation). If the parentId has also configuration in the form configuration object, the editable.parent value will be taken into account. If set to false, editing the id/parentId relation will not be available.

Default: true

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

<script>
    $("#orgchart").kendoOrgChart({
        editable: {
            parent: false
        },
        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>