dropdown/comboxbo two-way binding to a viewModel

Flow
1

Hi!

I’trying to get a dropdown menu or a combobox to work with two-way-binding with my ViewModel.

My ViewModel extends the TemplateModel Class and has the following property getters and setters:

int getSelectedPlatformId();
void setSelectedPlatformId(int selectedPlatformId);

List<Platform> getPlatforms();
void setPlatforms(List<Platform> platforms);

Then in the template I tried the following:

<vaadin-dropdown-menu placeholder="Platform" value="{{ selectedPlatformId }}">
	<template>
		<vaadin-list-box>
			<dom-repeat items="[[platforms]
]">
				<template>
					<vaadin-item label="[[ item.description ]
]" value="[[ item.id ]
]">[[ item.description ]
] - [[ item.id ]
]</vaadin-item>
				</template>
			</dom-repeat>
		</vaadin-list-box>
	</template>
</vaadin-dropdown-menu>

or with combo-box binding to value or selectedValue:

<vaadin-combo-box value="{{ selectedPlatformId }}" item-value-path="id" item-label-path="description" items="[[platforms]
]"></vaadin-combo-box>
or
<vaadin-combo-box selectedValue="{{ selectedPlatformId }}" item-value-path="id" item-label-path="description" items="[[platforms]
]"></vaadin-combo-box>

both display the values from “platforms” just fine. But two-way-binding just doesn’t seem to work. I have a search button and a callback that fires in the view class when button clicked. When I try to read the value of selectedPlatformId from the ViewModel inside the button callback like this:

@EventHandler
public void searchButtonClick() {
	int selectedPlatformId = this.getModel().getSelectedPlatformId();
	// the value is always e.g. 0
}

there value is not updated. It’s always the default value. But when I manually listen to the change event(which only fires on vaadin-combo-box but not vaadin-dropdown-menu) I get the new value by reading the DOM element’s value from the event in the callback. What am I missing? Normal input fields (vaadin-text-field) two-way-binding works just fine.

I’m just starting to work with vaadin and I polymer, so I probably just missed something important.

2

Bump.

3

Hi Christian!

I tried to reproduce your problem, and I was able to, and then I think solved it. The problem is that you used some extra spaces between the curly braces and the property name. You used:

<vaadin-combo-box value="{{ selectedPlatformId }}" item-value-path="id" item-label-path="description" items="[[platforms]
]"></vaadin-combo-box>

If you replace that with this, it will work:

<vaadin-combo-box value="{{selectedPlatformId}}" item-value-path="id" item-label-path="description" items="[[platforms]
]"></vaadin-combo-box>

Can you try that?

4

Hi guys, I’m struggling on COMBOBOX BINDIG too! Using Vaadin 10 I need to bind the value of combobox.

scenario… simple GRID with FORM EDITOR. When grid item selected the editor appears. Here I need to bind a value from the grid to the combobox. The value retrieved is field of Tours.class and it’s a String.

private ComboBox<String> paese = new ComboBox<String>();
Binder<Tours> binder = new Binder<>(Tours.class);
binder.forField(paese).bind(Tours::getPaese,Tours::setPaese);
Vaadin is running in DEBUG MODE.

===========================================================
2018-09-28 00:23:52.044  INFO 7584 --- [nio-8080-exec-1]

c.vaadin.flow.spring.SpringInstantiator : The number of beans implementing ‘I18NProvider’ is 0. Cannot use Spring beans for I18N, falling back to the default behavior
2018-09-28 00:23:54.056 INFO 7584 — [nio-8080-exec-1]
o.h.h.i.QueryTranslatorFactoryInitiator : HHH000397: Using ASTQueryTranslatorFactory
2018-09-28 00:24:06.860 ERROR 7584 — [nio-8080-exec-1]
c.v.flow.server.DefaultErrorHandler :

java.lang.RuntimeException: java.lang.IllegalArgumentException: The provided value is not part of ComboBox: Brasile
at com.vaadin.flow.server.communication.rpc.PublishedServerEventHandlerRpcHandler.invokeMethod(PublishedServerEventHandlerRpcHandler.java:175) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.server.communication.rpc.PublishedServerEventHandlerRpcHandler.invokeMethod(PublishedServerEventHandlerRpcHandler.java:130) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.server.communication.rpc.PublishedServerEventHandlerRpcHandler.handleNode(PublishedServerEventHandlerRpcHandler.java:118) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.server.communication.rpc.AbstractRpcInvocationHandler.handle(AbstractRpcInvocationHandler.java:64) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.server.communication.ServerRpcHandler.handleInvocationData(ServerRpcHandler.java:377) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.server.communication.ServerRpcHandler.lambda$handleInvocations$0(ServerRpcHandler.java:367) ~[flow-server-1.0.5.jar:na]

at java.util.ArrayList.forEach(ArrayList.java:1257) ~[na:1.8.0_161]

at com.vaadin.flow.server.communication.ServerRpcHandler.handleInvocations(ServerRpcHandler.java:367) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.server.communication.ServerRpcHandler.handleRpc(ServerRpcHandler.java:309) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.server.communication.UidlRequestHandler.synchronizedHandleRequest(UidlRequestHandler.java:89) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:40) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.server.VaadinService.handleRequest(VaadinService.java:1486) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.server.VaadinServlet.service(VaadinServlet.java:300) [flow-server-1.0.5.jar:na]

at javax.servlet.http.HttpServlet.service(HttpServlet.java:742) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:728) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationDispatcher.processRequest(ApplicationDispatcher.java:470) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationDispatcher.doForward(ApplicationDispatcher.java:356) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationDispatcher.forward(ApplicationDispatcher.java:316) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.springframework.web.servlet.mvc.ServletForwardingController.handleRequestInternal(ServletForwardingController.java:141) [spring-webmvc-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.springframework.web.servlet.mvc.AbstractController.handleRequest(AbstractController.java:177) [spring-webmvc-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter.handle(SimpleControllerHandlerAdapter.java:52) [spring-webmvc-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:991) [spring-webmvc-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:925) [spring-webmvc-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:974) [spring-webmvc-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:877) [spring-webmvc-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at javax.servlet.http.HttpServlet.service(HttpServlet.java:661) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:851) [spring-webmvc-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at javax.servlet.http.HttpServlet.service(HttpServlet.java:742) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52) [tomcat-embed-websocket-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:99) [spring-web-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) [spring-web-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.springframework.web.filter.HttpPutFormContentFilter.doFilterInternal(HttpPutFormContentFilter.java:109) [spring-web-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) [spring-web-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:93) [spring-web-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) [spring-web-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:200) [spring-web-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) [spring-web-5.0.9.RELEASE.jar:5.0.9.RELEASE]

at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:198) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:493) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:140) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:81) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:87) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:342) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:800) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:806) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1498) [tomcat-embed-core-8.5.34.jar:8.5.34]

at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) [tomcat-embed-core-8.5.34.jar:8.5.34]

at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149) [na:1.8.0_161]

at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624) [na:1.8.0_161]

at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) [tomcat-embed-core-8.5.34.jar:8.5.34]

at java.lang.Thread.run(Thread.java:748) [na:1.8.0_161]

Caused by: java.lang.IllegalArgumentException: The provided value is not part of ComboBox: Brasile
at com.vaadin.flow.component.combobox.ComboBox.setValue(ComboBox.java:526) ~[vaadin-combo-box-flow-1.0.7.jar:na]

at com.vaadin.flow.data.binder.Binder$BindingImpl.initFieldValue(Binder.java:1119) ~[flow-data-1.0.5.jar:na]

at com.vaadin.flow.data.binder.Binder$BindingImpl.access$200(Binder.java:966) ~[flow-data-1.0.5.jar:na]

at com.vaadin.flow.data.binder.Binder.lambda$setBean$1(Binder.java:1637) ~[flow-data-1.0.5.jar:na]

at java.util.ArrayList.forEach(ArrayList.java:1257) ~[na:1.8.0_161]

at com.vaadin.flow.data.binder.Binder.setBean(Binder.java:1637) ~[flow-data-1.0.5.jar:na]

at com.trumbelio.lista.TourEditor.setTours(TourEditor.java:252) ~[classes/:na]

at com.trumbelio.lista.MainView.lambda$setupGrid$3fab9f70$1(MainView.java:103) ~[classes/:na]

at com.vaadin.flow.component.grid.AbstractGridSingleSelectionModel$1.lambda$addValueChangeListener$864f22c8$1(AbstractGridSingleSelectionModel.java:135) ~[vaadin-grid-flow-1.0.5.jar:na]

at com.vaadin.flow.component.ComponentEventBus.fireEvent(ComponentEventBus.java:133) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.component.Component.fireEvent(Component.java:358) ~[flow-server-1.0.5.jar:na]

at com.vaadin.flow.component.grid.Grid.access$100(Grid.java:108) ~[vaadin-grid-flow-1.0.5.jar:na]

at com.vaadin.flow.component.grid.Grid$SelectionMode$1$1.fireSelectionEvent(Grid.java:170) ~[vaadin-grid-flow-1.0.5.jar:na]

at com.vaadin.flow.component.grid.AbstractGridSingleSelectionModel.doSelect(AbstractGridSingleSelectionModel.java:194) ~[vaadin-grid-flow-1.0.5.jar:na]

at com.vaadin.flow.component.grid.AbstractGridSingleSelectionModel.selectFromClient(AbstractGridSingleSelectionModel.java:66) ~[vaadin-grid-flow-1.0.5.jar:na]

at com.vaadin.flow.component.grid.Grid.select(Grid.java:1983) ~[vaadin-grid-flow-1.0.5.jar:na]

at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_161]

at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_161]

at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_161]

at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_161]

at com.vaadin.flow.server.communication.rpc.PublishedServerEventHandlerRpcHandler.invokeMethod(PublishedServerEventHandlerRpcHandler.java:168) ~[flow-server-1.0.5.jar:na]

... 66 common frames omitted
5

Martín López:
Hi Christian!

I tried to reproduce your problem, and I was able to, and then I think solved it. The problem is that you used some extra spaces between the curly braces and the property name. You used:

<vaadin-combo-box value="{{ selectedPlatformId }}" item-value-path="id" item-label-path="description" items="[[platforms]

]">


If you replace that with this, it will work:




Can you try that?

Thank you very much Martín!

I didn’t even think that something like that would not work. I didn’t find a word about it in the polymer documentation. But i’m releaved it works not. Awesome!