Table Page length problem

Hi

I have a Table (which uses some generated columns) where i display some tasks to the user, The table height is set to “500px” width is “100%”. When I initially load this page I fetch the data ,Cache the data and display them, here i set the page length to the tasks list size. so all the tasks appear to the viewer, this part is working fine. Also i have refresh button on the page which should basically clear the Cached tasks and fetch the data again from the db and display the new set of tasks. Basically i am calling the same method on the view to display the tasks. The problem i face is When the refresh button is clicked the table displays only 4 rows of Data. why is this when i I am not changing the page Length nor I am changing the table height. :frowning:


	public void updateView(final List<DailyTask> tasks) {
		if (tasks != null) {
			dailyTasksTable.removeTableData();
			dailyTasksTable.removeTableListeners();
			dailyTasksTable.addAllBeansAndSort(tasks);
                        System.out.println("Page Length  : " + dailyTasksTable.getPageLength()); //Initially this value is 15(default) but when refresh button is clicked this line displays 3 why
			dailyTasksTable.setPageLength(tasks.size());
		}
	}

This same method is called when i fetch the data for the first time and when i click the refresh button. Please see the screen shots.
12653.jpg
12654.jpg

Any suggestions… The main problem is i think that the client side is changing the page length when the Table is rendered and Calling Table setPageLength function again does not render the changes to the UI. I can see a Ticket http://dev.vaadin.com/ticket/2428 raised exactly for this. My Vaadin version is vaadin-6.6.5. It seems the bug is still there…
Any Ideas how this can be rectified.

As per the https://vaadin.com/forum/-/message_boards/view_message/248297 i Don’t like to create a new Table again… any Workaround for this problem

Any answers I have been waiting for three days for a reply

Hi,

Please clarify what exactly are you trying to achieve?

As far as I know, the page length should be set by the user only when the height of the table is undefined (e.g. setHeight(null) is called on the table). In that case the table’s height would change based on the page length.

But here you have the fixed height of 500px for the table. If you want to keep the table at that height at all times, you could just remove the setPageLength call completely and the table would stay at the set height.

-tepi

Thanks tepo

if I don’t set the page length at all the table displays only 5 rows when i refresh the data. instead it should display what ever it was displaying when the table is first loaded. It is just a refresh of the data the user might think that the data loaded previous is incorrect whereas actually it is the same data that is fetched again

Ok, then that definitely sounds like a bug to me. I assume you have checked with a debugger that when you do the refresh, that all the rows are actually inserted into the table correctly? If they are, I think you should create a ticket about this - of course the table should display all the rows.

Also, I noticed that you have different heights in the rows; this might mess up the pagelength calculation on the client side. Would you be able to share a bit about how your rows are constructed, e.g. do you have labels within the columns or are they just strings and some css?

Btw. which Vaadin version are you using?

Thanks Teppo

All the rows are inserted to the table correctly when i debug in Eclipse. My Table consists of three column generators. Where each column has its own layout consisting labels as well as images. The row height invariably varies depending upon the amount of textual data that model class(Daily Task) contains for each patient. Basically i display the Tasks for the nurse who is visiting the patients on a particular day. I use Vaadin version 6.6.5.

When i debug and watch for changes to the pagelength variable in Table class i see that the page length changes at

@Override
    public void changeVariables(Object source, Map<String, Object> variables)
//here
// Client might update the pagelength if Table height is fixed
        if (variables.containsKey("pagelength")) {
            // Sets pageLength directly to avoid repaint that setter causes
            pageLength = (Integer) variables.get("pagelength");
        }

After this even if i reset the pagelength( say to tasks.size()) again the Changes are not propagated to UI.

If you could confirm that this is a possible candidate for a ticket then i will raise a Ticket.

Thanks in advance
Ajay

Hi again,

unfortunately with the information at hand I could not reproduce the issue. I’m pasting the short code I used at the attempt below:

package com.example.tablepagelength;

import com.vaadin.Application;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.Table;
import com.vaadin.ui.Table.ColumnGenerator;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

public class TablepagelengthApplication extends Application {
    private Table t;

    @Override
    public void init() {
        setMainWindow(new Window());

        t = new Table();
        t.setWidth("100%");
        t.setHeight("500px");

        t.addContainerProperty("foo1", String.class, null);
        t.addGeneratedColumn("foo1", new ColumnGenerator() {
            @Override
            public Component generateCell(Table source, Object itemId,
                    Object columnId) {
                if (itemId == null) {
                    return null;
                }
                int item = (Integer) itemId;
                Label l = new Label("temp label");
                l.setHeight("20px");
                if (item % 2 == 0) {
                    l.setHeight("40px");
                }
                if (item % 3 == 0) {
                    l.setHeight("60px");
                }

                VerticalLayout vl = new VerticalLayout();
                vl.addComponent(l);
                return vl;
            }
        });

        rebuildTableContents();

        Button b = new Button("Reload");
        b.addListener(new Button.ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                rebuildTableContents();
            }
        });

        getMainWindow().addComponent(t);
        getMainWindow().addComponent(b);
    }

    private void rebuildTableContents() {
        System.err.println("Current page length: " + t.getPageLength());

        t.removeAllItems();
        for (int i = 0; i < 100; i++) {
            t.addItem(i);
            t.getContainerProperty(i, "foo1").setValue("Item #" + i);
        }
    }
}

As you see I have a table with a fixed height and I do not explicitly set the page length anywhere. I also have a column generator that produces columns with a layout with a label in it. The labels have differing heights.

The output of the println is 15 after the initial render and 11 after clicking the Reload button. Seems to me that 11 isn’t the correct value (10 rows are visible after reload) but it does not matter since the table has a fixed height. The table works properly at the first render and after reload clicks. I also used Vaadin 6.6.5 for this test.

So I’m at a loss. Obviously the test is missing something that is triggering the issue. Could you try out this test and possibly add some elements/logic from your code that would make the issue reproducable. If there’s reason for a ticket it would be best to have a test case anyway, so it would not be in vain.

-tepi

Sorry the exact vaadin version we are using is Vaadin 6.8.0.nightly-20111122-c22085 this i could see now when i unzipped the vaadin jar and saw the release notes.
Sorry for that truly

mean while i will try your sample

Ajay

Okay, I quickly tried the sample with the exact nightly version you mentioned and it still works properly. So obviously I’m missing something that breaks the behavior.

Thanks Teppo

Here is what i have found. I have added a theme and a few images to the column generator. I split the main window into two layouts and adding the table to a vertical layout and refresh/reload button with images to a horizontal layout. What i find from the the test app is

Initially the pagelength is 15 and after reload i found that pagelength reduced to 8.
Imagine my page with lots of images both in foreground and in background and lots of labels with long texts. No wonder why my page length is further reduced to 3 after a reload. Here is the test code[code]

package com.example.tablepagelengthapplication;

import com.vaadin.Application;
import com.vaadin.terminal.ThemeResource;
import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Table.ColumnGenerator;
import com.vaadin.ui.themes.BaseTheme;

public class TablepagelengthapplicationApplication extends Application {

private static final long serialVersionUID = -2722521381000383222L;

 private Table t;
 
 private VerticalLayout mainLayout = new VerticalLayout();
 private HorizontalLayout buttonLayout = new HorizontalLayout();

@Override
public void init() {
	setMainWindow((new Window()));
	
    t = new Table();
    t.setWidth("100%");
    t.setHeight("500px");
    t.setCacheRate(0.1);
    t.addContainerProperty("foo1", String.class, null);
    t.addGeneratedColumn("foo1", new ColumnGenerator() {
        public Component generateCell(Table source, Object itemId,
                Object columnId) {
            if (itemId == null) {
                return null;
            }
            int item = (Integer) itemId;
            Label l = new Label("temp label");
            Button vButton = new Button();
            vButton.setStyleName(BaseTheme.BUTTON_LINK);
            l.setHeight("20px");
            if (item % 2 == 0) {
                l.setHeight("40px");
                vButton.setIcon(new ThemeResource("images/Not-visited.png"));
            }
            if (item % 3 == 0) {
                l.setHeight("60px");
                vButton.setIcon(new ThemeResource("images/paivan-tyot-dis.png"));
            }

            VerticalLayout vl = new VerticalLayout();
            
            vl.addComponent(l);
            vl.addComponent(vButton);
            return vl;
        }
    });

    rebuildTableContents();
    //t.setPageLength(t.getContainerDataSource().getItemIds().size());
    Button b = new Button("Reload");
    b.setIcon(new ThemeResource("images/risk-hidden.png"));
	b.setStyleName(BaseTheme.BUTTON_LINK);
    b.addListener(new Button.ClickListener() {
        public void buttonClick(ClickEvent event) {
            rebuildTableContents();
        }
    });
    
    mainLayout.addComponent(b);
    mainLayout.addComponent(t);
    getMainWindow().addComponent(mainLayout);
	setTheme("tablepagelengthapplicationtheme");
}

private void rebuildTableContents() {
    System.err.println("Current page length: " + t.getPageLength());

    t.removeAllItems();
    for (int i = 0; i < 100; i++) {
        t.addItem(i);
        t.getContainerProperty(i, "foo1").setValue("Item #" + i);
    }
}

}

[/code]

I am attaching the images that were used. The only i made is setting the cache ratio to 0.1 for the table. Please have alook
12662.png
12663.png
12664.png

Hi again,

yeah now I got what the issue is: It’s the multi-line wrapping labels. I added the following to the theme and made the label text a bit longer so it would wrap and the problem is evident:

.v-table-cell-wrapper .v-label {
	white-space: normal;
}

Unfortunately this is not supported by vaadin table, so technically I think it’s not a bug, see e.g.
this conversation
, or
this one
or
this one
.

I don’t think there’s much that can be done about it. Depending on the amount of data you have, you may fix the situation by disabling lazy-loading (setPageLength(0)), or by increasing the cache rate. Or, if the use case allows, you could set a fixed (higher) row height and it should work ok.

You could of course see if there’s a feature request about this in the vaadin trac, or possibly create a new one if there isn’t one. The issue itself is quite difficult because when you combine lazy-loading with what is essentially randomly-sized rows, well, I think you get the picture :slight_smile:

Hope you find a way to solve this.

-tepi

Thanks Teppo

After long discussion with client about the short comings of using Vaadin we decided to let go of the fixed height of the table. Now the whole table loads when refresh is clicked. thanks again.

Regards
Ajay