178. How to setup pulldown menu with 2 columns - Part 1 - using GtkComboBox?

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:

How to setup pulldown menu with 2 columns - Part 1 - using GtkComboBox?


Solution


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:

  1. Set up a data model with two columns.
  2. Create a GtkCellRenderer for display of the first column of data.
  3. Set up cell-display function for the first column.
  4. Create a second GtkCellRenderer for display of the second column of data. Also stuff this into the combobox.
  5. Let php-gtk2 "automatically" displays column 1 data. (Column 0 will be manually displayed by us.)
  6. Let us know when user has selected something from the combobox.
  7. Populates the combobox.
  8. 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

Add comment

Security code
Refresh