Problem
A standard GtkComboBox displays only one column of data as shown in the example How to setup and process GtkComboBox?
You would like to have a pulldown menu that displays two columns of data as shown below:
Solution
- The data displayed in the pulldown menu of GtkComboBox is actually similar to a GtkTreeviewcolumn of a treeview.
- We make use of the techniques as described in How to display gif or jpg images in GtkTreeView - Part 2? and How to display directory tree using GtkTreeView - Part 2 - add folder icon? to combine two columns of data from a GtkListStore into one column of GtkComboBox.
Sample Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <?php $window = new GtkWindow(); $window->connect_simple('destroy', array( 'Gtk', 'main_quit')); $window->set_size_request(400,150); $window->add($vbox = new GtkVBox()); // display title $title = new GtkLabel("Setup pulldown menu with 2 columns - Part 1\n". "using GtkComboBox"); $title->modify_font(new PangoFontDescription("Times New Roman Italic 10")); $title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff")); $title->set_size_request(-1, 40); $title->set_justify(Gtk::JUSTIFY_CENTER); $alignment = new GtkAlignment(0.5, 0, 0, 0); $alignment->add($title); $vbox->pack_start($alignment, 0, 0); $vbox->pack_start(new GtkLabel(), 0, 0); // the selection $list = array( array("01","Ferro"), array("02","Acciaio"), array("03","Tungsteno"), array("042","Rame"), array("044","Piombo"), array("05","Alluminio"), array("06","Carbonio"), array("07","Uranio"), array("08","Cobalto"), array("07","Plutonio"), array("08","Ottone"), array("09","Zama"), array("10","Molibdeno"), array("11","Bronzo"), array("12","Oro"), array("13","Argento"), array("14","Platino"), array("15","Berillio") ); $vbox->pack_start($hbox=new GtkHBox(), 0, 0); $hbox->pack_start(new GtkLabel('Select: '), 0, 0); // Setup combobox $combobox = new GtkComboBox(); if (defined("GObject::TYPE_STRING")) { $model = new GtkListStore(GObject::TYPE_STRING, GObject::TYPE_STRING); // note 1 } else { $model = new GtkListStore(Gtk::TYPE_STRING, Gtk::TYPE_STRING); // note 1 } $combobox->set_model($model); $cellRenderer0 = new GtkCellRendererText(); // note 2 $combobox->pack_start($cellRenderer0); $combobox->set_cell_data_func($cellRenderer0, "format_col0", 0); // note 3 $cellRenderer1 = new GtkCellRendererText(); // note 4 $combobox->pack_start($cellRenderer1); $combobox->set_attributes($cellRenderer1, 'text', 1); // note 5 $combobox->connect('changed', 'on_change'); // note 6 // populate data foreach($list as $data) { $model->append($data); // note 7 } $hbox->pack_start($combobox, 0, 0); $hbox->pack_start(new GtkLabel(' '), 0, 0); $hbox->pack_start($button = new GtkButton('Submit'), 0, 0); $button->set_size_request(60, 24); $button->connect('clicked', "on_button", $combobox); function format_col0($column, $cell, $model, $iter, $col_num) { $col0 = $model->get_value($iter, 0); $cell->set_property('text', $col0.' '); // note 8 } function on_button($button, $combobox) { $model = $combobox->get_model(); $id = $model->get_value($combobox->get_active_iter(), 0); $desc = $model->get_value($combobox->get_active_iter(), 1); echo "Submit button pressed. Selection = $id ($desc)\n"; } function on_change($combobox) { $model = $combobox->get_model(); $id = $model->get_value($combobox->get_active_iter(), 0); $desc = $model->get_value($combobox->get_active_iter(), 1); echo "You have selected: $id ($desc)!\n"; } $window->show_all(); Gtk::main(); ?> |
Output
As shown above.Explanation
The above sample code is based on How to setup and process GtkComboBox? and How to display gif or jpg images in GtkTreeView - Part 2?
What's new here:
- Set up a data model with two columns.
- Create a GtkCellRenderer for display of the first column of data.
- Set up cell-display function for the first column.
- Create a second GtkCellRenderer for display of the second column of data. Also stuff this into the combobox.
- Let php-gtk2 "automatically" displays column 1 data. (Column 0 will be manually displayed by us.)
- Let us know when user has selected something from the combobox.
- Populates the combobox.
- This is where we "manually" add in the data of column 0. Note that we append two spaces at the back so that column 0 and column 1 is not too close together.
Related Links
- How to setup and process GtkComboBox?
- How to display gif or jpg images in GtkTreeView - Part 2?
- How to display directory tree using GtkTreeView - Part 2 - add folder icon?
- How to display directory tree using GtkTreeView - Part 3 - add selection box?
- How to setup pulldown menu with 2 columns - Part 2 - using GtkEntryCompletion?
- How to setup pulldown menu with 2 columns - Part 3 - using self defined combobox?
Read more...