Table / Width Resizing Issue

Vaadin 6 / 7 / 8 Framework UI
1

Hi All,

I have lokeed for this specific problem in the forum but couldn’t find any answer, here is the situation.

I have a table, (which seems to be ignoring all my directives related to column width) but anyway that is not issue, the thing is that when the Table is empty, it has certain width for the columns. Right after I add the first item to the table, it resizes the width of the columns, and this ‘resizing effect’ doesn’t look good at all.

Is there a way to fix the width of the columns in a table so it doesn’t resize when an item is added??

Thanks in advance!

This is the code in my app:


tbl_asignacionPlazos = new Table();
			tbl_asignacionPlazos.setEditable(false);
			tbl_asignacionPlazos.setWidth("100%");
			tbl_asignacionPlazos.setHeight("200px");
			tbl_asignacionPlazos.addContainerProperty("Day", String.class, null);
			tbl_asignacionPlazos.addContainerProperty("Week", String.class, null);
			tbl_asignacionPlazos.addContainerProperty("Delete", Button.class, null);
			tbl_asignacionPlazos.addContainerProperty("Edit", Button.class, null);

And then this is the code for adding items to table, this method is linked to an “add” button… I needed to rewrite all those createField methods so I could have specific cells editable and button with edit/delete actions for an specific row. I don’t know if this could be affecting the table performance.


private void addItemToTable(String dias, String porcentaje) {
		final Button btn_deleteItem = new Button();
		btn_deleteItem.setIcon(new ThemeResource("images/icons/delete_small.png"));
		btn_deleteItem.setData(itemTableID);
		btn_deleteItem.addListener(new Button.ClickListener() {

			private static final long serialVersionUID = -3305187823974671807L;

			public void buttonClick(ClickEvent event) {
				tbl_asignacionPlazos.removeItem(btn_deleteItem.getData());
			}
		});

		final Button btn_editItem = new Button();
		btn_editItem.setIcon(new ThemeResource("images/icons/edit_small.png"));
		btn_editItem.setData(itemTableID);
		btn_editItem.addListener(new Button.ClickListener() {

			private static final long serialVersionUID = -5705679320532993245L;

			public void buttonClick(final ClickEvent event) {
				tbl_asignacionPlazos.setEditable(true);
				tbl_asignacionPlazos.setTableFieldFactory(new TableFieldFactory() {

					private static final long serialVersionUID = 3515162501766841315L;
					public Field createField(Container container, Object itemId, Object propertyId, Component uiContext) {

						Integer idItem = (Integer) itemId;
						if (event.getButton().getData().equals(idItem)) {

							if (propertyId.toString().equals("Dia") || propertyId.toString().equals("Porcentaje")) {
								return DefaultFieldFactory.get().createField(container, itemId, propertyId, uiContext);

							}
						}
						return UIUtils.createFieldReadOnly(container, itemId, propertyId, uiContext);
					}
				});
			}
		});
tbl_asignacionPlazos.addItem(new Object[] { dias, porcentaje, btn_deleteItem, btn_editItem }, new Integer(itemTableID));
		itemTableID++;
}
2

Related to the column width issue - your code doesn’t mention it but did you use the methods for setting the column width?

public void setColumnWidth(Object propertyId, int width)
public void setColumnExpandRatio(Object propertyId, float expandRatio)

If you don’t have either a fixed pixel size or an expand ratio set for the columns, they will change sizes based on the data within the columns, basically ending up with a best effort to show all content without cutting any of it off.

3

Hi, thanks for the answer. Yes, I have tried those methods but they don’t seem to make any difference, don’t know exactly why.

I have tried setColumnWidth like this (and also with Width of 100% and also commenting that line), but the table never changes column widths.


	tbl_asignacionPlazos = new Table();
			tbl_asignacionPlazos.setEditable(false);
			tbl_asignacionPlazos.setWidth("600px");
			tbl_asignacionPlazos.setHeight("200px");
			tbl_asignacionPlazos.addContainerProperty("Dia", String.class, null);
			tbl_asignacionPlazos.addContainerProperty("Porcentaje", String.class, null);
			tbl_asignacionPlazos.addContainerProperty("Eliminar", Button.class, null);
			tbl_asignacionPlazos.addContainerProperty("Editar", Button.class, null);
			tbl_asignacionPlazos.setColumnWidth(0, 200);
			tbl_asignacionPlazos.setColumnWidth(1, 200);
			tbl_asignacionPlazos.setColumnWidth(2, 100);
			tbl_asignacionPlazos.setColumnWidth(3, 100);

And setColumnExpandRatio like this


			tbl_asignacionPlazos = new Table();
			tbl_asignacionPlazos.setEditable(false);
			tbl_asignacionPlazos.setWidth("600px");
			tbl_asignacionPlazos.setHeight("200px");
			tbl_asignacionPlazos.addContainerProperty("Dia", String.class, null);
			tbl_asignacionPlazos.addContainerProperty("Porcentaje", String.class, null);
			tbl_asignacionPlazos.addContainerProperty("Eliminar", Button.class, null);
			tbl_asignacionPlazos.addContainerProperty("Editar", Button.class, null);
			tbl_asignacionPlazos.setColumnExpandRatio(0, 0.4f);
			tbl_asignacionPlazos.setColumnExpandRatio(1, 0.4f);
			tbl_asignacionPlazos.setColumnExpandRatio(2, 0.1f);
			tbl_asignacionPlazos.setColumnExpandRatio(3, 0.1f);

And also didn’t change columns width and keeps the same resizing effect when I add an item to the table.

Any help on why could be happening this would be really appreciate it.

Thanks,

4

The first parameter for both the methods is the propertyId. So please use e.g. “Dia”, “Porcentaje” and so on for the first parameter - not the column index. It should work then :)

5

that worked, it was a noob mistake ! thank you very much sir!