Sample Code 314: How to drag and drop between 2 GtkTreeViews - Part 5 - left to right with hints of insert location?
Written by kksou   
Wednesday, 29 August 2007
Problem

If you have tried How to use drag and drop to shift rows in a GtkTreeView - Part 2 - using set_reorderable?, you will notice that the advantage of using PHP-GTK's built-in set_reorderable(true) is that PHP-GTK2 will give you a visual clue as to which row the dragged row will be inserted into.

However, set_reorderable(true) does not work across two treeviews. As such, when you set up drag and drop between two treeviews, you need to manually set up the drag and drop.

Dysmas de Lassus from France asked me whether it's possible to display similar "visual clue" of where the dragged row will be inserted when you set up the drag and drop manuallly across two treeviews as shown below:

How to drag and drop between 2 GtkTreeViews - Part 5 - left to right with hints of insert location?


Solution

As first I thought it's not possible too. However, after some trials and errors, I was surprised to see it working!

Important Note: This only works for PHP-GTK2 compliled with gtk+ v2.10 and above. If you are using an older version, for linux, you may follow the step-by-step instructions to recompile php-gtk2 with gtk+ v2.10. For windows, please refer to How to install php gtk2 on windows? You may also want to take a look here to see some of the new exciting PHP-GTK2 Functionalities.


Sample Code

Important Note: This only works for PHP-GTK2 compliled with gtk+ v2.10 and above. If you are using an older version, for linux, you may follow the step-by-step instructions to recompile php-gtk2 with gtk+ v2.10. For windows, please refer to How to install php gtk2 on windows? You may also want to take a look here to see some of the new exciting PHP-GTK2 Functionalities.

1   
2   
3   
4   
5   
6   
7   
8   
9   
10   
11   
12   
13   
14   
15   
16   
17   
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   
78   
79   
80   
81   
82   
83   
84   
85   
86   
87   
88   
89   
90   
91   
92   
93   
94   
95   
96   
97   
98   
99   
100   
101   
102   
103   
104   
105   
106   
107   
108   
109   
110   
111   
112   
113   
114   
115   
116   
117   
118   
119   
120   
121   
122   
123   
124   
125   
126   
127   
128   
129   
130   
131   
132   
133   
134   
135   
136   
137   
138   
139   
140   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->set_size_request(600, 240);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("           Drag and Drop between 2 TreeViews\n".
"Part 5 - (left to right) with hints of insert location");
$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);
$vbox->pack_start($title, 0, 0);
$vbox->pack_start(new GtkLabel(''), 0, 0);
$vbox->pack_start($hbox = new GtkHBox());

// Set up treeview1
$data1 = array(
    array('row0', 'item 42', 2, 3.1),
    array('row1', 'item 36', 20, 6.21),
    array('row2', 'item 21', 8, 9.36),
    array('row3', 'item 10', 11, 12.4),
    array('row4', 'item 7', 5, 15.5),
    array('row5', 'item 4', 17, 18.6),
    array('row6', 'item 3', 20, 21.73));
$view1 = display_table ($hbox, $data1, 1);
$view1->drag_source_set(Gdk::BUTTON1_MASK,
    array( array( 'text/plain', 0, 0)), Gdk::ACTION_COPY|Gdk::ACTION_MOVE);
$view1->connect('drag-data-get', 'on_drag');
$hbox->pack_start(new GtkLabel('  '), 0, 0);

// Set up treeview2
$data2 = array(
    array('row7', 'item 127', 105, 115.5),
    array('row8', 'item 124', 117, 118.6),
    array('row9', 'item 123', 120, 121.73));
$view2 = display_table ($hbox, $data2, 2);
$view2->drag_dest_set(Gtk::DEST_DEFAULT_ALL,
    array( array( 'text/plain', 0, 0)), Gdk::ACTION_COPY|Gdk::ACTION_MOVE);
$view2->connect('drag-data-received', 'on_drop', $view1);

$view2->drag_dest_set_track_motion(true); // note 1
$view2->connect('drag-motion', 'on_drag_motion', $view1); // note 2

$window->show_all();
Gtk::main();

function display_table($container, $data, $treeview_num) {

    // Set up a scroll window
    $scrolled_win = new GtkScrolledWindow();
    $scrolled_win->set_policy( Gtk::POLICY_AUTOMATIC,
        Gtk::POLICY_AUTOMATIC);
    $container->pack_start($scrolled_win);

    // Creates the list store
    if (defined("GObject::TYPE_STRING")) {
        $model = new GtkListStore(GObject::TYPE_STRING, GObject::TYPE_STRING,
            GObject::TYPE_LONG, GObject::TYPE_DOUBLE);
    } else {
        $model = new GtkListStore(Gtk::TYPE_STRING, Gtk::TYPE_STRING,
            Gtk::TYPE_LONG, Gtk::TYPE_DOUBLE);
    }
    $field_header = array('Row #', 'Description', 'Qty', 'Price');
    $field_justification = array(0.0, 0.0, 0.5, 1.0);

    // Creates the view to display the list store
    $view = new GtkTreeView($model);
    $scrolled_win->add($view);

    // Creates the columns
    for ($col=0; $col<count($field_header); ++$col) {
        $cell_renderer = new GtkCellRendererText();
        $cell_renderer->set_property("xalign", $field_justification[$col]);
        $column = new GtkTreeViewColumn($field_header[$col],
            $cell_renderer, 'text', $col);
        $column->set_alignment($field_justification[$col]);
        $column->set_sort_column_id($col);

        // set the header font and color
        $label = new GtkLabel($field_header[$col]);
        $label->modify_font(new PangoFontDescription("Arial Bold"));
        $label->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000FF"));
        $column->set_widget($label);
        $label->show();

        // setup self-defined function to display alternate row color
        $column->set_cell_data_func($cell_renderer, "format_col", $col, $treeview_num);
        $view->append_column($column);
    }

    // pupulates the data
    for ($row=0; $row<count($data); ++$row) {
        $values = array();
        for ($col=0; $col<count($data[$row]); ++$col) {
            $values[] = $data[$row][$col];
        }
        $model->append($values);
    }

    // setup selection
    $selection = $view->get_selection();
    $selection->connect('changed', 'on_selection');

    global $drag_onto_path;
    $drag_onto_path = -1;

    return $view;
}

// display alternate row color
function format_col($column, $cell, $model, $iter, $col_num, $treeview_num) {
    $path = $model->get_path($iter); // get the current path
    $row_num = $path[0]; // get the row number
    if ($col_num==3) {
        $amt = $model->get_value($iter, 3);
        $cell->set_property('text', '$'.number_format($amt,2));
    }
    $row_color = ($row_num%2==1) ? '#dddddd' : '#ffffff';
    global $drag_onto_path;
    if ($treeview_num==2 && $drag_onto_path>=0) {
        if ($row_num == $drag_onto_path) $row_color = '#BAFFBF'; // note 5
    }

    $cell->set_property('cell-background', $row_color); // note 6
}

// process user selection
function on_selection($selection) {
    list($model, $iter) = $selection->get_selected();
    if ($iter==null) return;
    $desc = $model->get_value($iter, 1);
    $qty = $model->get_value($iter, 2);
    $price = $model->get_value($iter, 3);
    echo "You have selected $desc: $qty ($price)\n";
}

function on_drag($widget, $context, $data, $info, $time) {
    $selection = $widget->get_selection();
  • Note that this is only 70% of the sample code. You have to be a registered member to see the entire sample code. Please login or register.
  • Registration is free and immediate.
  • Have some doubt about the registration? Please read this forum article.
Explanation

We make use of the code from How to drag and drop between 2 GtkTreeViews - Part 3 - left to right with insert?

What's new here:

  1. Turn on set track motion.
  2. Register the signal 'drag-motion' on treeview2.
  3. Transform the mouse position to treeview path.
  4. Keep track of the treeview path.
  5. Highlight the insert location as light green.
  6. Set the background color.


Related Links

User reviews

There are no user reviews yet.

Note: You have to be a registered member to leave a comment. Free registration here.

 
< Prev   Next >

Copyright © 2006-2008. kksou.com. All Rights Reserved