Legal Notice

Buy me a coffee :)

Wicket - jQuery UI

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

DataTable



Components / Samples

Description

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.

Licensing

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 http://docs.telerik.com/kendo-ui/intro/supporting/list-of-widgets)
To be able to use it, you need to change the ResourceReference with kendo.all.min.js

See also

[howto]-change-resource-references

Sources

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

import java.util.List;
import java.util.stream.Collectors;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.repeater.data.IDataProvider;
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.jquery.ui.samples.data.bean.Product;
import com.googlecode.wicket.jquery.ui.samples.data.provider.ProductDataProvider;
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");
		this.add(feedback);

		// Form //
		final Form<?> form = new Form<Void>("form");
		this.add(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;

			@Override
			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"));

				feedback.info(message);
				feedback.refresh(target);
			}

			@Override
			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);

				feedback.info(message);
				feedback.refresh(target);
			}
		};

		form.add(table);

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

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				table.reload(target, true);
			}
		});

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

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				table.refresh(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", "vendor.name"));

		return columns;
	}
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket Kendo UI: data-table</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<form wicket:id="form">
		<div wicket:id="datatable">[datatable]</div>
		<br/>
		<button wicket:id="reload">Reload</button>
		<button wicket:id="refresh">Refresh</button>
	</form>
	<br/>
	<div wicket:id="feedback"></div>
</wicket:extend>
</body>
</html>