Skip to content

Instantly share code, notes, and snippets.

@jechasteen
Created September 2, 2021 03:40
Show Gist options
  • Save jechasteen/66bedc60ac76868ddc3e019290773f7b to your computer and use it in GitHub Desktop.
Save jechasteen/66bedc60ac76868ddc3e019290773f7b to your computer and use it in GitHub Desktop.
GJS/GTK 3.0 - Gtk.TreeView with TreeStore/TreeModel
// You have to tell GJS which version of Gtk to target
imports.gi.versions.Gtk = "3.0"
const { GObject, Gtk } = imports.gi;
Gtk.init(null);
class MyWindow extends Gtk.Window {
_init() {
super._init({
title: "My TreeView Example"
});
this._buildUI();
}
_buildUI() {
// First, you have to create a TreeStore, which is like
// a database for your tree data.
this.store = new Gtk.TreeStore();
this.store.set_column_types([GObject.TYPE_STRING]);
// This creates the TreeModel on the TreeStore object
this.store.filter_new(null);
// Let's populate our tree with one set of parent/children
// First, we have to create a new (empty) entry
// We save the returned TreeIter as a reference for the
// children Otherwise, if we don't need children, we could
// simply call this.store.set_value(this.store.append(null), 0, "TEXT")
let parent = this.store.append(null);
// Then, we give that entry its data. The 0 here referring to the COLUMN
// index in the array above "GObject.TYPE_STRING"
this.store.set_value(parent, 0, "Parent");
// Next, we create the children, using the parent TreeIter as the
// argument to append (that is the parent argument)
this.store.set_value(this.store.append(parent), 0, "Child 1");
this.store.set_value(this.store.append(parent), 0, "Child 2");
// Now that we have the store populated, we have to construct the view itself
this.tree = new Gtk.TreeView({ model: this.store });
// We have to create a renderer and column to actually do the work of
// presentation the in the view. This will allow you to apply custom
// styling or do operations on cells before presentation.
this.renderer = new Gtk.CellRendererText();
this.column = new Gtk.TreeViewColumn();
this.column.pack_start(this.renderer, true);
this.column.set_cell_data_func(
this.renderer,
// This function is where the styling/operations happen
(col, cell, model, iter) => {
cell.editable = false;
cell.text
= this.store.get_value(iter, 0);
}
);
// Now we add the column to the tree
this.tree.append_column(this.column);
// If you need multiple columns, you will need to repeat this for each
// Lastly, we add the view to the window.
this.add(this.tree);
}
}
// Start the application
const App = GObject.registerClass(MyWindow);
let win = new App();
win.connect("delete-event", () => Gtk.main_quit());
win.show_all();
Gtk.main();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment