315. How to drag and drop between 2 GtkTreeViews - Part 6 - in both directions with hints of insert location?

Problem

In How to drag and drop between 2 GtkTreeViews - Part 5 - left to right with hints of insert location? we have done drag-and-drop with "visual clue" of insert-location for one way - left to right.

Let's now do it for both ways - left to right and right to left - as shown below:

How to drag and drop between 2 GtkTreeViews - Part 6 - in both directions with hints of insert location?


Solution

If you understood the article How to drag and drop between 2 GtkTreeViews - Part 5 - left to right with hints of insert location?, you should have no problem doing this one.

Looks simple, isn't it? But took me an hour to get it right!

The "challenging" part is to make sure that when you drag from right to left, only the rows on the left gets highlighted. When you drag and stay on the right treeview, the rows on the right should not get highlighted.

Want to try this out as an exercise? The answers are given below...

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   
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   
132   
133   
134   
135   
136   
137   
138   
139   
140   
144   
145   
146   
147   
148   
149   
150   
152   
153   
155   
157   
158   
159   
160   
161   
162   
163   
164   
165   
166   
167   
168   
169   
170   
171   
172   
173   
174   
175   
184   
185   
186   
187   
188   
189   
190   
192   
194   
195   
196   
198   
199   
201   
202   
203   
204   
205   
206   
208   
209   
210   
211   
216   
218   
219   
220   
221   
222   
226   
227   
230   
231   
234   
235   
236   
237   
238   
240   
241   
242   
244   
246   
247   
250   
251   
255   
256   
260   
261   
262   
266   
267   
268   
269   
274   
275   
276   
277   
278   
279   
<?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 6 - (both directions) 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 treeview 1
$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);

// setup drag for left side
$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');

// setup drop for left side
$view1->drag_dest_set(Gtk::DEST_DEFAULT_ALL,
    array( array( 'text/plain', 0, 0)), Gdk::ACTION_COPY|Gdk::ACTION_MOVE);
$hbox->pack_start(new GtkLabel('  '), 0, 0);

// Set up treeview 2
$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);

// setup drop for right side
$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);

// setup drag for right side
$view2->drag_source_set(Gdk::BUTTON1_MASK,
    array( array( 'text/plain', 0, 0)), Gdk::ACTION_COPY|Gdk::ACTION_MOVE);
$view2->connect('drag-data-get', 'on_drag');

// this is delayed till here because we need the ID of $view2
$view1->connect('drag-data-received', 'on_drop', $view2);

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

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

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

// display a 2D table in treeview
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', $treeview_num);

    global $drag_source_treeview, $drag_onto_path;
    $drag_source_treeview = -1;
    $drag_onto_path = -1;

    return $view;
}

// format treeview columns
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'; // sets the row color for odd and even rows

    global $drag_source_treeview, $drag_onto_path;

    if ($treeview_num!=$drag_source_treeview && $drag_onto_path>=0) {
        if ($row_num == $drag_onto_path) $row_color = '#BAFFBF';
    }

    $cell->set_property('cell-background', $row_color); // sets the background color
}

// the function that is called when user selects a row
function on_selection($selection, $treeview_num) {
    global $drag_source_treeview;
    $drag_source_treeview = $treeview_num;

    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);
    print "You have selected $desc: $qty ($price)\n";
}

function on_drag($widget, $context, $data, $info, $time) {
    $selection = $widget->get_selection();
    list($model, $iter) = $selection->get_selected();
    if ($iter==null) return;
    $id = $model->get_value($iter, 0);
    $desc = $model->get_value($iter, 1);
    $qty = $model->get_value($iter, 2);
    $price = $model->get_value($iter, 3);
    $data->set_text(serialize(array($id, $desc, $qty, $price)));
}

function on_drop($widget, $context, $x, $y, $data, $info, $time, $src_view) {
    global $drag_source_treeview, $drag_onto_path;
    $drag_source_treeview = -1;
    $drag_onto_path = -1;

    // remove from src first
    $src_selection = $src_view->get_selection();
    list($src_model, $src_iter) = $src_selection->get_selected();
    if ($src_iter==null) {
        return;
    }
    $src_model->remove($src_iter);

    $data2 = unserialize($data->data);
    $model = $widget->get_model();

    $drop_info = $widget->get_dest_row_at_pos($x, $y);
    if ($drop_info) {
        list($path, $position) = $drop_info;
        if ($position == Gtk::TREE_VIEW_DROP_BEFORE ||
        $position == Gtk::TREE_VIEW_DROP_INTO_OR_BEFORE) {
            $model->insert($path[0], $data2) ;
        } else {
            $model->insert($path[0]+1, $data2) ;
        }
    } else {
        $model->append($data2);
    }
}

function on_drag_motion($widget, $context, $x, $y,    $timestamp, $treeview_num, $view) {
    $drop_info = $widget->get_dest_row_at_pos($x, $y);

    global $drag_onto_path;
    if ($drop_info) {
        list($path, $position) = $drop_info;
        if ($position == Gtk::TREE_VIEW_DROP_BEFORE ||
        $position == Gtk::TREE_VIEW_DROP_INTO_OR_BEFORE) {
            $drag_onto_path = $path[0];
            $view->set_drag_dest_row($path, Gtk::TREE_VIEW_DROP_BEFORE);
        } else {
            $drag_onto_path = $path[0]+1;
            $view->set_drag_dest_row($path, Gtk::TREE_VIEW_DROP_AFTER);
        }
    } else {
        $drag_onto_path = -1;
    }

}

?>

Output

As shown above.

 

Explanation

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

The technique used are exactly the same as in How to drag and drop between 2 GtkTreeViews - Part 5 - left to right with hints of insert location? Please refer to the article for explanations.

Related Links


Related Links

Add comment


Security code
Refresh