Cells Expand, Alignment issues in Listgrid - smartGWT 4.0 / GWT 2.4

[VickyC]

Hi,

Our application was recently upgraded from
GWT 2.0.3 --> GWT 2.4 and
smartGWT 2.2 --> smartGWT 4.0

We have encountered issues in listgrid where certain rows have expanded to greater heights than what was expected leading to mis-aligned rows. this was not the behavior earlier to the upgrade.

Also two values that spans across 9 and 4 rows respectively in their column of the grid are not getting rendered after the upgrade.

Note: These two columns are being rendered inside the overidden "createRecordComponent()" method.

The listgrid parameter "setShowRecordComponentsByCell()" , if set to true is rendering those two spanning column values but is causing issues with cell expansion leading to mis-aligned rows

When the same parameter is set to "false", the screen is being rendered without any cell height issues but is not rendering the spanning column values.

We are trying to get those two column values which spans across multiple rows to be rendered in the screen having the above mentioned parameter as "False"

Please help us by providing any solution that could help or provide an alternative.

Thanks.

PS : could not post code or screenshot due to confidentiality

[Isomorphic]

With so little information we can't really help - we don't really even know what you mean about spanning columns.

Be sure you have read the overview docs for showRecordComponents, in particular the mention of recordComponentHeight.

If you need more help, we will need to see code. If you have confidentially concerns, you can purchase commercial services and get a confidentiality agreement in place.

[nageshsajjan]

Wrong alignment of cells in listgrid smartGWT

Be sure your post includes:

1. i am using SmartGWT 2.5.1 version

2. and firefox 26 version.

my sample code

listGrid.setWidth100();
listGrid.setShowRecordComponents(true);
listGrid.setShowRecordComponentsByCell(true);
listGrid.setSelectionType(SelectionStyle.SINGLE);
listGrid.setSelectionProperty(SELECTION_PROPERTY);
listGrid.setLeaveScrollbarGap(false);
listGrid.setCanFreezeFields(true);
listGrid.setCanGroupBy(false);
listGrid.setAlternateRecordStyles(true);
listGrid.setCanHover(true);
listGrid.setShowHover(true);
listGrid.setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
ResultSet resultSet = new ResultSet();
resultSet.setUseClientFiltering(false);
listGrid.setDataProperties(resultSet);
listGrid.setUseAllDataSourceFields(false);


Now in list wrong alignment of cells.
I tried with listGrid.setAutoFitData(Autofit.VERTICAL); method
It solved partially. My header and first column should be constant. but after using this method, when i scrool down my header will be disaapearing. (my am using treegrid style of table). Please find the image for the same.

any solution for this.

[Isomorphic]

Sorry, this partial code is useless - it's just a set of ordinary settings that can be seen in samples, and don't create a misalignment issue.

We need a minimal, ready-to-run test case that reproduces this issue.

[VickyC]

The browser that we use for development purpose is Firefox v24.0

GWT upgraded from 2.0.3 to 2.4
smartGWT upgraded from 2.2 to 4.0

Kindly refer to the attachments, The ImageA shows the portion of the listgrid as it appeared prior to GWT Upgrade. ImageB shows how the same Grid row height got expanded after the upgrade.

Before Upgrade : ImageA

In ImageA, The listgrid displays data for two candidates in 9 rows. The red bordered row is the indication of the height being set within the application for a single row component. Therefore makes up 9 rows before displaying data for the next candidate in another 9 rows.

In first Column (denoted as ColA in ImageA), the first 4 rows are left blank and data is displayed in the next five (A,B,C,D,E). The second Column (denoted as ColB in ImageA) shows some text that covers all the 9 rows as shown in the white background.

After Upgrade : ImageB

If you can see ImageB, The fifth row of the grid (row highlighted in red border) got expanded. This was because of the fact that the textual information of ColB that gets rendered inside the createRecordComponent() was rendered inside a single cell (Therefore making the rest of the cells of the row to expand and accommodate the height).

the following are some of the key initializing parameters set for the listgrid both before and after the Upgrade

setShowRecordComponents(true)
setShowRecordComponentByCell(true)
setCanResizeFields(false)
setCellHeight(15)      //  Default row Height

Inside the overridden creaRecorComponent( ) method in both before and after the upgrade, we render data to be displayed for ColA and ColB.
For ColA, we set the height by multiplying the default height by 5 (15 * 5 = 45px)
For ColB, we set the height by multiplying the default height by 9 (15 * 9 = 135px)

In order to solve this issue, we tried the following approaches:

1) setRecordComponentHeight(15) parameter to match the height of the default cell height value which didnt work out.

2) At first after upgrade we first were able to see data being rendered across multiple rows as explained earlier for ColA and ColB but few rows expanded as shown in ImageB.

To overcome this we tried setting the setShowRecordCompoentByCell() to false, this gave us proper row heihgts as in ImageA but didnt render any data in ColA and ColB.

3) We then applied setAllowRowSpanning(true) and setUseRowSpanStyling(true) in order to overcome the issue where ColA and ColB heights were affecting the heights of other cells in the same row. This helped us to span 9 rows for ColB but the data that was to be rendered there was getting rendered only in the cell of the first row and not in the other 8 rows (Might be due to the nature of how createRecordComponent() works out).

4) Tried to manipulate heights of those cells via CSS. But after somehow getting the cells to their default height as in ImageB, while hovering over those cells they came back to their expanded heights. setCanHover() has been set to false and also there are not Hover related fucntionality for the listgrid .

I hope I would have provided necessary information that was required, Please help me by proving any means by which I can overcome this issue.

[Isomorphic]

This information is just as useless. You're providing a really vague prose description of how you think your code works, which we obviously cannot troubleshoot; we have no way of telling if you've got bugs in your code, are relying on behaviors that aren't supported or documented, etc.

If you think there might be a framework bug here, we need actual runnable code that minimally demonstrates a framework problem.

If you want help troubleshooting this issue without the requirement that you demonstrate a framework bug, consider our Consulting services.