CODEWITHSUNDEEP
javavaadin
pratnala
pratnala

Reputation: 3843

Give a Vaadin custom component as a caption to a Vaadin option group

I am creating an OptionGroup in Vaadin and what I want to do is this. Instead of giving a plain text caption, I want to set another CustomComponent as its caption. So, I have an array of CustomComponents generated and the user needs to choose one out of these. So, is there any way to do this?

Upvotes: 1

Views: 1511

Answers (2)

King Midas
King Midas

Reputation: 1699

Another solution is to set the property setHtmlContentAllowed as true, and add the image as base64 into the code for each item in the group. Something like:

OptionGroup selectionList = new OptionGroup("Select one image:");
selectionList.addItem(item);
selectionList.setItemCaption(itemId, "Text1 " + "<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...\" />");
...

Upvotes: 0

wypieprz
wypieprz

Reputation: 8219

Looks like you need FlexibleOptionGroup add-on.

Here is an example implementation:

@Override
protected void init(VaadinRequest request) {

    Container cont = new IndexedContainer(); // create a container
    cont.addContainerProperty("caption", String.class, "");
    cont.getContainerProperty(cont.addItem(), "caption").setValue("first");
    cont.getContainerProperty(cont.addItem(), "caption").setValue("second");
    cont.getContainerProperty(cont.addItem(), "caption").setValue("third");

    FlexibleOptionGroup fog = new FlexibleOptionGroup(cont);
    fog.setItemCaptionPropertyId("caption");
    fog.setMultiSelect(true); // force using CheckBoxes

    VerticalLayout fogLayout = new VerticalLayout();
    Iterator<FlexibleOptionGroupItemComponent> iter;
    iter = fog.getItemComponentIterator();
    while(iter.hasNext()) {
        // OptionGroupItem part (CheckBox or RadioButton)
        FlexibleOptionGroupItemComponent fogItemComponent = iter.next();
        // CustomComponent part
        Label caption = new Label(fogItemComponent.getCaption());
        caption.setWidth(50, Unit.PIXELS);
        Slider slider = new Slider(1, 100);
        fogLayout.addComponent(
            new HorizontalLayout(fogItemComponent, caption, slider)
        );
    }
    setContent(fogLayout);
}

The above code produces:

enter image description here

Upvotes: 5

Related Questions