How to use radio buttons inside a table

At the moment I use checkbox and it works well. Code look like:

for (Person person : persons) {

	CheckBox checkbox = new CheckBox("", this, "checkboxClick");
	checkbox.setData(person);

	Item item = getItem(person.getId());
	item.getItemProperty(PROPERTY_IS_SELECTED).setValue(checkbox);
}

Now I want that user can select only one row. I know that I could do that without radio button with Action.Handler but I want that user first selects a row and after that clicks pick-button. Maybe OptionGroup is the answer but I don’t know how to implement it.

  • markus

OptionGroup would not help in your case, because the layout of the radio button group is managed by the OptionGroup so you can’t place individual radio buttons where you want. There is no separate RadioButton component yet, though there is one in GWT, so it should not be very hard to implement.

For now, the simplest solution is to use CheckBoxes in immediate mode, keep track of the currently selected CheckBox, and uncheck that when the user selects another CheckBox.

(Added ticket #1948 to remind that such a component should be done at some time.)

May I ask why you need radio-buttons in the table? In most cases table.setSelectable(true) has made radio-buttons unnecessary.

I have a pick view (for example for persons) where user can either select one person to pick or multiple persons depending on from which page/situation user accessed the pick view. I’d like that both of those cases works in the same way (first select then pick).

Also there might be at the same time need for select person (for pick) with radio button or click the row to see more person’s information.

I second that you create RadioButton component based on GWT. In the mean time I probably use Marko’s suggestion to use CheckBoxes in special way.

I would use table selection for picking (single select / multiselect mode) and in case you want to add additional info, use table column generator for adding info-icon shaped buttons that would open additional window.

Easier, but less visual, way would be to use action handler for the info. In this case it would require user to click with right mouse button to see info (or whatever other actions you might have for the row).

I have to consider your suggestion and talk to our graphic designer after my vacation.

Biggest problem in this case is that this ITMill application is only part of the whole application. There is other part that has been made with other technic and there pick functionality has been made like I have descriped. Question is that should the hole application look and work almost alike but that is something we must decide.

If you decide to implement the selection with checkboxes/radiobuttons, the easiest way would probably be:

  • use column generator for adding the buttons
  • add support for “radio” style name for the button component by extending the component on the client-side
  • set all the selection buttons to be immediate
  • manage single select behavior on server-side (clicking one button sets the rest to be false)

If you decide to implement the selection with checkboxes/radiobuttons, the easiest way would probably be:

  • use column generator for adding the buttons
  • add support for “radio” style name for the button component by extending the component on the client-side
  • set all the selection buttons to be immediate
  • manage single select behavior on server-side (clicking one button sets the rest to be false)