ZK Developer's Reference/Data Binding/Associate UI Components with a GroupsModel

Similar to the previous section Associate UI Components with a Collection, you can also associate a GroupsModel with UI components, and the Data Binding Manager will convert the GroupsModel into UI components accordingly.

1. Prepare the data source of GroupsModel
2. Associate the GroupsModel with model attribute of those supported UI components, ex. Listbox and Grid.

In the following example, we demonstrate how to associate a GroupsModel with Listbox.

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>

<window width="500px">
	<zscript><![CDATA[ 
     //prepare the example group model
		Object[][] data = {
				{"cell 1-0", "cell 1-1"}, //group 1
				{"cell 2-0", "cell 2-1", "cell 2-2"}, //group 2
				{"cell 3-0", "cell 3-1", "cell 3-2", "cell 3-3"} //group 3
		};
		Object[] heads = { "group 1", "group 2", "group 3"};
		GroupsModel groupsmodel = new SimpleGroupsModel(data, heads);
		String selected = "cell 1-0";
     ]]>
 	</zscript>
	<listbox height="300px" model="@{groupsmodel}" selectedItem="@{selected}">
	</listbox>
	<label value="@{selected}"/>
</window>

Version History

Version	Date	Content