TextField in the cell of Table

Hi everyone! Newbie to Vaadin here.

I want that table have a field which will become editable when i make click on it, or double click on it. Sofar found two methods to do this. One is attach listener on the table and seond one is to work with textfield.

So made it with TextField.

Created generazed column:


addGeneratedColumn("blocked", new ColumnGenerator() {
			@Override
			public Object generateCell(Table source, Object itemId, Object columnId) {
				TextField textField = new TextField();
				textField.setWidth("30px");
				textField.setValue("" + ((BestellungItem) itemId).getAnzahl_bestellt());
				textField.setReadOnly(true);
				textField.addBlurListener(new BlurListener() {

					@Override
					public void blur(BlurEvent event) {
						// TODO Auto-generated method stub
						System.out.println("BLUR - need to save changes and set field read only");
						((TextField) event.getSource()).setReadOnly(true);
					}
				});

				textField.addFocusListener(new FocusListener() {

					@Override
					public void focus(FocusEvent event) {
						// TODO Auto-generated method stub
						System.out.println("FOCUS - make this field Editable!");
						((TextField) event.getSource()).setReadOnly(false);
					}
				});
			
				return textField;
			}
		});

Pretty easy so far. So i was expecting that when i click with mouse on this column item, the focus listener should have fired and made my field readOnly=false, so i could start changing value of this field. But this does not worked this way.

However i found i can make rightlick on this field and it fires both events than:

FOCUS - make this field Editable!
BLUR - make this field not editable

so my field still stay closed :frowning:

Than i tryed to do other way. Added click listener on the table and tryed to catch this click. Got it too. But i dont know how to get now to this TextField to make it editable.


addItemClickListener(new ItemClickListener() {

			@Override
			public void itemClick(ItemClickEvent event) {
				System.out.println("CLICK ON TABLE");
			}
		});

Now i stuck with this problem and will be very glad if some1 could help me out of this problem. I think i am not the first one trying to do this in vaadin.

Using Vaadin 7.

Thanks in advance

come on guys, help me out :slight_smile:

You could do the opposite and it may be easier…Make the entire table editable and then take everything you don’t want to be able to edit and put them in the table as generated columns (any component type). Then set those components to read only or uneditable. This way you don’t need listeners to change the status of fields in a table and you can lock down columns as you need with the generated columns.

i’ve done this already :slight_smile: i dont have any problems to set column in edit. Just my user want this behavior, that he clicks on field in the table and it becomes inline edit field.

i m gonna try to put all my textfield i create into hashmap and than trying to get them from there in the click listener. maybe it will work somehow :slight_smile:

if any1 know how to do it easier please share your wisdom with me :slight_smile:

Thanks in advance

Update.

If table is set setSelectable(false); than both events focus and blur which bounded to text field are fired in the same time, thats why my plan does not work. Focus event set feld to edit, blur event sets field to readonly.

When table is set to : setSelectable(true); than text field reacts to focus only when some item selected in table.

So first user click gets the row selected, and then second click on the number in cell makes it editable.

Pretty strange vehaviour if u ask me.

I keep looking for solution

As i stated before i will try to do it with my own handlng of fields i use in the table.

So i made me container for fields i use in table:

public HashMap<String, TextField> allEditFields = new HashMap<String, TextField>();

Than added click listener to the table and made it react for click on my needed field:

addItemClickListener(new ItemClickListener() {

			@Override
			public void itemClick(ItemClickEvent event) {
				System.out.println("CLICK ON LIEFERUNG ITEMS TABLE");
				if (event.getPropertyId().equals("anzahl_bestellt")){
					System.out.println("Needed field clicked. lets open it for edit");
					TextField txt = allEditFields.get(""+((LieferungItem) event.getItemId()).getId());
					txt.setReadOnly(false);
					txt.focus();
				}
			}
		});

I know it is pretty dirty what i have done. It must go easier with just focus and blur events on the text field somehow, but i m not vaadin pro, so i m gonna stick to my solution. Later if i need many many many fields working with editing, i must get some better native solution of vaadin for this.

For now i solved my problem, even if it is a dirty hack.

Btw. all saving actions are done in the blur listener, so only focus listener will need attention some days, to get field into edit mode. Rest works OK.

Long live vaadin!