# Listview grouping popup window examples

**URL:** <https://discourse.julialang.org/t/listview-grouping-popup-window-examples/96092>\
**Category:** Visualization\
**Tags:** gtk, gui\
**Created:** [March 14, 2023, 10:32pm UTC](https://discourse.julialang.org/t/listview-grouping-popup-window-examples/96092 "2023-03-14T22:32:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [March 14, 2023, 10:32pm UTC](https://discourse.julialang.org/t/listview-grouping-popup-window-examples/96092/1 "2023-03-14T22:32:50Z")

</div>

When running a closed-loop menu-driven program, that runs on the REPL and in which different types of data items are loaded, created, deleted, etc., I would like to keep track of them in a grouped listview popup window. Each time a change is made to the existing items, an update command should be sent to the listview window (or just redraw it).

Is there an example you know of that you could point me to for inspiration?

Thank you very much.

 ![Listview_Grouping_popup _window_examples](https://global.discourse-cdn.com/julialang/original/3X/e/7/e7fb767694f15e6c4a6246f673dc3df18cdf07a6.png)  
_ **Figure** Two random examples of grouped listviews_

---

<div class="post-metadata">

**Author:** ![SteffenPL](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/steffenpl/32/206270_2.png) [@SteffenPL](https://discourse.julialang.org/u/SteffenPL)\
**Post date:** [March 14, 2023, 11:42pm UTC](https://discourse.julialang.org/t/listview-grouping-popup-window-examples/96092/2 "2023-03-14T23:42:25Z")

</div>

EDIT: I didn’t read the username! I’m sure you know all of that!

* * *

The most direct path to something similar to your screenshots is probably [List and Tree Widgets · Gtk.jl](https://juliagraphics.github.io/Gtk.jl/latest/manual/listtreeview/)

Other frameworks, are [GitHub - barche/QML.jl: Build Qt5 QML interfaces for Julia programs.](https://github.com/barche/QML.jl) (which requires you to know a bit about QML itself), or you could try web engines like [https://genieframework.com/](https://genieframework.com/) or [GitHub - davidanthoff/Electron.jl: Julia wrapper for Electron](https://github.com/davidanthoff/Electron.jl) or [GitHub - JuliaGizmos/Blink.jl: Web-based GUIs for Julia](https://github.com/JuliaGizmos/Blink.jl).

The quickest path to get something similar, but not that REPL based, could be [Pluto.jl](https://plutojl.org/). Not sure if that fits your application though, but very nice for prototypes and if the available views are not what you are looking for, it is super easy to write your own small HTML/JavaScript for custom visualizations.

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [March 15, 2023, 12:01am UTC](https://discourse.julialang.org/t/listview-grouping-popup-window-examples/96092/3 "2023-03-15T00:01:35Z")

</div>

Thanks for your advice.

I tried all the examples on the Gtk.jl page shown and all I got were empty windows ☹ :

![Gtk_v1.3.0_on_Win11_Julia_1.8.5](https://global.discourse-cdn.com/julialang/original/3X/5/7/578b7c98d46b0379281b742ff3a63cd4be61fa4a.png)

_ **NB:** using Julia 1.8.5 on Win11 and Gtk v1.3.0._

---

<div class="post-metadata">

**Author:** ![SteffenPL](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/steffenpl/32/206270_2.png) [@SteffenPL](https://discourse.julialang.org/u/SteffenPL)\
**Post date:** [March 15, 2023, 12:16am UTC](https://discourse.julialang.org/t/listview-grouping-popup-window-examples/96092/4 "2023-03-15T00:16:16Z")

</div>

That is strange, for me the filtering exampled worked in a similar setup, e.g. [List and Tree Widgets · Gtk.jl (juliagraphics.github.io)](https://juliagraphics.github.io/Gtk.jl/latest/manual/listtreeview/#Filtering-1)

(on Julia 1.9rc, Win11, Gtk v1.3.0)

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [March 15, 2023, 9:36pm UTC](https://discourse.julialang.org/t/listview-grouping-popup-window-examples/96092/6 "2023-03-15T21:36:37Z")

</div>

Ok, it seems I made a mistake.  
`showall()` was already defined in my `startup.jl` and qualifying it with the `Gtk.` prefix solved the blank window problem.

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [March 18, 2023, 12:05pm UTC](https://discourse.julialang.org/t/listview-grouping-popup-window-examples/96092/7 "2023-03-18T12:05:32Z")

</div>

In case it might help others, I have copied below the `Gtk.jl` code used to produce the following scrollable `Tree View`:

 ![GtkScrolledWindow_GtkTreeView](https://global.discourse-cdn.com/julialang/original/3X/7/c/7c827b024fbbcfde5015a34cca4d26074f4b21c6.png)

> **Scrollable Gtk Tree View code**
>
> ```julia
> using Gtk, Printf
> 
> ts = GtkTreeStore(String, String, String, String)
> tv = GtkTreeView(GtkTreeModel(ts))
> sw = GtkScrolledWindow(tv)
> 
> # specific renderers for each of the columns:
> rTxt = GtkCellRendererText()
> 
> c0 = GtkTreeViewColumn("#", rTxt, Dict([("text", 0)]))
> 
> c1 = GtkTreeViewColumn("Name", rTxt, Dict([("text", 1)]))
> c2 = GtkTreeViewColumn("Weight", rTxt, Dict([("text", 2)]))
> c3 = GtkTreeViewColumn("Units", rTxt, Dict([("text", 3)]))
> push!(tv, c0, c1, c2, c3)
> 
> # Make columns resizable:
> for c in [c0, c1, c2, c3]
> GAccessor.resizable(c, true)
> end
> 
> # Make columns sortable:
> for (i,c) in enumerate([c0,c1,c2,c3])
> GAccessor.sort_column_id(c, i-1)
> end
> 
> # Add data to treeview:
> iter1 = push!(ts, ("", "FRUITS", "", ""))
> push!(ts, ("1", "Oranges", 1000, "kg"), iter1)
> push!(ts, ("2", "Apples", 500, "lb"), iter1)
> push!(ts, ("3", "Kiwis", 300, "kg"), iter1)
> 
> iter2 = push!(ts, ("","VEGETABLES","",""))
> push!(ts, ("1", "Lettuce", 20, "lb"), iter2)
> push!(ts, ("2", "Avocado", 150, "kg"), iter2)
> 
> iter3 = push!(ts, ("","CEREALS","",""))
> for i in 1:100
> push!(ts, (@sprintf("%3i",i), rand(("Wheat","Rice","Oat")), rand(0:100), "ton"), iter3)
> end
> 
> # Display
> win = GtkWindow(sw, "Tree View")
> Gtk.showall(win)
> 
> ```

_Q: How to set background colors to distinguish different rows?_