Skip to main content

Variable: TreeView

const TreeView: "TreeView"

Defined in: react/src/generated/jsx.ts:15941

A widget for displaying both trees and lists

Widget that displays any object that implements the [iface@Gtk.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 GtkTreeView 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 [method@Gtk.TreeView.convert_widget_to_bin_window_coords] (and vice versa), for the latter [method@Gtk.TreeView.convert_bin_window_to_tree_coords] (and vice versa).

GtkTreeView as GtkBuildable​

The GtkTreeView implementation of the GtkBuildable interface accepts [class@Gtk.TreeViewColumn] objects as <child> elements and exposes the internal [class@Gtk.TreeSelection] in UI definitions.

An example of a UI definition fragment with GtkTreeView:

<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]

GtkTreeView 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.