Title of Last Column in the Listgrid is truncating

[Warren.Menezes]

Hi Isomorphic

The title of the last column of my listgrid is getting truncated due to the filter/sort icon at the right end of the grid. I find this issue in Firefox 12.0 and Internet 8.0. I have tried this in release v9.0p_2014-02-06/Enterprise Deployment 2014-02-06.

I have the following properties set on my listgrid

        listGrid.setWidth(500);
        listGrid.setHeight(500);
        listGrid.setShowAllRecords(true);
        listGrid.setShowFilterEditor(true);
        listGrid.setAutoFitFieldWidths(true);
        listGrid.setAutoFitFieldsFillViewport(false);
        listGrid.setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
        listGrid.setCanResizeFields(true);

        listGrid.setSortField("test1");
        listGrid.setSortDirection(SortDirection.DESCENDING);

        listGrid.setFields(DummyDataStudents.getFields());
        listGrid.setData(DummyDataStudents.getRecords());

As seen in the image the last column(rank)is truncated. If I select the AutoFitAllColumns option on the right click the display corrects. Is this a bug or is there a property I need to set to make it display properly when the grid loads initially?

[Isomorphic]

We're not seeing this, but perhaps it's because you've set leaveScrollbarGap:false as well (but not shown it in your code).

[Warren.Menezes]

I have not set that property. Even if I set listGrid.setLeaveScrollbarGap(true), the issue persists

DummyDataStudents class

public class DummyDataStudents {
    private static DummyRecordStudents[] records;

    public static DummyRecordStudents[] getRecords() {
        if (records == null) {
            records = getNewRecords();
        }
        return records;
    }

    public static ListGridField[] getFields() {
        List<ListGridField> listGridFieldList = new ArrayList<ListGridField>();
        ListGridField field1 = new ListGridField("firstName", "First Name");
        ListGridField field2 = new ListGridField("lastName", "Last Name");
        ListGridField field3 = new ListGridField("fathersName", "Father's Name");
        ListGridField field4 = new ListGridField("mothersName", "Mother's Name");
        ListGridField field5 = new ListGridField("subject", "Subject");
        ListGridField field6 = new ListGridField("test1", "Test 1");
        ListGridField field7 = new ListGridField("test2", "Test 2");
        ListGridField field8 = new ListGridField("test3", "Test 3");
        ListGridField field9 = new ListGridField("test4", "Test 4");
        ListGridField field10 = new ListGridField("rank", "Rank");
        listGridFieldList.add(field1);
        listGridFieldList.add(field2);
        listGridFieldList.add(field3);
        listGridFieldList.add(field4);
        listGridFieldList.add(field5);
        listGridFieldList.add(field6);
        listGridFieldList.add(field7);
        listGridFieldList.add(field8);
        listGridFieldList.add(field9);
        listGridFieldList.add(field10);
        return listGridFieldList.toArray(new ListGridField[listGridFieldList.size()]);
    }

    private static DummyRecordStudents[] getNewRecords() {
        return new DummyRecordStudents[]{
                new DummyRecordStudents("Penelope", "Langdon", "Boris Langdon", "Diane Langdon", "Science", 86, 54, 73, 64, 7),
                new DummyRecordStudents("Penelope", "Langdon", "Boris Langdon", "Diane Langdon", "Math", 86, 54, 73, 64, 3),
                new DummyRecordStudents("Penelope", "Langdon", "Boris Langdon", "Diane Langdon", "English", 86, 54, 73, 64, 5),
                new DummyRecordStudents("Penelope", "Langdon", "Boris Langdon", "Diane Langdon", "History", 86, 54, 73, 64, 12),
                new DummyRecordStudents("Penelope", "Langdon", "Boris Langdon", "Diane Langdon", "Computers", 86, 54, 73, 64, 6),

                new DummyRecordStudents("Ruth", "Roberts", "Joseph Roberts", "Carol Roberts", "Science", 86, 54, 73, 64, 6),
                new DummyRecordStudents("Ruth", "Roberts", "Joseph Roberts", "Carol Roberts", "English", 86, 54, 73, 64, 6),
                new DummyRecordStudents("Ruth", "Roberts", "Joseph Roberts", "Carol Roberts", "Math", 86, 54, 73, 64, 6),
                new DummyRecordStudents("Ruth", "Roberts", "Joseph Roberts", "Carol Roberts", "Computers", 86, 54, 73, 64, 6),
                new DummyRecordStudents("Ruth", "Roberts", "Joseph Roberts", "Carol Roberts", "History", 86, 54, 73, 64, 6),

                new DummyRecordStudents("Phil", "Fraser", "Sam Fraser", "Jasmine Fraser", "History", 86, 54, 73, 64, 6),
                new DummyRecordStudents("Phil", "Fraser", "Sam Fraser", "Jasmine Fraser", "Science", 86, 54, 73, 64, 6),
                new DummyRecordStudents("Phil", "Fraser", "Sam Fraser", "Jasmine Fraser", "Math", 86, 54, 73, 64, 6),
                new DummyRecordStudents("Phil", "Fraser", "Sam Fraser", "Jasmine Fraser", "English", 86, 54, 73, 64, 6),
                new DummyRecordStudents("Phil", "Fraser", "Sam Fraser", "Jasmine Fraser", "Computers", 86, 54, 73, 64, 6),

        };
    }
}

DummyRecordStudents class

public class DummyRecordStudents extends ListGridRecord {


    public DummyRecordStudents(String firstName, String lastName, String fathersName, String mothersName, String subject, double test1, double test2, double test3, double test4, double rank) {
        setFirstName(firstName);
        setLastName(lastName);
        setFathersName(fathersName);
        setMothersName(mothersName);
        setRank(rank);
        setSubject(subject);
        setTest1(test1);
        setTest2(test2);
        setTest4(test4);
        setTest3(test3);
    }


    public void setFirstName(String firstName) {
        setAttribute("firstName", firstName);
    }

    public void setLastName(String lastName) {
        setAttribute("lastName", lastName);
    }

    public void setFathersName(String fathersName) {
        setAttribute("fathersName", fathersName);
    }

    public void setMothersName(String mothersName) {
        setAttribute("mothersName", mothersName);
    }

    public void setRank(double rank) {
        setAttribute("rank", rank);
    }

    public void setSubject(String subject) {
        setAttribute("subject", subject);
    }

    public void setTest1(double test1) {
        setAttribute("test1", test1);
    }

    public void setTest2(double test2) {
        setAttribute("test2", test2);
    }

    public void setTest4(double test4) {
        setAttribute("test4", test4);
    }

    public void setTest3(double test3) {
        setAttribute("test3", test3);
    }
}

These are my settings in the gwt.xml file and I have not overridden any styles. Please see if you can reproduce it.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='DemoApp'>
    <!-- Inherit the core Web Toolkit stuff.                        -->
    <inherits name='com.google.gwt.user.User'/>

    <!-- We need the JUnit module in the main module,               -->
    <!-- otherwise eclipse complains (Google plugin bug?)           -->
    <inherits name='com.google.gwt.junit.JUnit'/>

    <inherits name="com.smartgwtee.SmartGwtEE"/>


    <!-- Inherit the default GWT style sheet.  You can change       -->
    <!-- the theme of your GWT application by uncommenting          -->
    <!-- any one of the following lines.                            -->
    <inherits name='com.google.gwt.user.theme.standard.Standard'/>
    <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
    <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

    <!-- Other module inherits                                      -->

    <!-- Specify the app entry point class.                         -->
    <entry-point class='com.mi.client.DemoApp'/>

    <!-- Specify the paths for translatable code                    -->
    <source path='client'/>
    <source path='shared'/>

</module>

[Isomorphic]

See the FAQ - you need to remove your inherit of core GWT themes, as they interfere with all HTML in the page, even HTML not written own by GWT.

[Warren.Menezes]

It worked and I no longer face the issue. Thanks Isomorphic

[Warren.Menezes]

Hi Isomorphic

This issue still exists. It is something that is evident only when we have no data or few rows in the grid such that a vertical scroll bar is not introduced.
I have been able to reproduce this in the showcase example by changing a few properties on the listgrid. The code below is for the Excel Export example

 final ListGrid countryList = new ListGrid();
        countryList.setWidth(120);
        countryList.setHeight(300);
        countryList.setAlternateRecordStyles(true);
        countryList.setDataSource(worldDSExport);
        //countryList.setAutoFetchData(true);

        ListGridField countryName = new ListGridField("countryName", "Country");
        ListGridField capital = new ListGridField("capital", "Capital");
        ListGridField continent = new ListGridField("continent", "Continent");

        countryList.setFields(countryName, capital, continent);
        countryList.setAutoFitData(Autofit.VERTICAL);
        countryList.setShowFilterEditor(true);
        //countryList.setAutoFitMaxRecords(10);

        countryList.setAutoFitFieldWidths(true);
        countryList.setAutoFitWidthApproach(AutoFitWidthApproach.TITLE);
        countryList.setAutoFitFieldsFillViewport(false);
        countryList.setLeaveScrollbarGap(true);

I have primarily tried to do the following to the listgrid
-remove the data in the grid
-force the column width to the width of the column title
-set a fixed grid width and allow a horizontal scrollbar to be introduced if the column widths exceed the width of the grid

I have tried this out in Firefox 12.0, SmartGWT version v9.0p_2014-02-06/Enterprise Deployment 2014-02-06, GWT 2.5. Please let me know if you are able to reproduce this bug.

Thanks

[Isomorphic]

Hi,
The fundamental issue here is that we can't have the width of the column in the header differ from the width of the column in the body, so when there is no vertical scrollbar but there is a corner sort arrow present, the corner button has to cover part of the rightmost header button.

Setting 'leaveScrollbarGap' to false will cause the sort button to not show up while there is no vertical scrollbar, so would resolve this.

However we've also made a change to the 4.0/9.0 branch (already present in 4.1 and 5.0) which will avoid this issue in this case.

The change we made was to ensure that the width calculated by the auto-fit logic will take into account the spacer we leave for the header menu button - see the leaveHeaderMenuButtonSpace attribute of ListGrid / ListGridField. This causes the field to size wide enough to accomodate the title, plus some additional space for the header menu button, which will also avoid it being clipped by the corner sort button.
This happens to also resolve the problem you encountered here since the area occluded by the corner sort button will match the space left for the header menu button.

That change will be present in the next nightly build (March 15 or above)

Regards
Isomorphic Software