Organigram

CE
PE
EE

since 8.6

Employment/Purpose

Organigram is a component for showing organizational chart by using tree data structure, it also support TreeModel to hold data, Organigram only accept one Orgchildren as child, developers can put Orgchildren, Orgitem and Orgnode in Organigram to display data.

Organigram supports Client Render on Demand

Browser Support

  • For IE, this component only supports 11+, it is based on CSS Flexbox, please check browser compatibility before using it.

Example

    <organigram width="600px">
        <orgchildren>
            <orgitem label="Item1">
                <orgchildren>
                    <orgitem label="Item2">
                        <orgchildren>
                            <orgitem label="Item3"/>
                            <orgitem label="Item4">
                                <orgchildren>
                                    <orgitem label="Item5"/>
                                </orgchildren>
                            </orgitem>
                        </orgchildren>
                    </orgitem>
                    <orgitem label="Item6">
                        <orgchildren>
                            <orgitem label="Item7"/>
                            <orgitem label="Item8"/>
                        </orgchildren>
                    </orgitem>
                </orgchildren>
            </orgitem>
        </orgchildren>
    </organigram>

Model-Driven Display

    <zscript><![CDATA[
        DefaultTreeNode root = new DefaultTreeNode(null, new DefaultTreeNode[]{
            new DefaultTreeNode("Item1", new DefaultTreeNode[]{
                new DefaultTreeNode("Item2"), new DefaultTreeNode("Item3"), new DefaultTreeNode("Item4")
            })
        });
        DefaultTreeModel model = new DefaultTreeModel(root);
        model.addOpenPath(new int[]{0});
    ]]></zscript>
    <organigram width="600px" model="${model}"/>

Selection

Organigram supports single selection, Orgitem can be selected by users clicking or by programming:

org.zkoss.zkmax.zul.Organigram#setSelectedItem(org.zkoss.zkmax.zul.Orgitem) , org.zkoss.zkmax.zul.Orgitem#setSelected(java.lang.Boolean).

When an Orgitem is selected, the onSelect event will sent back to the server to notify the application, you can call org.zkoss.zkmax.zul.Organigram#getSelectedItem() to get the selected Orgitem.

Example:

    <organigram width="600px" onSelect="Clients.log(self.getSelectedItem().getLabel())">
        <orgchildren>
            <orgitem label="Item1">
                <orgchildren>
                    <orgitem label="Item2"/>
                    <orgitem label="Item3" selected="true"/>
                    <orgitem label="Item4"/>
                </orgchildren>
            </orgitem>
        </orgchildren>
    </organigram>

Custom Orgitem

you can also render Organigram with your customized Renderer and Template, please refer to:

Organigram Template

Organigram Renderer

Supported Events

Name

Event Type

onSelect

Event: [org.zkoss.zk.ui.event.SelectEvent](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/event/SelectEvent.html) Notifies one that the user has selected a new item in the organigram.

Supported Children

* Orgchildren

Version History

Version Date Content