Visible rows in livegrid don't match the number displayed in toolbar

[Colin Alworth]

I can try to run this, but it doesn't seem to be a complete example. That custom appearance and css could be setting styles globally that are breaking the other grid, and with your description of the bug (i.e. only occurs after viewing the other grid) that sounds very much like the case. If I don't have Page1, will I be able to see this bug? Can you make a simple version of Page1 and still get the bug? If not, that seems to be the source of the issue, or at the very least, an essential piece of the puzzle.

The 'wrong' DateCell causes this bug for a fairly simple reason - it is adjusting the size of the row height, so the LiveGridView can't assume it knows how tall any given row is. LiveGridView assumes a row height of 20 px - this is customizable via setRowHeight:

  /**
   * Sets the height of one row (defaults to 20). <code>LiveGridView</code> will
   * only work with fixed row heights with all rows being the same height.
   * Changing this value will not physically resize the row heights, rather, the
   * specified height will be used internally for calculations.
   * 
   * @param rowHeight the new row height.
   */
  public void setRowHeight(int rowHeight) {
    this.rowHeight = rowHeight;
  }

Note the last sentence - changing this will not modify the grid rows, but this can be used to inform the grid view how tall the rows are. The rows *must* be the same height in order to allow the livegrid to 'guess' at the heights of the rows above and below the current visible area - the ones it cannot see.

Without more information, my guess is that Page1's appearance is changing the height of all grids, and breaking this assumption. While there are issues with Grid appearances affecting other grid, I think it should be possible for one grid to set its own row height as different from other grids on the page.

Perhaps instead of adding more code (this last post added something around 200 lines on top of the existing 300 of my simplified version of your initial copy), you could break this into a reproducible test case? I will try to run it, but as I said before, you are mixing and matching so many components that singling out a specific mistake in your code or bug in ours is getting very difficult. If the bug still happens without layouts, make the layout much much simpler - and if it doesn't, then the Grid probably isn't even necessary to reproduce it. Just draw two grids, side by side - perhaps two buttons, each that adds a grid. If I am correct, adding Page1 will change the live grid after it is already drawn, and you'll be able to see that change happen.

[sharon_y]

Here are our own GridAppearance and css used by Page1.java:

MyGridAppearance.java:

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.CssResource.Shared;
import com.sencha.gxt.theme.base.client.grid.GridBaseAppearance;


public class MyGridAppearance extends GridBaseAppearance {


public interface MyGridResources extends GridResources {
MyGridResources INSTANCE = GWT.create(MyGridResources.class);


@Source({ "com/sencha/gxt/theme/base/client/grid/Grid.css", "MyGrid.css" })
@Override
MyGridStyle css();
}


@Shared
public interface MyGridStyle extends GridStyle {


@Override
String cell();

String onDark();


@Override
String row();


@Override
String rowBodyRow();


@Override
String rowHighlight();


@Override
String rowOver();


@Override
String rowWrap();


@Override
String rowSelected();


@Override
String scroller();
}


public MyGridAppearance() {
super(MyGridResources.INSTANCE);
}
}

MyGrid.css file:
.cell {
background-color: none !important;
background: none !important;
border: 0px solid transparent;
border-right-color: transparent !important;
border-left-color: transparent !important;
border-bottom-width: 1px;
border-bottom-color: rgba(204, 204, 204, 0.6) !important;
vertical-align: middle;
font: 12px segoe ui, tahoma, arial, sans-serif;
}


.cellInner {
line-height: 20px !important;
}


.columnLines .cell {
border-right: 0px solid;
}


.footer {
background: transparent;
border-top: none;
border-bottom: none;
display: block;
overflow: hidden;
position: relative;
border: 1px solid transparent;
}


.rowWrap {
border-style: solid !important;
border-width: 0px !important;
border-bottom-width: 1px !important;
border-right-color: transparent !important;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: rgba(204, 204, 204, 0.6) !important;
}


.rowOver .rowWrap .cell, .rowSelected .rowWrap .cell {
background-color: transparent !important;
background: none !important;
border-bottom-color: transparent !important;
border-bottom: 0px solid transparent !important;
}


/** under rowWrap and cell **/
.row:first-child .cell, .row:first-child .rowWrap, .rowWrap .cell{
border-botttom-color: transparent !important;
}


.rowHighlight, .rowSelected {
border-width: 0px;
background-color: transparent !important;
background: none !important;
}


.rowOver .cell, .rowOver .rowWrap {
border-width: 0px;
background-color: transparent !important;
background: #b3bcc4 !important;
border-bottom: 1px solid rgba(204, 204, 204, 0.6) !important;
cursor: pointer;
border-bottom-color: rgba(204, 204, 204, 0.6) !important;
color: #333;
}


.rowSelected .cell, .rowSelected .rowWrap {
background: literal("linear-gradient(#66abd1, #2488bc)") !important;
background: literal("-webkit-gradient(linear, left top, left bottom, color-stop(0%, #66abd1), color-stop(100%, #2488bc))") !important;
background: literal("-moz-linear-gradient(top, #66abd1 0%, #2488bc 100%)") !important;
color: #fff;
border-color: transparent !important;
border-width: 0px;
border-bottom: 1px solid rgba(204, 204, 204, 0.6) !important;
border-style: solid !important;
border-bottom-color: rgba(204, 204, 204, 0.6) !important;
}


.onDark .rowSelected .cell, .rowSelected .rowWrap {
background-color: #2387bc !important;
color: #fff;
border-color: transparent !important;
border-width: 0px;
border-bottom: 1px solid rgba(204, 204, 204, 0.6) !important;
border-style: solid !important;
border-bottom-color: rgba(204, 204, 204, 0.6) !important;
}


.scroller {
background-color: transparent !important;
background: none !important;
}

MyGridView.java:

Grid in Page1.java:
GridView<GridSample> myGridView = new GridView<GridSample>(new MyGridAppearance());

[Colin Alworth]

At a glance, I'd guess that this is the line:

.cellInner {
    line-height: 20px !important;
}

Nothing else jumps right out at me, but again, since this *only* happens after drawing that grid, it seems to suggest that something here is the problem.

But in order to test, I will need to set up a full project for this. Have you tested any of the comments I made? Did you come to any results that shed any light on this?

[Colin Alworth]

This is looking likely as the issue - from the default Grid.css file:

.cellInner {
  overflow: hidden;
  padding: 4px 3px 3px 5px;
  line-height: 13px;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

As you are setting this taller than expected, the LiveGridView's expectation of each grid row height is incorrect. One option is to apply this same change (line-height:20px) to all grids, and inform the LiveGridView of the corrected row height, another is described below.

GXT 3.0's Grid appearances do not play well when more than once grid appearance is used within a single app. This is a defect we have logged, but unfortunatly it will require API-breaking changes in the grid appearance to fully rectify, so it must wait until 3.1. This is discussed in more depth at http://www.sencha.com/forum/showthread.php?255509.

One way to deal with this - add a new class name, unique to that appearance, and apply that class name to the grid, then reference it in your css file to qualify specific changes that should apply only to that grid.

[sharon_y]

Thanks for your detailed information.
Adding the following two lines to MyGridAppearance.MyGridStyle:
@Override
String cellInner();

This fixes the problem.

-Sharon

[Colin Alworth]

Thanks for the update - I've closed this issue. If you happen to find another way to reproduce it (other posters mentioned that they also had this issue), please reply and I'll take a look at your test cases.