ZK Component Reference/Layouts/Organigram

Organigram

• Java API: Organigram
• JavaScript API: Organigram

[ ZKEE ]
[ Since 8.6.0 ]

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.

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>

	<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 clicking it or by programing:

Organigram.setSelectedItem(Orgitem) , Orgitem.setSelected(Boolean).

When a Orgitem is selected, the onSelect event will sent back to the server to notify the application, you can call Organigram.getSelectedItem() to get the selected Orgitem.

Example:

	<organigram 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>

Open

Each Orgitem contains the open property which is used to control whether to display its child items. The default value is true. By setting this property to false, you are able to control what part of the Organigram is invisible.

When a user clicks on the +/- button, he opens the Orgitem and makes its children visible. The onOpen event is then sent to the server to notify the application.

Example:

	<organigram>
		<orgchildren>
			<orgitem label="Item1" open="false" onOpen="createChild()">
				<orgchildren/>
			</orgitem>
		</orgchildren>
		<zscript><![CDATA[
			void createChild() {
				if (event.isOpen())
					new Orgitem("new item").setParent(self.getOrgchildren());
			}
		]]></zscript>
	</organigram>

Supported Events

Name	Event Type
onSelect	Event: SelectEvent Notifies one that the user has selected a new item in the organigram.

• Inherited Supported Events: XulElement

Supported Children

* Orgchildren

Version History

Version	Date	Content