Hiding columns makes editable columns read only in HTML sometimes

Vaadin 6 / 7 / 8 Framework UI
1

I have a Grid with some editable columns. Most are effectively text fields, but one is a ComboBox and one is a DateField. When I hide two read only fields, something weird happens: the first time I click on the line to edit it, the ComboBox and DateField work fine. But then if I click on another line, they both are effictively read only/disabled. This is NOT at the Java level, this is in the HTML for the edit form. If I exit the edit form, and come back, it will work. I get around it for now with the following code, triggered when I click the line:

	private void selectItemFromGrid( ItemClickEvent event ) {
		if (gridComponent.isEditorEnabled())
		{
			Object itemId = event.getItemId();
			
			if( itemId instanceof CalculatorPlan &&
					((PlanType) itemId).getWmsItem() instanceof String &&
					!((PlanTypeImpl) itemId).getWmsItem().trim().equals(emptyItem.getWmsItem().trim()))
			{
				Object selectedItem = gridComponent.getSelectedRow();
				CalculatorPlan plan = (CalculatorPlan) itemId;

//				Field<?> field = gridComponent.getColumnEditField("chosenDesignNumSignals");
//				Field<?> field = gridComponent.getColumnEditField("chosenDesignNumBins");
				
				Field<?> field = gridComponent.getColumnEditField("chosenDesignNumBinsOrResizedBins");
				
				UI ui = getUI();
				
				if(field instanceof ComboBox)
				{
					ComboBox chosenNumBins = (ComboBox) field;
					
					if( gridComponent.isAnyColumnHidden() )
					{
						ui.access(()->{
							chosenNumBins.setReadOnly(true);
							ui.push();

							chosenNumBins.setReadOnly(false);
							ui.push();
						});
					}
					
					String numBins = plan.getChosenDesignNumBins();
					
					settingUpChosenDesignNumBinCombo = true;
					chosenNumBins.removeAllItems();
										
					if(!plan.isKeepOrderQty())
					{
						chosenNumBins.addItem("-9999");
						chosenNumBins.setItemCaption("-9999", "HOLD");
					}
					
					if( plan.getSignal() instanceof List && !plan.getSignal().isEmpty())
					{
						List<SignalType> signals = plan.getSignal();
						for( SignalType signal : signals)
						{
							chosenNumBins.addItem(signal.getNumBins());
						}
						
						chosenNumBins.setValue(numBins);
					}
					
					settingUpChosenDesignNumBinCombo = false;
					
					if(plan.isKeepOrderQty())
					{
						chosenNumBins.setReadOnly(true);
					}
				}
				
				if( gridComponent.isAnyColumnHidden() )
				{
					field = gridComponent.getColumnEditField("planStartDateTime");
					if(field instanceof DateField)
					{
						DateField dField = (DateField) field;
						ui.access(()->{
							dField.setReadOnly(true);
							ui.push();

							dField.setReadOnly(false);
							ui.push();
						});
					}
				}
				
				gridComponent.editItem(itemId);

				selectedItem = gridComponent.getSelectedRow();

				if( selectedItem == itemId )
				{
					;
				}
			}
		}
	}

Basically, I have to make the two problematic fields read only and then not read only to get around it, and since this is all happens in the browser, I have to use Push. Am I doing something wrong with Vaadin 7 Grid?

BTW, gridComponent.isAnyColumnHidden() simply goes through all the columns in the grid to see if any are hidden. Very simple code inside my GridComponent, which actually just wraps a Grid with other components we want connected to our Grids.

Note that if the columns are NOT hidden, I have no problems. Also, I have the same problem whether I hide the columns programmatically or let the user hide columns.

This is an extremely complex situation, so the above is the easiest and shortest example I can give. Hopefully it is sufficient.

Thanks.

2

I think configuring the editor in the item click event is too late, as editor is bound to be opened in browser, and can be already opened when this code executes in Java. So this kind of dynamic configuration is not really supported in Grid’s editor. You should configure the Grid’s editor outside the event. There might be something else to this, as your use case seems to be complex and your code example does not convey all the details.

3

Everything works fine if I don’t hide the columns, which does happen outside the edit event. In other words, if I don’t allow hiding columns by user and don’t hide columns programmatically, all of it works perfectly. So I don’t understand why configuring the editor would cause a problem, since that code has been working for months.

Also, I have to configure in the click event because the ComboBox could change based on the line in question. That said, it might be interesting to set the ComboBox earlier, outside of the item click event, and comment out everything up to gridComponent.editItem (this just calls grid.editItem, BTW). I tend to doubt that is a problem, but it is a valid troubleshooting experiment. My solution with push works mostly, but still seems to cause weird issues from time to time, so I still need to dig into it.

I would bet money that if I got rid of the 2 columns I am hiding entirely, it would work perfectly, without my push code above. I honestly think somehow grid.hideColumn is doing something in HTML that is messing things up, and totally removing the columns would confirm this.

I will do more experiments and see. Thanks.

4

Some additions:

  1. Removing column entirely let’s me get rid of the push logic, and things work perfectly
  2. I said above my work around code works better then the original, but did not explain why it was still broken. If I keep clicking enough times, eventually these 2 fields become read only, but then if I click another line and come back, they will normally work. Before it would never work after clicking one line, until I exited edit mode entirely.
  3. I moved setup of the combobox dropdown outside of the click event, and commented out from Field<?> field = gridComponent.getColumnEditField("chosenDesignNumBinsOrResizedBins"); until just before gridComponent.editItem(itemId);, still have my same original problem.
  4. Tried a weird idea and called gridComponent.cancelEditor before calling gridComponent.editItem, but that did not work either.
  5. I tried to call gridComponent.editItem(null); before calling gridComponent.editItem(itemId);, but that of course failed with a perfectly valid exception. This did not really surprise me, just wanted to try it.
5

Your observations are bizarre, but it is hard for me to comment further without simplified demo (strip away everything that is not relevant) that replicates the problem.

I have done quite a lot experimentation with Grids editor in the past and not observed your exact behavior.

For example in this demo toggling the column visiblity does not have problem with Grids edit fields read only state.

https://tatu.app.fi/GridFastNavigation-demo-2.5.3/

6

Well, rats. I was about to tell you I use GridFastNavigation, but since your demo works, that can’t be it.

One addition is that I use the excellent multi line column heading add-on, org.vaadin.teemusa.gridextensions.wrappinggrid.WrappingGrid. Kind of tricky to use, but works decently well. I suppose this could be causing issues.

For now, to get my users working, I ended up totally removing the columns I was hiding, and that consistently works. I will come back to this when my users need to hide columns (right now we don’t let them). I may also experiment with a considerably simpler grid and user enabled hiding of columns, see what I experience there. Also will maybe disable the WrappingGrid, see if that helps.

Thanks.