Skip to main content

Binding Data Model Collections

Components of type listbox and grid behave as complex containers of object collections. These components can be assigned a Xpath expression that does not identify a single object, but a collection of objects or values. In this case, the system will generate a row for each of the values retrieved by the XPath query.

In order to define how to render listbox elements (listiem) bound to each data model row, the dataitem component should be used. The dataitem component is used as a template for the generation of any listitems. It should be noted that the each generated listitem is bound to a single object from the data model collection. This object is used also as a data context for the listcell's bound xPath. More and more, the attribute bind on the dataitem is the XPath that point to the value of the listitem.

In a similar way, in order to define how a grid row should be rendered, the datarow component should be used. It is used as a template for the actual rows generated. A row will be generated for each single element obtained from the data model collection. This object is bound to it's corresponding row and serves as the data context for the row children components.

So, the following example illustrates how to show the countries on a list component:

<?xml version="1.0" encoding="UTF-8">
<?page title="ZK Data binding Demo">
<zk>
 <xmldatasource id="mydata" src ="/my-data.xml" />
 <vbox>
   <form dataPath = "/mydata:/title">
     <label bind="/@name" />
     <textbox bind = "/@name" />
     <button label = "Update" />
   </form>
   <listbox dataPath = "/country:/mydata">
     <listhead>
       <listheader label="Abbr" />
       <listheader label="Name" />
     </listhead>
     <dataitem bind = "/@abbreviation">
       <listcell bind = "/@abbreviation" />   
       <listcell bind = "/@name" />
     </dataitem>
   </listbox>
 </vbox>
</zk>

Note that the dataitem component has a dual behavior regarding the data model. On one side, it serves as a context to the inner object, and by the other side, it is assigned a value of the data model, according to the specification of the listitem component.

Back to top