Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Listgrid - auto-fit & title wrapping issue

    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
    })
    Click image for larger version

Name:	titleClip.png
Views:	20
Size:	23.1 KB
ID:	259326
    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

    #2
    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:
    Code:
    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.

    Comment


      #3
      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:
      Click image for larger version

Name:	titleClip.png
Views:	19
Size:	24.6 KB
ID:	259577

      Comment


        #4
        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.

        Comment

        Working...
        X