View Full Version : How can provide word wrap feature for the content inside a grid cell?

17 Aug 2009, 1:03 AM
I am trying to wrap the content present inside grid cells. default style it applies is 'white-space:nowrap'. how can i change this. i tried the following code but it doesn't work. please help me out.

GridCellRenderer<Stock> wrap = new GridCellRenderer<Stock>() {
public String render(Stock model, String property, ColumnData config, int rowIndex,
int colIndex, ListStore<Stock> store, Grid<Stock> grid) {
String val = (String) model.get(property);

return "<p style='white-space:normal;color:black;'>" + val+" this is a test message " + "</p>";

ColumnConfig column = new ColumnConfig();
column.setRenderer( wrap );

19 Aug 2009, 2:26 AM
its more easy with css like this way:

add this to your custom css and add this after the gxt-all.css:

.nowrapgrid .x-grid3-cell-inner {
white-space: normal;
}later addStyleName("nowrapgrid") (note without the dot) to your grid, then ALL cells in this grid are with nowrap.

ps: it can be needed to add important: white-space: normal !important;

31 May 2010, 8:02 AM
Thanks a lot. I was trying to wrap text with all kinds of word-wrap attribute values without luck. You saved me some time.

30 Aug 2010, 4:44 AM
Hello, i would like to add a wrap for ALL cells in the grid so using a renderer is not a solution for me. I have 12 grids with more than 14 columns each.

I need to fix the problem with css but unfortunately it doesn't work. I have tried setting 'white-space:normal" for TD, DIV, using !important but it still doesn't work.

I need that so the grid shows me all the blanks from the record (example: A_____A instead of A_A).

Does anyone know why whiteSpace:normal doesn't get the job done? I've checked it with fireBug and it does set the attribute correctly...only that the wrapping doesn't happen.

What i have set:
.x-grid3-cell-inner, .x-grid3-hd-inner {
white-space:normal !important;


30 Aug 2010, 4:46 AM
If you want to do it to all your grids on all your columns, simple add

.x-grid3-cell-inner {
white-space: normal !important;

to your custom css. This custom css needs to be loaded after gxt-all.css

30 Aug 2010, 4:49 AM
Thank you for your quick reply sven! Butl, as stated above, that doesn't work for me. I don't understand why. The multiple blanks still get converted to a single blank.

30 Aug 2010, 4:50 AM
Than you will need tp provide a fully working testcase that implements EntryPoint and contains all needed files.

30 Aug 2010, 5:00 AM

If you go into the file and put like 12 consecutive blanks in the description (Amer ____________ ican Express Company',).
I tried changing from firebug and put white-space: normal !important and it's still showing me only ONE blank instead of 12.

30 Aug 2010, 5:04 AM
You are in the wrong forum ;)

This is the GXT forum, not extjs.

However, white-space is for something different.

Take a look at this: http://stackoverflow.com/questions/433493/why-do-multiple-spaces-in-an-html-file-show-up-as-single-spaces-in-the-browser

You should use "&nbsp;" instead of " ".

30 Aug 2010, 5:10 AM
I know it is the GTX forum, i only gave that example because it is easy to reach and public... I am trying to be as "on topic" as i can.
Yes, i do believe &nbsp replacement is the solution, but i cannot build renderers for ALL the columns in ALL the grids. At the moment i have more than 160 columns in different grids and it's growing. I am wondering if there is a solution to have this replacement without doing a column level redenerer that does .replace (" ","&nbsp;")...

30 Aug 2010, 5:20 AM
There probably is. You can extend GridView and override getRenderedValue method. Something like:

protected String getRenderedValue(ColumnData data, int rowIndex, int colIndex, ModelData m, String property) {
String s = super.getRenderedValue(data,rowIndex,colIndex,m,property);

//some algorithm to replace each " " with a "&nbsp;"

return s;

Than your grids would use this new gridview

4 Jan 2012, 11:12 PM

Have you any tips for making word wrap in TreeGrid?
I've used whitespace CSS parameter as suggested in this thread and it gave me unsatisfying result such as you can see at the attached screenshot.

Thanks in advance :)