Org Chart Editor

You can modify the arrangement of the Org Chart shapes and their content in the special editor mode. To initialize an org chart in this mode, use a separate instance called DiagramEditor.

The constructor of the editor doesn't differ much from that of the diagram. The constructor function takes as parameters either an HTML container or the document body, and a configuration object. It is obligatory to set the type:"org" config option in this object to initialize Org Chart editor:

var editor = new dhx.DiagramEditor(document.body, { type: "org" });

The editor is populated with data that has the same structure as the data of an Org Chart. Use the parse method to load data into the editor:

editor.parse(data);

Related sample:  Basic editor

Using editor with Org chart

It is possible to use the editor together with the org chart, e.g. create an application that will allow switching between the org chart and the editor views and saving changes made in the editor to the diagram.

See the related article for details.

Configuration properties

You can use the following properties specific for the Org Chart Editor in its configuration object:

  • type - (string) the type of the edited diagram, "org" to render an organization chart
  • shapeType - (string) the type of the shapes, "card" by default
  • showApply - (boolean) enables the Apply All button in the editor, true by default
  • gridStep - (number) sets the size of a grid cell that defines the step of moving a shape, 10 by default

Interface

The interface of an org chart in the editor mode consists of three parts:

  • the toolbar with buttons for controlling the editing process



    The toolbar can contain the following buttons:

    • the Reset Changes button that resets all the applied changes to the previous state;
    • the Apply All button. This button is shown by default and can be hidden via the showApply option. The button works in tandem with the AfterApply event and is useful if you want to apply changes made in the editor to the diagram. See the example;
    • the Reset and Apply buttons for resetting changes to the previous step or reverting them;
    • the Edit Mode button to hide and show the editor mode;
    • the Zoom group of buttons to zoom a diagram in the editor in and out;
  • the grid area for editing the diagram. It is an area intended for editing the org chart and its shapes. It allows setting exact position for the shapes;
  • the sidebar with a property sheet that provides fields for modifying values of the shapes' attributes.

Modes of Editing

Editing via the interface elements

You can drag shapes to place them on the desired positions relative to the root shape, or drag the root shape to move the whole diagram. In the editing mode each selected shape gets resizing handles. You can pull the handles of an editable shape to change its sizes.

When you click any shape, it becomes editable and gets a personal toolbar with editing options.

The toolbar allows:

  • adding a new child for the selected shape
  • deleting the selected shape (except for the root one)
  • choosing the mode of arranging children of the selected shape (vertical or horizontal)

Editing via the sidebar options

The sidebar of the editor allows adjusting the attributes of the shape:

  • modify the color of a shape header via the related colorpicker;

  • set the left and top offsets to define the position of a shape;

  • set the width and height of a shape;

  • edit the title (for the "img-card" type);

  • edit the text of a shape;

  • load an image for the card and update it (for the "img-card" type).
    An image is loaded from the computer and saved in the base64 format right into the data.

    Note that the size of an image shouldn't be bigger than 60x60 for correct rendering

    .

Editor API

The editor object owns individual methods, properties and events. There is a list of available methods and events applied to the editor object:

Methods

  • parse()

loads data into the editor from a local data source

The method takes as a parameter the data that should be parsed into the editor.

var data = [
    // shapes
    {
        "id": "1",
        "text": "Chairman & CEO",
        "title": "Henry Bennett",
        "img": "../common/img/avatar-1.png"
    },
    {
        "id": "2",
        "text": "Manager",
        "title": "Mildred Kim",
        "img": "../common/img/avatar-2.png"
    },
    {
        "id": "3",
        "text": "Technical Director",
        "title": "Jerry Wagner",
        "img": "../common/img/avatar-3.png"
    },
 
    // connectors
    { "id": "1-2", "from": "1", "to": "2", "type": "line" },
    { "id": "1-3", "from": "1", "to": "3", "type": "line" }
];
 
var editor = new dhx.DiagramEditor("editor_container", {type: "org"}); 
editor.parse(data);

You can load data in any supported data format. See the details in the parse article.

Related sample:  Basic editor

  • serialize()

serializes the data of the editor into an array of JSON objects

var data = editor.serialize();

The method returns an array of JSON objects for each shape and link from the editor data.

Related sample:  Live Org Chart edit

  • import()

imports data from an existing diagram into the editor

The method takes the diagram object as a parameter.

editor.import(diagram);

Related sample:  Live Org Chart edit

  • paint()

repaints the editor

editor.paint();

Events

  • ApplyButton

fires after the Apply All button has been clicked

editor.events.on("ApplyAll",function(){
    console.log("The changes are applied")
});
  • ResetButton

fires after the Reset Changes button has been clicked

editor.events.on("ResetButton",function(){
    console.log("The changes are reset")
});

Related sample:  Live Org Chart edit

Localization

It is possible to localize the interface of the Org Chart editor into a desired language. For this, you need to provide the corresponding locale settings via the dhx.i18n.setLocale method. The method takes two parameters: the diagram container and an object that contains rules of localization for a particular country.

dhx.i18n.setLocale("diagram", {
    applyAll: "Apply all",
    resetChanges: "Reset Changes",
    editCard: "Edit Card",
    color: "Color",
    position: "Position",
    size: "Size"
});

After that, you need to initialize the editor and check how the labels' names have changed.

var editor = new dhx.DiagramEditor(document.body, { 
    type: "org" 
    // other config options
});
Back to top