ListGrid wrapCell

[acarur01]

isc.ListGrid.create({
    ID: "countryList",
    width:"100%", height:"100%", alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryName", title:"Country", width:120},
        {name:"background", title:"Background"},
        {name:"area", title:"area"},
        {name:"countryCode", title:"Flag", align:"center", width:50, type:"image", imageSize:24, imageURLPrefix:"flags/24/", imageURLSuffix:".png"}
    ],
    wrapCells: true,
    cellHeight: 56
})

Is there any way to get the text for an integer value to wrap like "backgorund" does? In the example when I resize the column for background the grid automatically wraps the text but when I do the same for area the text gets cut off.

[Isomorphic]

Not really, the browser does not regard that content as wrappable. There are CSS settings that exist to force such wrapping but they are not consistently supported. How about using a hover instead?

[acarur01]

Hover will not do for this instance - would you be able to give me an example of this css setting?

[Isomorphic]

These CSS settings are part of the CSS3 standard and are reported to work in the most recent versions of some browsers (reportedly IE7 and FF3.5):

word-wrap:break-word;
break-word:break-all;

Let us know if that works for you, others might be interested.

[acarur01]

I tried setting the "styleName" of the list grid with the css above but unfortunately, it didn't have any effect in both FF and IE. I then tried to set the base style of the list grid field and same outcome.

I tried setting wrapCells to true again and I didn't notice this before but it works in IE but not in FF.

[Isomorphic]

Not sure if this is what you already did, but you want to take these CSS settings and add them to all stateful variants of the style you are using as grid.baseStyle.

[acarur01]

I have the code below. When I resize the window, I see the background column resizing itself, but I do not see the date column resizing - it keeps its original size. Is this proper behaviour? If I change the "defaultWidth" property to just "width" then I see it resizing.

isc.ListGrid.create({
    ID: "countryList",
    width:"100%", height:"100%", alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryName", title:"Country", width:120},
        {name:"background", title:"Background",defaultWidth:"20%"},
{title:"<nobr>DateTime&nbsp;<\/nobr>",type:"date",name: "independence",editorType:"date",align:"left",defaultWidth:"20%"},
        {name:"countryCode", title:"Flag", align:"center", width:50, type:"image", imageSize:24, imageURLPrefix:"flags/24/", imageURLSuffix:".png"}
    ],
    wrapCells: true,
    fixedRecordHeights: false
})

[Isomorphic]

Well, there's no such property listGridField.defaultWidth (you might be thinking of canvas.defaultWidth), so yes, this result is expected.

[acarur01]

ok. My next question is, why doesn't the date column wrap the value? It just makes the column smaller, unlike background which wraps the text.

isc.ListGrid.create({
    ID: "countryList",
    width:"100%", height:"100%", alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryName", title:"Country", width:120},
        {name:"background", title:"Background",width:"20%"},
{title:"<nobr>DateTime&nbsp;<\/nobr>",type:"date",name: "independence",editorType:"date",align:"left",width:"20%"},
        {name:"countryCode", title:"Flag", align:"center", width:50, type:"image", imageSize:24, imageURLPrefix:"flags/24/", imageURLSuffix:".png"}
    ],
    wrapCells: true,
    fixedRecordHeights: false
})

[Isomorphic]

That's just the native behavior of the browser. Presumably for the date you're seeing something like "5/20/2010" - the browser considers this text that it will not break across two lines.

There are advanced CSS settings you can apply to control what content will be broken across lines - these don't have reliable support across all browsers however.

[acarur01]

I see. And I assume this is the same case for numerics?

[Isomorphic]

Yes, that's also a type of text browsers won't wrap by default.