0

grid columns multiline

asked 2010-03-28 08:00:59 +0800

kal gravatar image 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?

Thanks your answers.

delete flag offensive retag edit

17 Replies

Sort by ยป oldest newest

answered 2010-03-28 21:08:05 +0800

PeterKuo gravatar image 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.

link publish delete flag offensive edit

answered 2010-03-29 13:40:45 +0800

kal gravatar image kal
21 1 1

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

link publish delete flag offensive edit

answered 2010-12-10 10:14:04 +0800

niting gravatar image niting
111

updated 2010-12-10 10:15:58 +0800

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.

link publish delete flag offensive edit

answered 2010-12-10 12:53:00 +0800

kal gravatar image 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>

link publish delete flag offensive edit

answered 2010-12-10 13:01:21 +0800

zknewbie1 gravatar image 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>

link publish delete flag offensive edit

answered 2010-12-10 13:48:59 +0800

twiegand gravatar image 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

link publish delete flag offensive edit

answered 2010-12-10 13:51:39 +0800

zknewbie1 gravatar image zknewbie1
370 4

Thanks very much Todd..

link publish delete flag offensive edit

answered 2011-02-22 12:13:22 +0800

niting gravatar image 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")
col.setSclass("colHeader")
using this the label did not break.
Then I tried
Label columnLabel = new Label();
columnLabel.setMultiline(true);
columnLabel.setValue("Test Word \n Wrap");
columnLabel.setSclass("colHeader");
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
.colHeader {
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.

link publish delete flag offensive edit

answered 2011-02-22 13:22:57 +0800

niting gravatar image 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.

link publish delete flag offensive edit

answered 2011-03-10 17:01:38 +0800

niting gravatar image 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

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-03-28 08:00:59 +0800

Seen: 2,853 times

Last updated: Apr 12 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More