Skip to main content

controls

Description​

Optional. A set of configurations that defines one or several custom controls

info

The controls property allows you to create custom Editbar controls based on Basic controls and/or Complex controls. Use the properties property to apply the custom control(s) to the needed elements (shapes, groups, swimlanes, etc.).

Refer to the Editbar configuration guide for more information about configuring!

important

We do not recommend you to redefine default controls when creating a custom control. Use individual name for each custom control!

Usage​

controls?: {
    [type: string]: object, // custom control
};

Parameters​

controls: {
      estimate: { /*...*/ }, // create new "estimate" control with custom configurations
      // another control
}

Example​

const editor = new dhx.DiagramEditor("editor_container", {
    type: "org",
    view: {
        // editbar: true, // displays default Editbar
        // or configure Editbar via object
        editbar: {
            css: "custom_css",
            show: true,
            width: 300,
            properties: {
                $shape: [
                    { type: "estimate" }, // apply the "estimate" custom control
                    { type: "name" } // apply the "name" custom control
                ]
            },
            controls: {
                // create the "estimate" custom control
                estimate: { 
                    type: "fieldset",
                    label: "Time estimate",
                    rows: [
                        { type: "datepicker", key: "date_start", label: "Date start" },
                        { type: "datepicker", key: "date_end", label: "Date end" }
                    ]
                },
                // create the "name" custom control
                name: { type: "input", label: "Name", key: "name" }
            }
        }
    }
});

Change log: The property was added in v6.0

Related article: Editbar configuration

Related sample: Diagram Editor. Default mode. PERT сhart with the legend