How to create a multi-column Combobox in JavaFX? - user-interface

Question

I am trying to create a ComboBox that displays multiple columns in its dropdown menu.
Here is a screenshot that shows how I want it to look:
Any suggestions?
The only solution that is in my head is to create a custom container by extending ComboBox and customizing it with multiple columns.
But does JavaFX even provide me the option to create a custom UI container?
How do you create a custom UI container and how to use it in FXML?

Answer 1

You do not need to extend ComboBox to create a similar layout. Instead, you just need to provide your own implementation of a CellFactory.
By creating a custom CellFactory, you can control how the items in your ComboBox are displayed by providing your own Listcell (the item that is actually selectable in the dropdown menu).
I am certain there are many ways to accomplish this, but for this example, I'm going to use a GridPane as the root layout for my ListCell.
The complete example below has comments throughout as well:
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
// Simple Interface
VBox root = new VBox(10);
root.setAlignment(Pos.CENTER);
root.setPadding(new Insets(10));
// List of sample Persons
ObservableList<Person> persons = FXCollections.observableArrayList();
persons.addAll(
new Person("Maria Anders", "Sales Representative", "Zurich"),
new Person("Ana Trujillo", "Owner", "Sydney"),
new Person("Thomas Hardy", "Order Administrator", "Dallas")
);
// Create a simple ComboBox of Persons
ComboBox<Person> cboPersons = new ComboBox<>();
cboPersons.setItems(persons);
// We need a StringConverter in order to ensure the selected item is displayed properly
// For this sample, we only want the Person's name to be displayed
cboPersons.setConverter(new StringConverter<Person>() {
#Override
public String toString(Person person) {
return person.getName();
}
#Override
public Person fromString(String string) {
return null;
}
});
// Provide our own CellFactory to control how items are displayed
cboPersons.setCellFactory(cell -> new ListCell<Person>() {
// Create our layout here to be reused for each ListCell
GridPane gridPane = new GridPane();
Label lblName = new Label();
Label lblTitle = new Label();
Label lblLocation = new Label();
// Static block to configure our layout
{
// Ensure all our column widths are constant
gridPane.getColumnConstraints().addAll(
new ColumnConstraints(100, 100, 100),
new ColumnConstraints(100, 100, 100),
new ColumnConstraints(100, 100, 100)
);
gridPane.add(lblName, 0, 1);
gridPane.add(lblTitle, 1, 1);
gridPane.add(lblLocation, 2, 1);
}
// We override the updateItem() method in order to provide our own layout for this Cell's graphicProperty
#Override
protected void updateItem(Person person, boolean empty) {
super.updateItem(person, empty);
if (!empty && person != null) {
// Update our Labels
lblName.setText(person.getName());
lblTitle.setText(person.getTitle());
lblLocation.setText(person.getLocation());
// Set this ListCell's graphicProperty to display our GridPane
setGraphic(gridPane);
} else {
// Nothing to display here
setGraphic(null);
}
}
});
// Add the ComboBox to the scene
root.getChildren().addAll(
new Label("Select Person:"),
cboPersons
);
// Show the stage
primaryStage.setScene(new Scene(root));
primaryStage.setTitle("Sample");
primaryStage.show();
}
}
// Simple Person class to represent our...Persons
class Person {
private final StringProperty name = new SimpleStringProperty();
private final StringProperty title = new SimpleStringProperty();
private final StringProperty location = new SimpleStringProperty();
Person(String name, String title, String location) {
this.name.set(name);
this.title.set(title);
this.location.set(location);
}
public String getName() {
return name.get();
}
public void setName(String name) {
this.name.set(name);
}
public StringProperty nameProperty() {
return name;
}
public String getTitle() {
return title.get();
}
public void setTitle(String title) {
this.title.set(title);
}
public StringProperty titleProperty() {
return title;
}
public String getLocation() {
return location.get();
}
public void setLocation(String location) {
this.location.set(location);
}
public StringProperty locationProperty() {
return location;
}
}
The Results: