Auto-fitted List Grid field size not wide enough to display header

[survivor1505]

Hi,

I am using List Grid in my project, and was trying to auto fit the grid by using setAutoFitWidthApproach(AutoFitWidthApproach.BOTH) . I was under impression that by setting AutoFitWidthApproach.BOTH, every field would be auto-fitted to fit the field title or the data values (whichever requires more space).

In my case I have columns where the field title require more space than the data. And when I execute autoFitFields() from source code or select "Auto Fit All Columns" from the context menu in the ListGrid UI, the fields with longer header title gets auto fitted according to the data in the filed and not the header title.


Here is the sample code:

public class BuiltInDS implements EntryPoint {
private ListGrid boundList;

public void onModuleLoad(){
boundList = new ListGrid();
boundList.setWidth100();
boundList.setHeight100();
DataSource ds = DataSource.get("animals");


List<DataSourceField> gridFields = new ArrayList<DataSourceField>();
for(DataSourceField f : ds.getFields()){
f.setAttribute("wrap", true);
gridFields.add(f);
}
ds.setFields(gridFields.toArray(new DataSourceField[gridFields.size()]));
boundList.setDataSource(ds);
boundList.setAutoFetchData(true);
boundList.setAutoFitHeaderHeights(true);
boundList.setWrapCells(true);
boundList.setFixedRecordHeights(false);
boundList.setOverflow(Overflow.AUTO);
boundList.setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);

boundList.draw();
boundList.autoFitFields();

}

}


I am using SmartClient Version: v10.1p_2016-11-17/PowerEdition Deployment (built 2016-11-17)

I am trying to find out why AutoFitWidthApproach.BOTH is not working as expected in my grid?

Thanks!

[Isomorphic]

We're not getting exactly what you're seeing in the screenshot when we run your sample code. Can you confirm whether this screenshot is taken from running exactly this sample code (against the unmodified 'animals' dataSource we ship with the BuiltInDS sample)?

Regardless - a few things do stand out:
Firstly - we are reproducing a problem where numeric field titles (so Life Span) can inappropriately clip during auto-fit. We think this is probably the bug you're seeing.
This is actually a result of the title text not being left-aligned - in which case we explicitly write out some blank space for the header-menu button to show over. For some reason this seems to be clipping the text. We'll look at why this is happening and should get a fix relatively soon. In the meantime you can workaround this by setting 'leaveHeaderMenuButtonSpace' to false on your grid (or setting showHeaderMenuButton to false, of course).

Secondly a couple of comments on the code:
- you don't need to explicitly set wrap to true on each field in the grid to get wrapping titles - you can use the 'setWrapHeaderTitles()' method to achieve this.

- you shouldn't need to set overflow to "auto" for the grid as a whole. By default the grid body will be overflow "auto", meaning scrollbars will show if there are enough rows (or the columns are wide enough) to require it. The grid as a whole typically sizes all its inner components (body, header) to fit within its specified size so you'd be unlikely to see scrollbars.
There are some exceptions - for example if you're using the 'autoFitData' flag to have the grid expand to fit its content.
You can also explicitly change the body overflow (in which case it could overflow the grid as a whole). This'd be achieved via the special "bodyOverflow" attribute of the grid.

- You're setting autoFitFieldWidths to true for this grid and then explicitly calling 'autoFitFields()' once the grid is drawn.
This isn't typically necessary and may indicate some confusion about exactly what those two mechanisms are.

The "autoFitFields()" method determines how wide each column should be to accomodate it's cell values / header values (depending on the autoFitWidthApproach) and does a one time resize of the columns to fit that value - exactly as if the user had gone through and drag-resized each field.

The "setAutoFitFieldWidths()" method is slightly different.
It ensures that fields don't clip their content (or title), as with autoFitFields but also continues to auto-fit if the data changes, titles change, etc -- essentially you're enabling an ongoing sizing mode by setting this flag.
Also, rather than exactly sizing *all* fields to fit their content, it treats any specified field widths as a minimum, it allows columns to fill the viewport if fitting them to the content would leave empty space in the viewport (see autoFitFieldsFillViewport), and it also allows you to specify fields which should be clipped if necessary to avoid introducing a horizontal scrollbar (see the autoFitClipFields property).


Anyway - we'll follow up on the fact that you seem to need the leaveHeaderMenuButtonSpace feature disabled to ensure the title doesn't get clipped in this usage once we've completed our analysis.

Regards
Isomorphic Software

[survivor1505]

Thank you for your reply,

Yes, this screenshot was taken from running the sample code that I provided. However, I had modified the title for lifeSpan column in 'animals' data source xml file as below:

animals.ds.xml :

<DataSource
ID="animals"
serverType="sql"
tableName="animals"
testFileName="animals.data.xml"
>
<fields>
<field name="commonName" title="Animal" type="text"/>
<field name="scientificName" title="Scientific Name" type="text" primaryKey="true" required="true"/>
<field name="lifeSpan" title="#Inst * Area (mm&lt;sup&gt;2&lt;/sup&gt;)" type="float" decimalPad="3" decimalPrecision="3"/>
<field name="status" title="Endangered Status" type="text">
<valueMap>
<value>Threatened</value>
<value>Endangered</value>
<value>Not Endangered</value>
<value>Not currently listed</value>
<value>May become threatened</value>
<value>Protected</value>
</valueMap>
</field>
<field name="diet" title="Diet" type="text"/>
<field name="information" title="Interesting Facts" type="text" length="1000" hidden="true"/>
<field name="picture" title="Picture" type="image" detail="true"
imageURLPrefix="/isomorphic/system/reference/inlineExamples/tiles/images/"/>
</fields>
</DataSource>


In my sample code, I am not setting the autoFitFieldWidths to true. But, when I call autoFitFields() or execute "Auto Fit All Column" from the context menu of the grid, the first column in the grid takes up large amount of screen space regardless of the size of its content and title. And the column with larger title and smaller sized data gets clipped header title.


Also, I tried the workaround you provided and that does display the complete title text without clipping it.

Thanks!

[survivor1505]

FYI,

If I run the same sample code with an older version of SmartGWT (SmartClient Version: v10.1p_2015-12-17/PowerEdition Deployment (built 2015-12-17)) it works fine without the workaround.

[Isomorphic]

Thanks for the follow up - yes, this appears to be a side effect of a feature which would not have been present in builds prior to a certain date so this makes some sense.
We're looking at how best to fix it in the framework, but we'd recommend you just use the workaround for now so you're not waiting on a fix

Regards
Isomorphic Software

[Isomorphic]

One final note on this: The issue has now been resolved at the framework level, so the workaround should no longer be necessary.
We're currently experiencing a problem with our build generation process so there hasn't been a nightly build for a few days. Normal service should resume soon however and the fix will be present in the next nightly build.

If you have further problems with this (once a new build is available) let us know and we'll revisit it.

Regards
Isomorphic Software