Listgrid - auto-fit & title wrapping issue

[kshamir]

Hi, I have a list grid with `wrapHeaderTitles` and `autoFitFieldWidths` set to "true".
When the grid is drawn, some of the headers' titles are clipped, without showing the ellipsis.

Here is a code snippet I used with "Local Data" example on SmartClient Feature Explorer website to demonstrate this issue:
isc.ListGrid.create({
ID: "countryList",
width:280, height:224, alternateRecordStyles:true,
fields:[
{name:"countryCode", title:"Code"},
{name:"countryName", title:"This is a long title test"},
{name:"capital", title:"Capital"}
],
data: countryData,
wrapHeaderTitles: true,
autoFitFieldWidths: true
})

What I really trying to achieve is to wrap the titles only for 2 rows..
and if there are more rows - the title should be clipped and the ellipsis should be displayed.
I would love to have some guidance on the subject

[Isomorphic]

If what you're asking for is multi-line ellipsis, the Framework doesn't currently support it as it's historically not been possible cross-browser. However, we'd first like to ask for clarification about your diagram. The red arrow is pointing at a field that isn't clipped. Your image shows the full title for the second field as, "This is a long title test." Did you mean to draw the arrow pointing at the first field, "Code"?

We can easily prevent "Code" from being truncated by changing the ListGrid.autoFitWidthApproach to "both" from the default of "value". We're not seeing the second field's title clipped with your sample code, but if you assigned a narrow width to the field, rather than autofitting it, that would definitely happen.

The Framework should automatically show a hover when a title is clipped, so that's one mitigation. Another potential solution is to set ListGrid.autoFitHeaderHeights, which will cause the header to expand vertically to accommodate your title.

In this sample:

isc.ListGrid.create({
    ID: "countryList",
    width:280, height:224, alternateRecordStyles:true,
    fields:[
        {name:"countryCode", title:"Code"},
        {name:"countryName", title:"This is a long title test", maxWidth:80},
        {name:"capital", title:"Capital"}
    ],
    data: countryData,
    wrapHeaderTitles: true,
    autoFitFieldWidths: true,
    //autoFitHeaderHeights:true,
    autoFitWidthApproach:"both"
})

we've limited the width of the second field to 80 to force it to get truncated, but note that the first field title isn't clipped bcause we're using "both" as the autofitting approach. Observe that if you hover over the second field title, you'll see the full title in a bubble. Conversely, if you uncomment the autoFitHeaderHeights line, then you'll see that the header is expanded to show the full title content for the second field and no clipping occurs.

[kshamir]

Yes, I'm asking about multi-line ellipsis. I accidentally attached a screenshot that doesn't show the problem. I understand that you don't support this. How can I handle this issue on my own?
I mean: where is the code that determines the appropriate width of the column, using autoFitWidthApproach = both?
here is the correct screenshot that shows the clipped multi-line title, without showing the ellipsis:

[Isomorphic]

The autoFitWidthApproach: "both" is working as intended in this case (using our sample above as a reference). since you have wrapping enabled. When wrapping, the column will size to fit the wrapped content, which for titles means the longest word. That's mentioned in the docs for ListGrid.autoFitFieldWidths.

If having a hover display the truncated title isn't enough, then as we pointed out above, you can set autoFitHeaderHeights:true to cause the header bar to expand vertically to show all content (or set a manual height yourself).

Browsers are moving towards a point where multi-line truncation can be accomplished in CSS, but it will likely be some time before we add support to our Framework. If you're interested in Feature Sponsorship, please contact support to have a discussion about what exactly we can provide.

[gedri]

Hi Isomorphic,
Continuing on this thread, I'd like to actually amend the question a bit.
What we are actually trying to achieve is that with the following combination of properties, the wrapping will take place to the extent that the column height can fit, and that the column width will be auto-set accordingly.

wrapHeaderTitles: true,
autoFitFieldWidths: true,
autoFitHeaderHeights: false, // we don't want to auto-fit header height!
autoFitWidthApproach: "both" // could also be "title" for that matter

So for example, if the column height can accommodate only two rows of text, a title text like "Three Word Title" will be wrapped to this:

Three Word
Title

instead of

Three
Word
Title

And the column width will be set wide enough for the text "Three Word" (instead of "Three").
This way the whole title text is always visible in full without auto-fitting the header height.

I realize this is probably not supported - just wanted to get your opinion before we get into the Feature Sponsorship option.
Would that even be feasible?

Thanks

[Isomorphic]

You've described two behaviors in this thread:

• Having text in a button wrap, showing an ellipsis only on the bottom line if it gets truncated there. Let's call this "multi-line ellipsis."
• Having text in an autofit-enabled button wrap in such a way that minimizes the button's width by using as many available text lines in the button as possible, without truncating any text. Let's call this "Fit-to-height wrapping."

Both of these features would require sponsorship, and in minimal form would presumably be mutually exclusive. That is, if you're minimizing width subject to available text lines, you're not going to ever truncate anything. (In non-minimal form, say with support for canvas.maxWidth, then yes you could conceivably have both features applied at once.)

"Multi-line ellipsis" would require some once-per-font measurement be run to allow use to write it using existing CSS attributes, but "Fit-to-height wrapping" would, in addition, require that we render the button text off screen for every (re)draw, perhaps multiple times for variable-width fonts. So it would be complex and could have a significant performance impact.

[gedri]

Thank you that accurate explanation.
What we require is exactly what you described as 'Fit-to-height wrapping' in the minimal form (so without support for maxWidth).
I will contact support about possible sponsorship for that feature.