How to enable word-wrap in Grid cells?

[maya]

Hi,

How can I force the text inside Grid cells to break according to the current row's height?
How can I force a specific row height?

Thanks,
Maya

[maya]

I added the "css: 'white-space:normal;'" definition - but it didn't help:

var colModel = new Ext.grid.ColumnModel([
{header: '#', id:'grid_auto_num', width: 25 , locked: false, dataIndex: 'grid_auto_num', hidden: false, sortable: true, css: 'white-space:normal;' }]);

Any suggestions?

Thanks,
Maya

[maya]

Why does it work in the paging example, and not in the simple Grid example?

(I added the css definition and it still doesn't work there).

[Richard]

This is what I use.


var cmDownload=new Ext.grid.ColumnModel([
{id:'a1'
,header:'Downloads'
,width:600
,dataIndex:'aa1'
,renderer:function(value, p, record){return String.format('{0}',record.data['aa1']);}
,css:'white-space:normal;'}]);

don't know if it's the right way, but it works.

[maya]

Hi Richard,

Thanks for your reply.

I added your code to the Ext's simple grid example (the array-grid.js example, see below), and it didn't work. On the other hand, in the paging example it works.

Does it work for you in Grids where you load the data from the javascript variable, or do you load data from a remote source?

It seems that when data is loaded from a javascript variable (like in the following example) - word wrap doesn't work, and when data is loaded from a remote source (like in the paging.js example) - it works fine.

What do you think?

The array-grid.js code (after adding your suggestion):
==================================


/*
* Ext JS Library 1.0 Beta 2
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/


Ext.onReady(function(){
// some data yanked off the web
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();

// example of custom renderer function
function italic(value){
return '<i>' + value + '</i>';
}

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 260, sortable: true, locked:false, dataIndex: 'company', css:'white-space:normal;', renderer:function(value, p, record){return String.format('{0}',record.data['company']);} },
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);

// create the Grid
var grid = new Ext.grid.Grid('grid-example', {
ds: ds,
cm: colModel
});



grid.render();

grid.getSelectionModel().selectFirstRow();
})

[tryanDLS]

Did you look at the rendered HTML? Are the cells getting the CSS value? I added that to the array grid example and it worked correctly? The code you posted shows a 1.0 Beta 2 label - you're not still using that version are you?

[maya]

Thanks for your reply, Tim.

1. I am running my app. in IE6. After adding: "<!DOCTYPE html PUBLIC>" at the beginning of the html code, the code (the simple grid example) works for me too.

On the other hand, in the paging example I can remove the doctype definition from the html, and the word wrap definition still works.

What is the difference between the two examples that makes the paging grid obey to the "white-space:normal;" definition without adding doctype? - I can't add this doctype definition to all of my app. pages.

2. I am using the old Ext version because I reached to a stable app. using the old version, and I don't want to risk this stability by upgrading to the new version. What do you think?

Thanks,
Maya

[tryanDLS]

You're using beta2, rather than 1.0.1a because it's more stable?? That's an incorrect assumption.
What you're doing with doctype may be causing IE6 to be or not be in quirks mode or trigger the 'hasLayout' behavior that has been discussed in a couple of threads. When experimenting with doctypes, use a valid one with known results. There are a number of places on the web that document browser discrepancies between strict, loose, or no doctype. The impact of what you're doing is unknown, in IE6 or any other browser.

To truly get to the root of the issue, you should upgrade to the latest code (even if it's in a test environment) and then try the different (real) doctypes in IE6 and also IE7 to see what happens.

[maya]

I made the upgrade to ext-1.0.1, and still the word-wrap doesn't work in the simple grid.

By the way: this is not an IE6 issue: I wrote a simple HTML page with text inside a div, and the "white-space:normal;" works fine threre.

Thanks,
Maya

[Animal]

I had to add this instead of the css:'white-space:normal' in the column def:



(function() {
grid.getView().el.select(".x-grid-td-0").setStyle({"white-space":"normal"});
grid.getView().el.select(".x-grid-td-0 .x-grid-cell-text").setStyle({zoom:'1'});
}).defer(100);


The TD has to have white space normal too. And the inner text div has to have layout.

See this article helpfully linked to by saki: http://www.satzansatz.de/cssd/onhavinglayout.html

[maya]

Thanks for your answer, A.

Where did you add this code? In the ColumnModel definition?

I define the ColumnModel as follows:
var colModel = new Ext.grid.ColumnModel([
{header: '#', id:'grid_auto_num', width: 25 ,dataIndex: 'grid_auto_num'}]);
Where can this code be integrated?

Thanks again,
Maya

[Animal]

The column model definition is not executable code.

If you are doing this, I'd suggest doing it in a handler for the GridView's "reresh" event.

The handler is passed the GridView as its forst and only param.

The GridView is not documented yet. I'll take a look at it tomorrow.

[maya]

Hi,

If I can change the css definition using grid.getView() - it can be helpful. I tried:

grid.getView().tdClass = \"my_new_class\";
grid.getView().refresh();

But it didn't help (some data disappeared from the Grid).
In any case it would be better just to add the "white-space:normal;" definition than to change the entire class.

Is this the direction of using the grid.getView()?

Thanks,
Maya

[Animal]

Yes a class on the GridView's Element would be a good way. Then you can just add styles rules to your stylesheet to style the elements as described.

If you do it that way, you don't have to refresh!

[maya]

How can I change only the td class inside the GridView?
The GridView's Element is a div - and I can't find the object path to its cells.

When I change the GridView direct Element's class I have 2 problems:
1. Some data disappears from the Grid cells (can't explain why).
2. The header row's class is also changed (the word wrap affects also the header text - and the header row is not in place (a high gray area is created under it)


Thanks,
Maya

[Animal]

You don't need to change anything. Add some CSS rules to your stylesheet to style the elements mentioned above by selecting them with appropriate CSS selectors, and specifying the styling neccessary.

http://www.w3.org/TR/CSS21/selector.html

[maya]

I can't define css rules if I don't know the element hierarchy in the Grid.

I try to implement a button that when clicking on it - it expands the rows (adds the word wrap to the td content).

Therefore, I need to define a selector that adds the definition: white-space:normal; to all elements with the class: x-grid-row td (this way it expands only the Grid rows and not the header row). But - in order to define the selector I need to know the hierarchy to this td.

For example, my Grid is inside a div with a unique class I gave it ("minimized"). Basically, when clicking on the button, I can change the div's class to "maximized". But in the css I need to define something like: maximized.x-grid-row.td {white-space:normal;}.

What is the right selector I can use in the css? Or - is there a more elegant way to implement my "show details" button?

Thanks.

[Animal]

Read the CSS spec!



.maximized .x-grid-row td {
white-space:normal;
}

[maya]

Thanks for your help, Animal.

[gear_ratio]

I ended up having to use inline styles to make this work. I'm using ext 2.1. Refer to the grouping.js/grouping.html example files in ext-2.1\examples\grid folder of your ext distribution.

The following is what I added to grouping.html

<style type="text/css">
.x-grid3-col-company {
white-space: normal;
}
</style>

The following is already present in grouping.js and was not modified (despite repeated attempts to work using the style parameters in the column model).

/*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);

var grid = new xg.GridPanel({
store: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
}),

columns: [
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],

view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
renderTo: document.body
});
});



// Array data for the grids
Ext.grid.dummyData = [
['3m Co asfasdfa sdfas fsdf asdf asf s fas \n df sdfsf sf sdf asd fasdfsdf sdfs f',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
];

// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
}

[patrick de laet]

I just use the following renderer and it works in FF and IE ...

renderer: function(value, cell) {
var str = "<p style='white-space:normal'>" + value + "</p>";
return str;
},

[googelybear]

thanks dude! also works in gxt

[cparker]

I know this is in the Ext 1.x forums, but pattick de laet's solution solved this same problem for me with Ext 2.2. Using a <p> or <span> tag did interfere with QTips, however. I ended up adding the style attribute to the metadata property, like so:


Ext.QuickTips.init();

// ...

var tooltipRenderer = function (data, metadata, record, rowIndex, columnIndex, store) {
metadata.attr = 'ext:qtip="' + data + '" style="white-space: normal; "';
return data;
};

var grid = new Ext.grid.GridPanel({
// ...
columns: [
{
// ...
renderer: tooltipRenderer
},
// ...
],
// ...
});

grid.render();

[jlbz]

I've spent a bit of time trying to get line wrap to work in IE. The posts here concentrate on the white-space property, which worked for me in Firefox, but not IE.

This page provided the answer:
http://cos.livejournal.com/36490.html

Apparently IE goes into "quirks mode" (preserving old IE bugs) depending on the html document type. As far as I can tell, none of the earlier suggestions in this thread will fix the problem in IE if it's in quirks mode.

(To be a bit more specific, I changed my doc type from

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

and, having already set up the rendered to inject white-space:normal, IE suddenly started behaving.)

[M1ke]

Works in GXT too idd. Cheers!

-M1ke

[talshadar]

I've been having the same problem and Richards post was exactly what I needed. I did see it in the example but I didn't understand (and still don't really) what the render function was supposed to do so I didn't pursue it. But I thought I would try what Richard posted and it worked like a charm!! Thanks alot - you just made A LOT of my users very very happy!



This is what I use.


var cmDownload=new Ext.grid.ColumnModel([
{id:'a1'
,header:'Downloads'
,width:600
,dataIndex:'aa1'
,renderer:function(value, p, record){return String.format('{0}',record.data['aa1']);}
,css:'white-space:normal;'}]);don't know if it's the right way, but it works.

[ram.ghadiyaram@gmail.com]

Hi
I am new to GXT. I need to do the same thing in gxt. anybody have code sample pls?

[tryanDLS]

This is not a GXT forum. Please post in the proper forum

http://extjs.com/learn/Ext_Forum_Help