auto resize of grid columns

answered 2011-02-24 07:55:05 +0800

ofeus
39

Hi Simon,

thank you for the hint to the hflex attribute.
Now the auto resize works for grids that are wider than their columns.

But now I have problems with grids that have smaller total width than the summation of their column widths.
If the grid becomes smaller then 200px the center column will be resized to a width of 0px and for a user it looks like the column disappeared.

Is it possible to set a minimum width for a column, that prevent the column from disappearing.
I think the best solution would be, the if the total grid width becomes smaller than the columns widths, a horizontal scrollbar should appear.

Is there any configuration possible to implement such a solution.

Greetings,

Sven

answered 2011-02-28 09:41:11 +0800

ofeus
39

Hi Simon,

thank you for your help. Very nice timing. The new feature in the current zk release (5.0.6) just nearly solved my problem.

But I thought the configuration values are to restricted. And the distribution mechanism is not very flexible.
So I decided to extend the new span attribute functionality on my own.

I extended the distribution mechanism to accept comma separated lists of column indexes.
Now it is possible for me to specify minimum or fix width of columns by using the width attribute of column components. The distribution of empty space could be specified by setting a list of column indexes in the span attribute of the grid component.
The remaining empty space is than distributed between the specified columns considering the width ratio of the columns.

I created a feature request ticket in the sourceforge ticket system. A patch file with the needed changes is attached to the ticket.

link to the ticket:
https://sourceforge.net/tracker/?func=detail&aid=3195148&group_id=152762&atid=785194

Regards,

Sven

answered 2011-03-01 05:44:24 +0800

ofeus
39

updated 2011-03-01 05:45:03 +0800

Hi Nitin,

I tried grid.setSizedByContent(true) and the hflex='min' attribute on the column components with the following example:

<grid width="500px" style="border: 1px solid black;" sizedByContent="true">
	<columns>
		<column label="id" width="40px"/>
		<column label="name" width="100px"/>
		<column label="adress" width="200px"/>
		<column label="birthdate" width="70px"/>
	</columns>

	<rows>
		<row>
			<label value="12"/>
			<label value="John Smith"/>
			<label value="Street 1"/>
			<label value="1981/07/10"/>
		</row>
	</rows>			
</grid>