Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkNS Staff Editor Workgroups
31guest66.249.83.7726hg0n7Nov 16, 2016 12:10:29 PMlinkresources
index.zulzul<zk>
<style dynamic="true">.z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover { background-color:transparent; border:0 none; } .actionsToolBar { background-color:transparent; color:transparent; padding-top:0px; background-color:transparent; border:0 none; border-bottom: 0 none; } .p-vista .z-panel-children { background-color: #008BB6; border-bottom: 0 none; }</style>
<div height="720px" width="100%">
<hlayout>
<include src="tree.zul"/>
<div width="1000px">
<vlayout>
<include src="attributes.zul"/>
<div>
<tabbox id="tb" height="304px" width="1000px">
<tabs id="tabs">
<tab label="Members (4)" />
<tab label="Positions (5)" />
<tab label="Leaders (1)" />
<tab label="Notes (2)" />
</tabs>
<tabpanels>
<tabpanel>
<div width="100%">
<grid>
<columns>
<column width="24px"></column>
<column>Member Name</column>
<column width="100px">Job Title</column>
<column width="50px">Primary</column>
<column width="50px">FTE</column>
<column width="90px">Valid From</column>
<column width="90px">Valid Until</column>
<column width="85px">Actions</column>
</columns>
<rows sclass="narrow">
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Jack Seller" />
<label value="Consultant" />
<label value="Yes" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value=" " />
<cell>
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit Position Details" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Remove employee from postion" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</cell>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Jane Dealer" />
<label value="Consultant" />
<label value="Yes" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value=" " />
<cell>
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit Position Details" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Remove employee from postion" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</cell>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Mary Poppins" />
<label value="Consultant" />
<label value="Yes" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value=" " />
<cell>
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit Position Details" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Remove employee from postion" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</cell>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Luke Skywalker" />
<label value="Consultant" />
<label value="Yes" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value=" " />
<cell>
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit Position Details" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Remove employee from postion" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</cell>
</row>
<row>
<image src="http://www.antenneduesseldorf.de/web/media/standards/icon-profile.png" />
<label value="Frank Former" />
<label value="Consultant" />
<label value=" N/A" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value="2016-JAN-11" />
<cell>
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit Position Details" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Remove employee from postion" disabled="true" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</cell>
</row>
<row>
<cell colspan="8" align="left">
<checkbox label="Hide History" />
</cell>
</row>
</rows>
</grid>
</div>
</tabpanel>
<tabpanel>
<div width="100%">
<grid>
<columns>
<column width="24px"></column>
<column width="200px">Job Title</column>
<column width="100px">Office</column>
<column width="50px">FTE</column>
<column width="90px">Opened From</column>
<column width="90px">Opened Until</column>
<column width="100%">Occupied by</column>
<column width="140px">Actions</column>
</columns>
<rows sclass="narrow">
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Consultant" />
<label value="Pardubice [CZ]" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value=" " />
<label value="Jack Seller" />
<hbox>
<toolbarbutton image="http://findicons.com/files/icons/2564/max_mini_icon/16/user_add.png" tooltiptext="Asign Details" />
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit Position Details" />
<toolbarbutton image="http://icons.iconarchive.com/icons/icons8/windows-8/16/Healthcare-Clone-icon.png" tooltiptext="Clone position" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Remove employee from postion" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" disabled="true" />
</hbox>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Consultant" />
<label value="Pardubice [CZ]" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value=" " />
<label value="Jane Dealer" />
<hbox>
<toolbarbutton image="http://findicons.com/files/icons/2564/max_mini_icon/16/user_add.png" tooltiptext="Asign Details" />
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit Position Details" />
<toolbarbutton image="http://icons.iconarchive.com/icons/icons8/windows-8/16/Healthcare-Clone-icon.png" tooltiptext="Clone position" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Remove employee from postion" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" disabled="true" />
</hbox>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Consultant" />
<label value="Pardubice [CZ]" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value=" " />
<label value="Mary Poppins" />
<hbox>
<toolbarbutton image="http://findicons.com/files/icons/2564/max_mini_icon/16/user_add.png" tooltiptext="Asign Details" />
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit Position Details" />
<toolbarbutton image="http://icons.iconarchive.com/icons/icons8/windows-8/16/Healthcare-Clone-icon.png" tooltiptext="Clone position" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Remove employee from postion" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" disabled="true" />
</hbox>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Consultant" />
<label value="Zug [CH]" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value=" " />
<label value="Luke Skywalker" />
<hbox>
<toolbarbutton image="http://findicons.com/files/icons/2564/max_mini_icon/16/user_add.png" tooltiptext="Asign Details" />
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit Position Details" />
<toolbarbutton image="http://icons.iconarchive.com/icons/icons8/windows-8/16/Healthcare-Clone-icon.png" tooltiptext="Clone position" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Remove employee from postion" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" disabled="true" />
</hbox>
</row>
<row style="background:#9CB4EB;">
<image src="http://www.antenneduesseldorf.de/web/media/standards/icon-profile.png" />
<label value="Consultant" />
<label value="Pardubice [CZ]" />
<label value="1.0" />
<label value="2015-JAN-01" />
<label value=" " />
<label value="- Vacant - " />
<hbox>
<toolbarbutton image="http://findicons.com/files/icons/2564/max_mini_icon/16/user_add.png" tooltiptext="Asign Details" />
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit Position Details" />
<toolbarbutton image="http://icons.iconarchive.com/icons/icons8/windows-8/16/Healthcare-Clone-icon.png" tooltiptext="Clone position" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Remove employee from postion" disabled="true" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<cell colspan="7" align="left">
<checkbox label="Hide Assigned" />
</cell>
<cell colspan="1" align="right">
<button label="Open Position" image="http://quan-li-resort.googlecode.com/svn/QLKS/QLKS/Images/addIcon.gif" width="110px" />
</cell>
</row>
</rows>
</grid>
</div>
</tabpanel>
<tabpanel>
<div width="100%">
<grid>
<columns>
<column width="24px"></column>
<column>Leader Name</column>
<column width="50px">Primary</column>
<column width="150px">Assigned From</column>
<column width="150px">Assigned Until</column>
<column width="80px">Actions</column>
</columns>
<rows sclass="narrow">
<row>
<image src="http://www.antenneduesseldorf.de/web/media/standards/icon-profile.png" />
<label value="Bob Builder" />
<label value="Yes" />
<label value="2015-JAN-01" />
<label value="2015-JUL-20" />
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit History" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" disabled="true" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<image src="http://www.antenneduesseldorf.de/web/media/standards/icon-profile.png" />
<label value="Sue Second" />
<label value="No" />
<label value="2015-APR-21" />
<label value="2015-JUL-20" />
<hbox>
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit History" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" disabled="true" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<image src="http://findicons.com/files/icons/1686/led/16/user_silhouette.png" />
<label value="Sue Second" />
<label value="Yes" />
<label value="2015-JUL-21" />
<label value=" - " />
<hbox class="actionsToolBar">
<toolbarbutton image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" tooltiptext="Edit History" />
<toolbarbutton image="http://fast1.onesite.com/resources/images/icons/16-removeUser.png?ver=14.07.30" tooltiptext="Unassign" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Remove" />
</hbox>
</row>
<row>
<cell colspan="3" align="left">
<checkbox label="Hide History" />
</cell>
<cell colspan="3" align="right">
<button label="Add Leader" image="http://quan-li-resort.googlecode.com/svn/QLKS/QLKS/Images/addIcon.gif" width="110px" />
</cell>
</row>
</rows>
</grid>
</div>
</tabpanel>
<tabpanel>
<div width="100%">
<grid>
<columns>
<column width="100%">Note</column>
<column width="120px">Author</column>
<column width="50px">Public</column>
<column width="120px">Created</column>
<column width="120px">Last Edit</column>
<column width="60px">Actions</column>
</columns>
<rows sclass="narrow">
<row>
<textbox rows="4" value="orem ipsum dolor sit amet, nullam complectitur nec id, in prima omnesque quaerendum vim. Velit nemore deserunt ei cum, debet nonumy eam te. Veri tempor dignissim ei usu. Ei odio tale option sit, molestie complectitur consequuntur in est, alia cibo integre ius te." width="100%" readonly="true" />
<cell align="left" valign="top">
<label value="Barbara Connanie" />
</cell>
<cell align="center" valign="top">
<checkbox disabled="true" />
</cell>
<cell align="left" valign="top">
<label value="2014-JAN-05 11:20" />
</cell>
<cell align="left" valign="top">
<label value="2015-APR-20 16:47" />
</cell>
<cell align="right" valign="top">
<hbox>
<toolbarbutton image="http://icons.iconseeker.com/png/fullsize/aspnet/edit-9.png" tooltiptext="Edit Details" disabled="true" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Delete" disabled="true" />
</hbox>
</cell>
</row>
<row>
<textbox rows="4" value="Some remarks about the emoloyee added by the user Dan Brown. Maybe the employee has something to do with Da Vinci. Maybe he is coder or something like that. We shall be aware about him." width="100%" readonly="true" />
<cell align="left" valign="top">
<label value="Dan Brown" />
</cell>
<cell align="center" valign="top">
<checkbox value="true" />
</cell>
<cell align="left" valign="top">
<label value="2014-JAN-01 11:20" />
</cell>
<cell align="left" valign="top">
<label value="2015-JUL-20 16:47" />
</cell>
<cell align="right" valign="top">
<hbox>
<toolbarbutton image="http://icons.iconseeker.com/png/fullsize/aspnet/edit-9.png" tooltiptext="Edit Details" />
<toolbarbutton image="http://www.stmarks.net/stmsys/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif" tooltiptext="Delete" />
</hbox>
</cell>
</row>
<row>
<cell align="right" valign="bottom" colspan="6">
<button label="Add Note" image="http://quan-li-resort.googlecode.com/svn/QLKS/QLKS/Images/addIcon.gif" />
</cell>
</row>
</rows>
</grid>
</div>
</tabpanel>
</tabpanels>
</tabbox>
<div height="10px" width="100%"></div>
<div align="right" height="20" width="1000px">
<button label="Cancel Changes" image="http://www.veryicon.com/icon/ico/System/Silk/cancel.ico" />
<button label="Submit Changes" image="https://www.w3.org/Amaya/images/floppy.gif" />
</div>
</div>
</vlayout>
</div>
</hlayout>
</div>
</zk>TestComposer.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
public class TestComposer extends GenericForwardComposer{
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
public void onClick$btn(Event e) throws InterruptedException{
Messagebox.show("Hi btn");
}
}
tree.zulzul<div width="400px">
<style>.h-inline-block { display: inline-block; _display: inline; }</style>
<tree id="tree" height="700px">
<treecols>
<treecol label="Organisation Units" />
<treecol label="Unit Type" width="100px" />
<treecol label="Mem./Pos." width="70px" align="center" />
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell>
<image src="http://icons.iconarchive.com/icons/custom-icon-design/mono-business/16/company-building-icon.png" />NonStop Recruitment</treecell>
<treecell label="Company" />
<treecell label="0 / 0" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Board" />
<treecell label="Top Management" />
<treecell label="4 / 5" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Sales" />
<treecell label="Department" />
<treecell label="0 / 0" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Pharma" />
<treecell label="Sales Division" />
<treecell label="0 / 0" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Helena's Team" />
<treecell label="Sales Team" />
<treecell label="4 / 4" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Social" />
<treecell label="Sales Division" />
<treecell label="0 / 0" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Alice's Team" />
<treecell label="Sales Team" />
<treecell label="4 / 4" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Mark's Team" />
<treecell label="Sales Team" />
<treecell label="4 / 4" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Medical Devices" />
<treecell label="Sales Division" />
<treecell label="0 / 0" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Bob's Team" />
<treecell label="Sales Team" />
<treecell label="4 / 5" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Digital" />
<treecell label="Sales Division" />
<treecell label="0 / 0" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Helena's Team" />
<treecell label="Sales Team" />
<treecell label="4 / 4" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Finance" />
<treecell label="Department" />
<treecell label="0 / 0" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Accounting" />
<treecell label="Backoffice Team" />
<treecell label="7 / 10" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="Operations" />
<treecell label="Department" />
<treecell label="0 / 0" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="IT" />
<treecell label="Backoffice Team" />
<treecell label="3 / 3" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell>Unassigned
<image src="http://icons.iconarchive.com/icons/yusuke-kamiyamane/fugue/16/user-silhouette-question-icon.png" /></treecell>
<treecell label="Auxilliary Team" />
<treecell label="3 / 3" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell>
<image src="http://icons.iconarchive.com/icons/custom-icon-design/mono-business/16/company-building-icon.png" />Oliver Hartman</treecell>
<treecell label="Company" />
<treecell label="3 / 3" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="John's Team" />
<treecell label="Sales Team" />
<treecell label="4 / 4" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell>Unassigned
<image src="http://icons.iconarchive.com/icons/yusuke-kamiyamane/fugue/16/user-silhouette-question-icon.png" /></treecell>
<treecell label="Auxilliary Team" />
<treecell label="3 / 3" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
</div>attributes.zulzul <div>
<grid width="100%">
<auxhead>
<auxheader colspan="4" label="Organisation Unit Details" />
</auxhead>
<columns>
<column width="200px"></column>
<column width="100%"></column>
</columns>
<rows sclass="narrow">
<row>
<label value="Name" />
<textbox value="Bob's Team" width="100%" />
</row>
<row>
<cell valign="top">
<label value="Description" />
</cell>
<textbox rows="5" width="100%" value="Team led by Bob Builder." />
</row>
<row>
<label value="Type" />
<hlayout>
<combobox value="Sales Team" width="230px" />
<div width="100px" />
<div width="100%">Color:
<colorbox id="colorPicker" width="95px" height="25px" /></div>
</hlayout>
</row>
<row>
<label value="Parent Unit" />
<combobox value="Medical Devices (Sales Division)" width="230px" />
</row>
<row>
<label value="Active Leader(s)" />
<label value="Bob Builder" />
</row>
</rows>
</grid>
<div height="10px" width="100%"></div>
<div align="right" height="20" width="100%">
<button label="Edit History" image="http://www.orlybaram.com/_ee/img/icons/edit/edit-icon.gif" />
</div>
</div>