GtkTreeView

A widget for displaying both trees and lists

Widget that displays any object that implements the gtk.tree_model.TreeModel interface.

Please refer to the tree widget conceptual overview for an overview of all the objects and data types related to the tree widget and how they work together.

Coordinate systems in GtkTreeView API

Several different coordinate systems are exposed in the gtk.tree_view.TreeView API. These are:

Widget coordinates: Coordinates relative to the widget (usually widget->window).
Bin window coordinates: Coordinates relative to the window that GtkTreeView renders to.
Tree coordinates: Coordinates relative to the entire scrollable area of GtkTreeView. These coordinates start at (0, 0) for row 0 of the tree.

Several functions are available for converting between the different coordinate systems. The most common translations are between widget and bin window coordinates and between bin window and tree coordinates. For the former you can use gtk.tree_view.TreeView.convertWidgetToBinWindowCoords (and vice versa), for the latter gtk.tree_view.TreeView.convertBinWindowToTreeCoords (and vice versa).

gtk.tree_view.TreeView as gtk.buildable.Buildable

The gtk.tree_view.TreeView implementation of the gtk.buildable.Buildable interface accepts gtk.tree_view_column.TreeViewColumn objects as <child> elements and exposes the internal gtk.tree_selection.TreeSelection in UI definitions.

An example of a UI definition fragment with gtk.tree_view.TreeView:

<object class="GtkTreeView" id="treeview">
  <property name="model">liststore1</property>
  <child>
    <object class="GtkTreeViewColumn" id="test-column">
      <property name="title">Test</property>
      <child>
        <object class="GtkCellRendererText" id="test-renderer"/>
        <attributes>
          <attribute name="text">1</attribute>
        </attributes>
      </child>
    </object>
  </child>
  <child internal-child="selection">
    <object class="GtkTreeSelection" id="selection">
      <signal name="changed" handler="on_treeview_selection_changed"/>
    </object>
  </child>
</object>

CSS nodes

treeview.view
├── header
│   ├── button
│   │   ╰── [sort-indicator]
┊   ┊
│   ╰── button
│       ╰── [sort-indicator]
│
├── [rubberband]
╰── [dndtarget]

gtk.tree_view.TreeView has a main CSS node with name treeview and style class .view. It has a subnode with name header, which is the parent for all the column header widgets' CSS nodes.

Each column header consists of a button, which among other content, has a child with name sort-indicator, which carries the .ascending or .descending style classes when the column header should show a sort indicator. The CSS is expected to provide a suitable image using the -gtk-icon-source property.

For rubberband selection, a subnode with name rubberband is used.

For the drop target location during DND, a subnode with name dndtarget is used.