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

Radio




Components / Samples

Description

This sample shows how to use the Kendo UI Radio.

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

import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.RadioGroup;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;

import com.googlecode.wicket.jquery.core.resource.StyleSheetPackageHeaderItem;
import com.googlecode.wicket.kendo.ui.form.Radio;
import com.googlecode.wicket.kendo.ui.form.Radio.Label;
import com.googlecode.wicket.kendo.ui.form.button.AjaxButton;
import com.googlecode.wicket.kendo.ui.form.button.Button;
import com.googlecode.wicket.kendo.ui.panel.KendoFeedbackPanel;

public class DefaultRadioPage extends AbstractRadioPage
{
	private static final long serialVersionUID = 1L;

	public DefaultRadioPage()
	{
		// form //
		Form<Void> form = new Form<Void>("form");
		this.add(form);

		// feedback //
		form.add(new KendoFeedbackPanel("feedback"));

		// radios //
		final IModel<String> radioModel = new Model<String>();

		final RadioGroup<String> group = new RadioGroup<String>("radiogroup", radioModel);
		form.add(group);

		Radio<String> radio1 = new Radio<String>("radio1", Model.of("My radio 1"), group);
		Label label1 = new Label("label1", "My radio 1", radio1);
		group.add(radio1, label1);

		Radio<String> radio2 = new Radio<String>("radio2", Model.of("My radio 2"), group);
		Label label2 = new Label("label2", "My radio 2", radio2);
		group.add(radio2, label2);

		Radio<String> radio3 = new Radio<String>("radio3", Model.of("My radio 3"), group);
		Label label3 = new Label("label3", "My radio 3", radio3);
		group.add(radio3.setEnabled(false), label3);

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

			private static final long serialVersionUID = 1L;

			@Override
			public void onSubmit()
			{
				DefaultRadioPage.this.info(this, radioModel);
			}
		});

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

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				DefaultRadioPage.this.info(this, radioModel);
				target.add(form);
			}
		});
	}
	// Methods //

	@Override
	public void renderHead(IHeaderResponse response)
	{
		super.renderHead(response);

		response.render(new StyleSheetPackageHeaderItem(DefaultRadioPage.class));
	}

	private void info(Component component, IModel<String> model)
	{
		this.info(component.getMarkupId() + " has been clicked");
		this.info("The model object is: " + model.getObject());
	}
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket Kendo UI: radio</title>
</wicket:head>
</head>
<body>
<wicket:extend>

	<div id="demo-panel">
		<form wicket:id="form">
	
			<div wicket:id="radiogroup">
				<ul class="radioUL">
					<li>
						<input wicket:id="radio1" type="radio"/>
						<label wicket:id="label1">[label]</label>
					</li>
					
					<li>
						<input wicket:id="radio2" type="radio"/>
						<label wicket:id="label2">[label]</label>
					</li>
			
					<li>
						<input wicket:id="radio3" type="radio"/>
						<label wicket:id="label3">[label]</label>
					</li>
				</ul>
			</div>
			<br/>
		
			<button wicket:id="submit" type="submit">Submit</button>
			<button wicket:id="button">Ajax Submit</button>
			<br/><br/>
			<div wicket:id="feedback" style="width: 360px;"></div>
		</form>
	</div>
		
</wicket:extend>
</body>
</html>
.radioUL {
	list-style: none;
}

.radioUL li {
	line-height: 25px;
}