Grid's Columns and Hflex

This section introduce the usage of ZK auto sizing APIs, all of these can apply to following components :

Listbox Listhead Listheader

Grid Columns Column

Tree Treecols Treecol

Use Cases

Here we take grid with column as an example, showing some use case about how to use the right way to display the data.

Data Length : Short

<syntax lang='xml' high='12,13,14,15,16'> <zk>

	<zscript><![CDATA[
	String[] msgs2 = {
 			"Application Developer's Perspective",
 			"Server+client Fusion architecture",
 			"Component Developer's Perspective",
 			"Execution Flow of Loading a Page",
			"Execution Flow of Serving an Ajax Request",
 			"When to Send an Ajax Request"  	
	};
	]]></zscript>

<listbox width="800px">

		<listhead>
			<listheader label="Product" />
			<listheader label="Description" />
			<listheader label="Comment" />
		</listhead>
		<listitem>

<listcell><label value="${msgs2[0]}"></label></listcell>

			<listcell><label value="${msgs2[1]}"></label></listcell>
			<listcell><label value="${msgs2[2]}"></label></listcell>
		</listitem>
		<listitem>
			<listcell><label value="${msgs2[3]}"></label></listcell>
			<listcell><label value="${msgs2[4]}"></label></listcell>
			<listcell><label value="${msgs2[5]}"></label></listcell>
		</listitem>

</listbox> <zk> </syntax>

• Default : Data component will show the data correctly, with no width specification. (the exactly width of columns are rendered by browser automatically)

Proportional Width

Sure you can use the hflex we have mentioned in previous section.

<syntax lang='xml' start="13"> <listhead> <listheader label="Product" hflex="1"/> <listheader label="Description" hflex="2"/> <listheader label="Comment" hflex="1" /> </listhead> </syntax>

Minimum Flexibility

In the cases of hflex=min, if you your content fill the whole data component, you can use span=true

<syntax lang='xml' start="2" high='5,8'>

       <zscript><![CDATA[
	String[] msgs2 = {
 			"Application Developer's Perspective",
 			"Very Short Text",
			"Server+client Fusion architecture",
			"Execution Flow of Serving an Ajax Request",
			"Very Short Text",
			"When to Send an Ajax Request (Addition Text )"
 	};
       ]]></zscript>

</syntax>

• Origional

<syntax lang='xml' start="13"> <listhead> <listheader label="Product" hflex="min"/> <listheader label="Description" hflex="min"/> <listheader label="Comment" hflex="min" /> </listhead> </syntax>

• Set span=true - Proportional allocating the blank width

<syntax lang='xml' start="12" high='12'> <listbox width="800px" span='true'> <listhead> <listheader label="Product" hflex="min"/> <listheader label="Description" hflex="min"/> <listheader label="Comment" hflex="min" /> </listhead> </syntax>

Data Length : Long

<syntax lang='xml' start="2" high='5,8'>

       <zscript><![CDATA[
       String[] msgs2 = {
 			"Application Developer's Perspective", 

"Very Long Long Long Long Long Long Long Long Long Long Text",

			"Server+client Fusion architecture",
			"Execution Flow of Serving an Ajax Request",
			"Very Long Long Long Long Long Long Long Long Long Long Text",
			"When to Send an Ajax Request" 
       };
       ]]></zscript>

</syntax>

• Default : ZK data component will wrap the text to fit the width of column.

Specify Width

This is the simple way to make the text not be wrapped, but it's hard to give the proper width.

<syntax lang='xml' start="13" high='14,15,16'> <listhead> <listheader label="Product" width="250px"/> <listheader label="Description" width="470px"/> <listheader label="Comment" width="280px" /> </listhead> </syntax>

Minimum Flexibility

• When the hflex=min were set, ZK will calculate the length of content and give width to the columns.
• Beware : Remember setting every column hflex or width, or they would disappear because not enough space.

<syntax lang='xml' start="13" high='14,15,16'> <listhead> <listheader label="Product" hflex="min" /> <listheader label="Description" hflex="min" /> <listheader label="Comment" hflex="min" /> </listhead> </syntax>

Mixed Flexibility and width

Width + Hflex proportion

<syntax lang='xml' start="13" high='14,15,16'> <listhead> <listheader label="Product" width="120px" /> <listheader label="Description" hflex="2" /> <listheader label="Comment" hflex="1" /> </listhead> </syntax>

Width + Hflex min

<syntax lang='xml' start="13" high='14,15,16'> <listhead> <listheader label="Product" width="150px" /> <listheader label="Description" hflex="min" /> <listheader label="Comment" hflex="min" /> </listhead> </syntax>

Width + Hflex min + Hflex proportion

<syntax lang='xml' start="13" high='14,15,16'> <listhead> <listheader label="Product" width="120px" /> <listheader label="Description" hflex="min" /> <listheader label="Comment" hflex="1" /> </listhead> </syntax>

Data Length : Dynamic

If users can't control the data size, that means, you should take both short data and long data situation into consideration.

Now we have several attributes, rules, and situations, please choose the right solution for your case.

• Size attributes
  • hflex proportion
  • hflex min
  • specific width
• Rules

1. Data component(Grid) has span="true".
2. Every column components have one of size attributes
3. Some of column component have hflex proportion
4. No column component have hflex=min
5. One of column component has no size attributes.

	Rule1	Header text
Situation 1	Example	Example
Example	Example	Example
Example	Example	Example
Example	Example	Example

Fill whole data component and No Wrapping Content 1 2 Fill whole data component and No ScrollBar

Version History

Version	Date	Content
5.0.6-FL	02/15/2011	New specification of auto-sizing