ListGrid summaryRow style issue

[caled88]

Hello Community,
I'm having a problem porting a SmartGwt application from version LGPL 4.1 (build 20170920) to version LGPL 6.1 (build 20170930).
I'm having a style issue with the summary row in a ListGrid in version 6.1 that was not present in version 4.1.

In a nutshell, I'm setting a summary row style with setSummaryRowStyle(); this style is defining an height and font-size because I need a smaller summary row.
In addition, but not required, I'm also setting the summary row height with setSummaryRowHeight().
What is happening is that the content of the summary row is indeed smaller, but the whole summary row is not getting smaller than 24px (no idea why this specific number). In version 4.1 the whole summary row was adapting to its smaller content.
In our real project, this ListGrid is aligned and has scrollbar synchronization with other widgets in the page, so this height issue is misaligning our data representation.

I prepared a small test example to visualize the issue.
This was the correct result using version 4.1. The summary row content (red) and the summary row itself have the same height.


While this is the incorrect result using version 6.1. Here the summary row content (red) has the correct dimensions, whilst the whole summary row cannot get that smaller, thus leaving an empty while space.


Thank you for any suggestions or feedback.


SummaryRowExample.java

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.ListGridComponent;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;

public class SummaryRowExample implements EntryPoint {

    @Override
    public void onModuleLoad() {

        final ListGrid grid = new ListGrid();
        grid.setShowGridSummary(true);
        grid.setSummaryRowHeight(15);
        grid.setSummaryRowStyle("summaryRowStyle");
        grid.setWidth(300);
        grid.setHeight(300);

        ListGridField field1 = new ListGridField("field1", "FIELD 1");
        field1.setType(ListGridFieldType.INTEGER);
        field1.setShowGridSummary(true);
        ListGridField field2 = new ListGridField("field2", "FIELD 2");
        field2.setType(ListGridFieldType.INTEGER);
        field2.setShowGridSummary(true);
        ListGridField field3 = new ListGridField("field3", "FIELD 3");
        field3.setType(ListGridFieldType.INTEGER);
        field3.setShowGridSummary(true);
        grid.setFields(field1, field2, field3);

        ListGridRecord record1 = new ListGridRecord();
        record1.setAttribute("field1", 1);
        record1.setAttribute("field2", 2);
        record1.setAttribute("field3", 3);
        ListGridRecord record2 = new ListGridRecord();
        record2.setAttribute("field1", 4);
        record2.setAttribute("field2", 5);
        record2.setAttribute("field3", 6);
        ListGridRecord record3 = new ListGridRecord();
        record3.setAttribute("field1", 7);
        record3.setAttribute("field2", 8);
        record3.setAttribute("field3", 9);
        grid.setData(record1, record2, record3);

        Object[] components = new Object[] { ListGridComponent.SUMMARY_ROW, ListGridComponent.HEADER,
                ListGridComponent.BODY };
        grid.setGridComponents(components);

        grid.draw();
    }

}

SummaryRowExample.css

.summaryRowStyle {
    height: 15px;
    font-size: 10px;
    background-color: red;
}

[Isomorphic]

Component sizes are never set via CSS. Try removing your attempt to set size via CSS and see if that corrects the problem.

Also, try out the latest build (you are several months behind) and, if the problem still occurs after these steps, also let us know if it happens if you remove the setGridComponents() call.

[caled88]

Thank you for your feedback.

Following your suggestions, I've updated SmartGwt 6.1 to the latest nightly build (2018-03-09).
I've also removed the reordering of ListGrid components, since it does not affect this issue.
Finally I've removed the CSS property setting the summary row size, thus leaving only setSummaryRowHeight() method to handle component sizing.

Unfortunately the style issue is not solved, but I've managed to better understand how it's working.
It seems that setSummaryRowHeight() is setting only the total height of the summary component of ListGrid, not the actual summary row height. The actual summary row height is always 24px in height.

The following picture is an example of setSummaryRowHeight(15) where the summary row is not able to get smaller of 24px.



This picture, however, is an example of setSummaryRowHeight(40). Here I noticed that the summary row ListGrid component is actually 40px in height, but the summary row sticks to its 24px.


If I have understood correctly the situation, may I ask if this is the expected behaviour of the setSummaryRowHeight() method? Is there a way to actually change the summary row height (in my case making it smaller)?

Thank you again for any further suggestions.


SummaryRowExample.java

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;

public class SummaryRowExample implements EntryPoint {

    @Override
    public void onModuleLoad() {

        final ListGrid grid = new ListGrid();
        grid.setShowGridSummary(true);
        grid.setSummaryRowHeight(15); // 40
        grid.setSummaryRowStyle("summaryRowStyle");
        grid.setWidth(300);
        grid.setHeight(200);

        ListGridField field1 = new ListGridField("field1", "FIELD 1");
        field1.setType(ListGridFieldType.INTEGER);
        field1.setShowGridSummary(true);
        ListGridField field2 = new ListGridField("field2", "FIELD 2");
        field2.setType(ListGridFieldType.INTEGER);
        field2.setShowGridSummary(true);
        ListGridField field3 = new ListGridField("field3", "FIELD 3");
        field3.setType(ListGridFieldType.INTEGER);
        field3.setShowGridSummary(true);
        grid.setFields(field1, field2, field3);

        ListGridRecord record1 = new ListGridRecord();
        record1.setAttribute("field1", 1);
        record1.setAttribute("field2", 2);
        record1.setAttribute("field3", 3);
        ListGridRecord record2 = new ListGridRecord();
        record2.setAttribute("field1", 4);
        record2.setAttribute("field2", 5);
        record2.setAttribute("field3", 6);
        ListGridRecord record3 = new ListGridRecord();
        record3.setAttribute("field1", 7);
        record3.setAttribute("field2", 8);
        record3.setAttribute("field3", 9);
        grid.setData(record1, record2, record3);

        grid.draw();
    }

}

SummaryRowExample.css

.summaryRowStyle {
    font-size: 10px;
    background-color: red;
}

[Isomorphic]

The summaryRow is an AutoChild and is a ListGrid, so you can configure it in the normal way for AutoChildren. In this case if you wanted to adjust the height of the actual grid rows within the summaryRow component, you could use listGrid.cellHeight.

[caled88]

Thank you very much for the hint! That solved my problem.

Just for completeness, I added these lines to the code above, in the ListGrid configuration section:

ListGrid sumRow = new ListGrid();
sumRow.setCellHeight(15);
grid.setAutoChildProperties("summaryRow", sumRow);