Buy me a coffee :)

Wicket - jQuery UI

jQuery UI integration in Wicket 6.x, Wicket 7.x , Wicket 8.x & Wicket 9.x

MultiSelect: lazy load

Components / Samples


This sample shows how to use the Kendo UI MultiSelect with lazy loading choices.


This MultiSelect implementation - in the "lazy" package - differs from the other one as it does not inherit from ListMultipleChoice built-in component.


Do not re-attach the MultiSelect directly to the AjaxRequestTarget, attach its container instead (the form for instance)




Kendo UI "Core" is Apache License 2.0 licensed, starting from version 2014.1.416.
Prior to version 2014.1.416, Kendo UI "Web" was licensed under GPLv3.

A pro version - with a commercial license - is also available, it provides additional widgets (see
To be able to use it, you need to change the ResourceReference with kendo.all.min.js

See also



  • Java
  • HTML
  • CSS
package com.googlecode.wicket.jquery.ui.samples.kendoui.multiselect;

import java.util.Arrays;
import java.util.List;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.Model;
import org.apache.wicket.util.lang.Generics;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.googlecode.wicket.kendo.ui.form.button.AjaxButton;
import com.googlecode.wicket.kendo.ui.form.button.Button;
import com.googlecode.wicket.kendo.ui.form.multiselect.lazy.MultiSelect;
import com.googlecode.wicket.kendo.ui.panel.KendoFeedbackPanel;

public class LazyMultiSelectPage extends AbstractMultiSelectPage
	private static final long serialVersionUID = 1L;
	private static final Logger LOG = LoggerFactory.getLogger(LazyMultiSelectPage.class);
	private static final List<String> GENRES = Arrays.asList("Black Metal", "Death Metal", "Doom Metal", "Folk Metal", "Gothic Metal", "Heavy Metal", "Power Metal", "Symphonic Metal", "Trash Metal", "Vicking Metal");

	public LazyMultiSelectPage()
		Form<Void> form = new Form<Void>("form");

		// FeedbackPanel //
		final KendoFeedbackPanel feedback = new KendoFeedbackPanel("feedback");

		// MultiSelect //
		List<String> selected = Generics.newArrayList();
		selected.add("Heavy Metal");
		selected.add("Trash Metal");

		final MultiSelect<String> multiselect = new MultiSelect<String>("select", Model.ofList(selected)) {

			private static final long serialVersionUID = 1L;

			public List<String> getChoices()
					// simulate load duration //
				catch (InterruptedException e)
					if (LOG.isDebugEnabled())
						LOG.debug(e.getMessage(), e);

				return GENRES;


		// Buttons //
		form.add(new Button("submit") {

			private static final long serialVersionUID = 1L;

			public void onSubmit()

		form.add(new AjaxButton("button") {

			private static final long serialVersionUID = 1L;

			protected void onSubmit(AjaxRequestTarget target)

	private void info(MultiSelect<String> multiselect)
		Object choice = multiselect.getModelObject(); != null ? choice.toString() : "no choice");
<!DOCTYPE html>
<html xmlns:wicket="">
	<title>Wicket Kendo UI: multi-select</title>
	<div id="demo-panel">
		<form wicket:id="form">
			<select wicket:id="select" style="width: 460px;"></select>
			<button wicket:id="submit" type="submit">Submit</button>
			<button wicket:id="button">Ajax Button</button>
			<div wicket:id="feedback" style="width: 460px;"></div>