Vaadin ComboBox with values and IDs

Question

I have defined a ComboBox which allows the user to select a contact from his contact list. The ComboBox is showing the contact name, but that can not really be used to map to the real contact: the contact ID is needed. My problem is that I do not know how to populate the Vaadin ComboBox with linked values and IDs, but only showing the values.

// Add all organization contacts to the drop-down
for (Contact contact : organizationContacts) {
    contactName = contact.getName();
    contactId   = contact.getId();
    _logger.debug("Adding contactName=" + contactName + " contactId=" + contactId + " to person with id=" + personId);
    contactNameCombo.addItem(contactName);
}

// Add the contact of this person, and select it in the drop-down
contactName = person.getContact().getName();
contactId   = person.getContact().getId();
contactNameCombo.addItem(contactName);
contactNameCombo.setValue(contactName);

As you can see in the code above, I am adding the contactName to the ComboBox, but I do not know how to add also the contactId so that I can know later, from the selected entry, which ID must be used to update the database.

score 11 · Accepted Answer · answered May 30 '12 at 08:15

There are several ways to approach this : the most flexible here is to configure the combobox to use a named property as a caption. See Book Of Vaadin on Selecting Items for more details.

// Set the caption mode to read the caption directly
// from the 'name' property of the item
contactNameCombo.setItemCaptionMode(Select.ITEM_CAPTION_MODE_PROPERTY);
contactNameCombo.setItemCaptionPropertyId("name");

// Add all organization contacts to the drop-down
for (Contact contact : organizationContacts) {
    contactName = contact.getName();
    contactId   = contact.getId();
    _logger.debug("Adding contactName=" + contactName + " contactId=" + contactId + " to person with id=" + personId);

    // Note : the itemId of the item is the contactId
    Item item = contactNameCombo.addItem(contactId);
    item.getProperty("name").setValue(contactName)
}
// Add the contact of this person, and select it in the drop-down
contactName = person.getContact().getName();
contactId   = person.getContact().getId();
Item item = contactNameCombo.addItem(contactId);
item.getProperty("name").setValue(contactName)

// Using the itemId (which = contactId) to select the given contact
contactNameCombo.setValue(contactId);

I have been unable to implement this solution. getProperty("name") does not exist as method for Item. There is getItemProperty, but I had no success using that. — blueFast, May 30 '12 at 22:37
This solution didn't work for me either, please take a look at my proposition. I don't know which version of vaadin you are using ;[ — BlueLettuce16, Feb 25 '13 at 12:56
“See Book Of Vaadin on Selecting Items for more details.”—404 link. — Guildenstern, Sep 10 '20 at 06:47

score 10 · Answer 2 · edited Jun 09 '21 at 12:12

10

The solution given by @Charles Anthony didn't work for me either. In Vaadin docs (https://vaadin.com/book/-/page/components.selecting.html) I have found the following code:

// Set item caption for this item explicitly
select.addItem(2); // same as "new Integer(2)"
select.setItemCaption(2, "Deimos");

which works for me.

edited Jun 09 '21 at 12:12

ollitietavainen

3,900
13
30

answered Feb 25 '13 at 12:55

BlueLettuce16

2,013
4
20
31

I solved my issue, just be careful not to use setItemCaptionPropertyId, this will override any manual setItemCaption code, even if setItemCaption is called after setItemCaptionPropertyId – Stephane Grenier Apr 23 '16 at 21:32

score 4 · Answer 3 · answered Jun 17 '14 at 11:52

Vaadin 7:

    statusSelectCombo.setItemCaptionMode(ItemCaptionMode.PROPERTY);
statusSelectCombo.setItemCaptionPropertyId("courseOptionValue");

   IndexedContainer iContainer = new IndexedContainer();
   iContainer.addContainerProperty("courseId", String.class, "");
   iContainer.addContainerProperty("courseOptionValue", String.class, "");
    String addItemId="";
    String addItemCaption="";
for (int i = 0; i < comboItemsArray.length; i++) //String[] comboItemsArray
{
    log.debug("comboItemsArray["+i+"] "+comboItemsArray[i]);
    addItemId= comboItemsArray[i];
    addItemCaption=comboItemsArray[i];
   Item newItem = iContainer.getItem(iContainer.addItem());
   newItem.getItemProperty("courseId").setValue(addItemId);
   newItem.getItemProperty("courseOptionValue").setValue(addItemId);
}
statusSelectCombo.setContainerDataSource(iContainer);

ValueChangeListener listener = new Property.ValueChangeListener()
{
    public void valueChange(ValueChangeEvent event)
    {
    statusSelectCombo.getItemIds();
    Property changedProperty = event.getProperty();
    Object selectedStatus = (Object) statusSelectCombo.getValue(); //it is get Value but gives object ID as an Object
    Item rowItem = statusSelectCombo.getItem(selectedStatus);
    final String selectedCourseId = (String) rowItem.getItemProperty("courseId").getValue();        

    }
};

score 2 · Answer 4 · answered May 30 '12 at 10:15

2

Charles Anthony is absolutely right.

You can also take the advantage of a Container like BeanContainer or BeanItemContainer for example (more information here) to add your contact object to your ComboBox. You'll need to fill up your container and add it with

contactNameCombo.setContainerDataSource(YOUR_CONTAINER);

to your ComboBox.

answered May 30 '12 at 10:15

nexus

2,937
3
17
22

This solution looks promising. I have created a Bean class for my data, populated a BeanContainer with several Beans, and associated that to the ComboBox via setContainerDataSource. Everything is displayed properly. Now I have a problem getting the selected value: if I do getValue() on the ComboBox I get the value being displayed. I actually want to get the Id. For that, I would like to get the "selected" Bean in the associated container, so that I can analyze the Bean data. Is it possible to know which entry in the associated container is being used to display the text in the combobox? – blueFast May 30 '12 at 22:40
If you use a BeanContainer you can set on the container which property should be your id with setBeanIdProperty(Object o). If you use a BeanItemContainer you would get your "full" Contact object. – nexus May 31 '12 at 07:06

Vaadin ComboBox with values and IDs

4 Answers4

Linked