# grid columns multiline

kal
21 1 1

Hi all,
Is it possible to turn on word wrap in grid columns? In rows it works fine, but columns dont have multiline attribute, and i have no idea how to insert newline character to column label="...".

My code looks like this:
<zk:grid>
<zk:columns>
<zk:column label="this is a very very long text"/>
<zk:column label="value"/>
</zk:columns>
<zk:rows>
<zk:row>
<zk:label value="1/>
<zk:label value="i have a longer text here too, but its ok because zk wraps the lines">
</zk:row>
...
</zk:rows>
</zk:grid>

My problem, there is a lot of empty space next to the number, and if i set width shorter, the column labels end isn't visible. Is there a way to insert multiline value to column label attribute?

delete retag edit

## 17 Replies

PeterKuo
481 2

Some direction you can think about:
<zk:column label="this is a very very long text"/> can modify to <zk:column>this is a very very long text</zk:column>

Modify the css.

kal
21 1 1

Thanks PeterKuo,
It works, I can use <br /> tag between <column> and </column>. :)

niting
111

Hi Kal, Peter..Could you please provide an example for both of your approaches?

I am facing a similar issue with the grid column. Would like the column label to wrap depending on the width of the column.

kal
21 1 1

Hi niting,
I can't test it this moment, but I think, this should work:

<z:grid id="grid" mold="paging" pageSize="10">
<z:columns>
<z:column width="100px" label="Sender" sort="auto"/>
<z:column width="230px" align="center">Priority, Status<br /> (testing word wrap with long text)</z:column>
<z:column width="70px" label=" " align="center"/>
</z:columns>
<z:rows>
<z:row>
<z:label value="sender1"/>
I think, simple text<br />also works here
<z:button label="..." href=details.jsp"/>
</z:row>
</z:rows>
</z:grid>


zknewbie1
370 4

I added the xmlns:h namespace and it works fine...

<zk xmlns:h='http://www.w3.org/1999/xhtml'>
<grid id="grid" mold="paging" pageSize="10">
<columns>
<column width="100px" label="Sender" sort="auto"/>
<column width="230px" align="center">Priority, Status<h:br/> (testing word wrap with long text)</column>
<column width="70px" label=" " align="center"/>
</columns>
<rows>
<row>
<label value="sender1"/>
I think, simple text<h:br/>also works here
<button label="..." href="details.jsp"/>
</row>
</rows>
</grid>
</zk>

twiegand
1807 3

zknewbie1,

You might also consider wrapping your text in <cell> tags like this:

<cell>I think, simple text<h:br/>also works here</cell>


Otherwise, your row might spill over into too many columns..

Todd

zknewbie1
370 4

Thanks very much Todd..

niting
111

Hello.. Thanks for all your suggestions.
The column label has be set(as the header is picked from the database) using a java class thus..
Column col = new Column
col.setLabel("Test Word <br/> Wrap")
using this the label did not break.
Then I tried
Label columnLabel = new Label();
columnLabel.setMultiline(true);
columnLabel.setValue("Test Word \n Wrap");
col.appendChild(columnLabel);
The above displays "Test Word" and Wrap comes in the next line and am unable to extend the width.

in Css the SClass is
position: relative;
font-family : arial;
font-weight: bold;
font-size: 10px;
COLOR: black;
text-align: top;
BACKGROUND: #A7CCF0;
overflow: none;
top: 5
}

css also contains

div.z-column-cnt {
position: relative;
font-family : arial;
font-weight: bold;
font-size: 10px;
COLOR: black;
text-align: center;
overflow: none;
height: 5px
}

Any suggestion on what I might be missing and what changes need to made.

Thank you.

niting
111

Update: I removed the div.z-column-cnt class from the css and by using the label multiline approach I was able to display the values.

niting
111

Hello.. I thought I had found a solution for this but wasn't the case.

In the jsp version of our application a table is created and each td is set a width in % so using this property when label is set to the <td> the word wraps accordingly to the size set.
I am unable to replicate the same wrapping effect on ZK version of the application for a Grid column or Listbox listhead.

Please let me know if you all have any suggestions.

Thanks
Nitin

[hide preview]