How to wrap content of columns in grid

[ollyando]

How do you wrap the contents of a column in a grid. In the examples it truncates the data to the size of the column, is it possible to select a column to wrap the text instead.

[Animal]

Give a column an id.

This gives it the class x-grid-col-{your-id}

Then you can apply white-space:normal

[damien]

I can not create a multiline column in IE. In FireFox it works fine. This is the code:


.x-grid-col-advies{
white-space:normal;
}

in the column model


id: 'advies',
header: "Advies",
dataIndex: 'advies',
sortable: true,
renderer: renderTopicPlain,
width: 350

and this code for filling the column

function renderTopic(value){
return String.format('{0}', value);
}
function renderTopicPlain(value){
return String.format('{0}',value.substring(0,60));
}

It works fine in Firefox. In IE it does not work. Somebody has any idea why?

[Animal]

I can't remember, but I think there's a problem in IE. I helped someone do this before, and one of the outer elements also needs its style tweaking to get IE to wrap grid cell contents.

Do a forum search. It was quite a long discussion. Probably about a year ago now.

[damien]

I searched a lot on the forum. I tried this one:


grid.getView().setCSSStyle(1,'white-space','normal');
grid.getView().refresh();


This doesnt help 2.

[damien]

This works in IE. But it meens all my grids do a multiline/ white-space normal. And thats not what i want.

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

How can i change above code sow it only works with the function renderTopic.

function renderTopic(value){
return String.format('{0}', value);
}
function renderTopicPlain(value){
return String.format('{0}',value.substring(0,60));
}

[Animal]

Make the rule more specific then:

[code]
.x-grid-hd-row td.x-grid-td<your-column-id>, .x-grid-row td.x-grid-td-<your-column-id> {
white-space:normal;
}

[damien]

Animal, i thank you. Problem solved.