Buy me a coffee :)

Wicket - jQuery UI

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


Components / Samples


This sample shows some of the Kendo UI's grid capabilities, you can for instance sort and/or group columns.

Note 1: The sort is performed server side if the IDataProvider implements ISortStateLocator<String>
Note 2: At this stage, the grouping is performed client side. That means that only data on the current page are grouped.


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.datatable;

import java.util.List;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.util.lang.Generics;

import com.github.openjson.JSONArray;
import com.github.openjson.JSONObject;
import com.googlecode.wicket.jquery.core.Options;
import com.googlecode.wicket.jquery.core.utils.JsonUtils;
import com.googlecode.wicket.kendo.ui.datatable.DataTable;
import com.googlecode.wicket.kendo.ui.datatable.column.CurrencyPropertyColumn;
import com.googlecode.wicket.kendo.ui.datatable.column.IColumn;
import com.googlecode.wicket.kendo.ui.datatable.column.IdPropertyColumn;
import com.googlecode.wicket.kendo.ui.datatable.column.PropertyColumn;
import com.googlecode.wicket.kendo.ui.form.button.AjaxButton;
import com.googlecode.wicket.kendo.ui.panel.KendoFeedbackPanel;

public class DefaultDataTablePage extends AbstractDataTablePage
	private static final long serialVersionUID = 1L;

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

		// Form //
		final Form<?> form = new Form<Void>("form");

		// DataTable //
		Options options = new Options();
		options.set("height", 430);
		options.set("pageable", "{ pageSizes: [ 25, 50, 100 ] }");
		// options.set("sortable", true); // already set, as provider IS-A ISortStateLocator
		options.set("groupable", true);
		options.set("columnMenu", true);
		options.set("selectable", false); // Options.asString("multiple, row"). Caution does not work for 'cell'

		final DataTable<Product> table = new DataTable<Product>("datatable", newColumnList(), newDataProvider(), 25, options) {

			private static final long serialVersionUID = 1L;

			public void onColumnReorder(AjaxRequestTarget target, int oldIndex, int newIndex, JSONObject column)
				final String message = String.format("reordered: old-index=%d, new-index=%d, column=%s", oldIndex, newIndex, column.optString("field"));;

			public void onChange(AjaxRequestTarget target, JSONArray items)
				final List<Integer> ids = JsonUtils.toJSONList(items).stream().map(o -> o.getInt("id")).collect(Collectors.toList());
				final String message = String.format("Selected: %s", ids);;


		// Buttons //
		form.add(new AjaxButton("reload") {

			private static final long serialVersionUID = 1L;

			protected void onSubmit(AjaxRequestTarget target)
				table.reload(target, true);

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

			private static final long serialVersionUID = 1L;

			protected void onSubmit(AjaxRequestTarget target)

	private static IDataProvider<Product> newDataProvider()
		return new ProductDataProvider();

	private static List<IColumn> newColumnList()
		List<IColumn> columns = Generics.newArrayList();

		columns.add(new IdPropertyColumn("ID", "id", 50));
		columns.add(new PropertyColumn("Name", "name"));
		columns.add(new PropertyColumn("Description", "description"));
		columns.add(new CurrencyPropertyColumn("Price", "price", 70));
		// columns.add(new DatePropertyColumn("Date", "date"));
		columns.add(new PropertyColumn("Vendor", ""));

		return columns;
<!DOCTYPE html>
<html xmlns:wicket="">
	<title>Wicket Kendo UI: data-table</title>
	<form wicket:id="form">
		<div wicket:id="datatable">[datatable]</div>
		<button wicket:id="reload">Reload</button>
		<button wicket:id="refresh">Refresh</button>
	<div wicket:id="feedback"></div>