vaadin table, on scrolling data of table cell evaporate

Hi,

I’m using vaadin table component to display user information. I have used various vaadin component inside table.

1 column) Date [new Label(date,Label.XHTML)]

2 column) User address [new CustomVerticalLayout(new Label(info,Label.XHTML))]

3 column) Username [String]

4 column) Customer [new CustomVerticalLayout(new Label(info,Label.XHTML))]

5 column) Join Date [new Label(date,Label.XHTML)]

6 column) A/C No. [String]

Other important details :-
setPageLength(1);
setCacheRate(0.1);

I have an attached screenshot[ table.png ]

I have no clue whats going wrong, if anyone ever faced it please share your solution or if you guys have any idea what could be the problem please share.

Thank you

-Shyam
12375.png

First of, setPageLength(1) does not really make sense as that would make your table one row high. Your table is clearly higher than one row so I guess you are calling setHeight after it.

But to the case, you should check if the items are actually missing, or are they just invisible. In the browser, you can use something like Chrome’s inspector, Firefox’s Firebug or Internet Explorer’s Developer Tools to check the HTML of the cells to see if the content is there or not. Then you could check if the data is actually in the container behind the table with a debugger. Then you could check that your data fetching actually brings the item.

Knowing exactly at which point the data disappears helps. That way it will be easier to point out what went wrong.

Thank you Jens

First of, setPageLength(1) does not really make sense as that would make your table one row high. Your table is clearly higher than one row so I guess you are calling >setHeight after it.
Yes, You’r right.

But to the case, you should check if the items are actually missing, or are they just invisible. In the browser, you can use something like Chrome’s inspector, Firefox’s Firebug or >Internet Explorer’s Developer Tools to check the HTML of the cells to see if the content is there or not. Then you could check if the data is actually in the container behind the >table with a debugger. Then you could check that your data fetching actually brings the item.

Knowing exactly at which point the data disappears helps. That way it will be easier to point out what went wrong.

As soon as i refresh browser then i can see all cell data.

There is no data in td, see attached screenshot which display td structure of a blank cell[using firebug]

Please let me know if you need more details
12376.png

Actually there is data in the td. There is a CssLayout in it. Your listing of columns doesn’t mention any CssLayouts in it. Are you sure the listing is correct?

Thanks Jens, As Label was not visible/evaporate therefore to solve the issue I put Label inside CssLayout but the problem still persist.

Both below methods not working same problem still exists


private Component generateDateCellV1(Date d)
	{
		return new Label(d == null ? "" : DateFormatUtils.format(d, "EEE M/d/yyyy") + "<br/>"
			+ DateFormatUtils.format(d, "h:mm a"), Label.CONTENT_XHTML);
	}

output : tdstructure-label.png


private Component generateDateCellV2(Date d)
	{
		CssLayout cl = new CssLayout();
		cl.setWidth("100%");
		cl.setMargin(false);
		cl.addComponent(new Label(d == null ? "" : DateFormatUtils.format(d, "EEE M/d/yyyy") + "<br/>"
			+ DateFormatUtils.format(d, "h:mm a"), Label.CONTENT_XHTML));
		return cl;
	}

Output: tdstructure-csslayout.png

12377.png
12376.png

Are you sure that method is not called with a null parameter for date? That would cause the calling of:

return new Label(d == null ? "" : DateFormatUtils.format(d, "EEE M/d/yyyy") + "<br/>"
            + DateFormatUtils.format(d, "h:mm a"), Label.CONTENT_XHTML);

==>

return new Label("", Label.CONTENT_XHTML);

Which produces the html that you have.

Debugging tools work great to see what really is going on on runtime.

Yes, Jens I’m 100% sure I already checked even checked again after you raised it.

I’m loading table just after creating using addItem(…) method.
On page load i can see all values, the problem only comes when i move scroll down then up, as soon as i refresh browser all those cells(which previously hid there values) show me correct data.

I also trying to debug Table.class on scroll up and down and found label values(i.e. date) also exists there too.

Red mark line below displayed all cell values. Nothing missing


 private Object[][]
 getVisibleCellsNoCache(int firstIndex, int rows,
            boolean replaceListeners) {
                        .............
                        .............
                        .............
                        int indexInOldBuffer = index - pageBufferFirstIndex;
                        if (index < firstIndexNotInCache
                                && index >= pageBufferFirstIndex
                                && pageBuffer[CELL_GENERATED_ROW]
[indexInOldBuffer]
 == null
                                && id.equals(pageBuffer[CELL_ITEMID]
[indexInOldBuffer]
)) {
                            // we already have data in our cache,
                            // recycle it instead of fetching it via
                            // getValue/getPropertyValue
                           [color=#fa0404]
 value = pageBuffer[CELL_FIRSTCOL + j]
[indexInOldBuffer]
;
[/color]
                            if (!isGeneratedColumn && iscomponent[j]

                                    || !(value instanceof Component)) {
                                listenProperty(p, oldListenedProperties);
                        .............
                        .............
                        .............

I’m stuck on this :frowning:

Any idea where to go now ?? any solution??

I’m a bit lost without seeing the project. Try removing features out of the view until it starts behaving normally to find what is causing it, or alternatively do it the other way around; start with a new clean table and add features to it until it breaks.

Hi Guys,

Finally I have solved this.

Problem was in my custom component class, equals(…) and hashcode() methods were not implemented properly there.

Therefore two or more different custom components inside table were treated as same component.

After removing these two methods everything is working like a charm.

Thank you

-Shyam

Hi, Shyam Shridhar .
I have same problem with table. Can you explain, how you make it work? you removed equals and hashCode from your bean class? this problem makes me sad :slight_smile: it looks like smth wrong with the component. “equals” and “hashCode” methods are overrided in my bean class (objects, which I’m adding to table), but those methods are works fine in, for example, HashMap. How those methods influences to table? thanks

Some details.
Values becomes empty only in generated column. in it im’m using such code


        table.addGeneratedColumn("formattedName", new CustomTable.ColumnGenerator() {
            public Object generateCell(CustomTable customTable, Object itemId, Object columnId) {
                Label l = new Label((String)customTable.getItem(itemId).getItemProperty(columnId).getValue());
                l.setContentMode(Label.CONTENT_XHTML);

                return l;
            }
        });

All works fine, untill Label starts think, that it’s value is cached on client (or it’s really cached, don’t know). So it starts to send such json on table scrolling


              [ "tr",
                { "key" : 442 },
// here the value of Label
                [ "5",
                  { "cached" : true,
                    "id" : "PID1018"
                  }
                ],
// other values, that displays properly
              ],

in normal state it sends such response:


              [ "tr",
                { "key" : 441 },
                [ "5",
                  { "id" : "PID1110",
                    "mode" : "xhtml",
                    "width" : "100.0%"
                  },
                  [ "data",
                    {  },
                    [ "div",
                      { "xmlns" : "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" },
                      "  formatted label value"
                    ]
                  ]
                ],
// other values, that displays properly all the time
              ],

So, I didn’t finded any better way, than write such code:


        table.addGeneratedColumn("formattedName", new CustomTable.ColumnGenerator() {
            
            private Map<Object, Label> labelsCache = new HashMap<Object, Label>();
            
            public Object generateCell(CustomTable customTable, Object itemId, Object columnId) {
                Label l = labelsCache.get(itemId);
                Object val = customTable.getItem(itemId).getItemProperty(columnId).getValue();
                if (l == null) {
                    l = new Label((String)val);
                    l.setContentMode(Label.CONTENT_XHTML);
                } else if (!l.getValue().equals(val)) {
                    l.setValue(val);
                }

                return l;
            }
        });

Don’t shure, maybe this thing was somewhere in documentation on tutorial, but I believe, that it can help somebody in solving similiar problem.