PDA

View Full Version : multiline column in GridPanel



raj_plays
8 Feb 2010, 11:14 PM
Hi,
How can I make the content of a column of a grid panel to display in multiple lines rather than show the '...' if it exceeds the column width?

I tried this....
{header: "Text", width: 500, dataIndex: 'action', sortable: true,
renderer: function(value, metaData, record, rowIndex, colIndex, store)
{metaData.css = 'multilineColumn'; return value; }
}

.multilineColumn
{
overflow: hidden; white-space: normal !important;
}

Didn't work

Eugen_
9 Feb 2010, 12:07 AM
Hi raj_plays,

try this


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

raj_plays
9 Feb 2010, 2:57 AM
Thanks, Eugen_
I replaced my css class with yours but it didn't work.
Is this even possible?

Eugen_
9 Feb 2010, 4:20 AM
It should work.

Get the basic grid sample http://www.extjs.com/deploy/dev/examples/grid/array-grid.html

Add my css class to array-grid.html


<style type=text/css>
/* style rows on mouseover */
.x-grid3-row-over .x-grid3-cell-inner {
font-weight: bold;
}
.multilineColumn .x-grid3-cell-inner {
white-space: normal !important;
}
</style>Add your renderer to array-grid.js


{
id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
metaData.css = 'multilineColumn'; return value;
}
},Result (after.png) in attachment.

?an you give me more code to find an error?

raj_plays
9 Feb 2010, 11:54 AM
Thanks a lot Eugen_ for taking time out to post the code as well as the screenshots.

The css code you gave was good.
The problem was with my data. It was long but didn't have any spaces in it. When I inserted a few spaces, it worked.