Search code examples
pythontreeviewgtk3

Python Gtk3 TreeView TreeViewColumn truncating text with an ellipsis?

I have a Gtk.TreeView with a Gtk.ListStore of columns.

Given an arbitrarily sized window, changeable by the user, with a re-sizeable "Name" column, and all other columns fixed size ~

What I want to happen, is that when an extra-wide name string is inserted into the list, that its text is truncated, ideally with an added ellipsis '…'. When the window is re-sized, the extra girth allows more of the name to show. But at no time is h-scroll necessary.

desired look

What is happening now, is that the extra wide text simply pushes the other columns off to the right. Which looks stupid. If I block h-scrolling, the parent window width is automatically increased - not a good look on already full-screen windows.

stupid look

I don't want to use a simple fixed-pixel-width columns for the name, since the real dialogue needs to be sized to its parent, which is sized to the user's screen. So a fixed pixel-size will almost always be wrong.

I want some kind of solution that doesn't activate the h-scroll.

Anything like:

  • Get the "Name" field to truncate, so whatever remains "fits" without h-scrolling.
  • Somehow detect the name wont fit, trim it and add the ellipsis (probably hooking window resize)
  • Get the name to wrap in the column (last resort)

So far I've tried just about everything suggested on SO, and a bunch of other places. The combination of always finding non-python documentation, and varying Gtk versions really hamper the understanding. Ref: Python GTK3 Doco

EDIT: Found the Gtk.TreeViewColumn.set_expand() function. So now the name column expands into extra space.

import sys
import gi

gi.require_version("Gtk", "3.0")
gi.require_version("Gdk", "3.0")

from gi.repository import Gtk
from gi.repository import Gdk
from gi.repository import GdkPixbuf



class ListWindow(Gtk.Window):
    def __init__(self):
        super().__init__(title="List Demo")
        self.set_border_width( 10 )
        self.set_default_size( 400, 300 )

        header = Gtk.HeaderBar(title="List Demo")
        header.props.show_close_button = True
        self.set_titlebar(header)

        self.scrollable = Gtk.ScrolledWindow()
        self.scrollable.set_policy( Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC )

        self.colour_list = Gtk.ListStore( str, int, int, int, GdkPixbuf.Pixbuf )
        self.tree_view = Gtk.TreeView( model=self.colour_list )
        self.tree_view.set_headers_visible( True )

        # For right-justifying columnms
        right_justify = Gtk.CellRendererText()
        right_justify.set_alignment( 1.0, 0.5 )  # right, centre

        # Five columns, name, r, g, b, swatch
        column1 = Gtk.TreeViewColumn( "Name",   Gtk.CellRendererText(), text=0 )
        column2 = Gtk.TreeViewColumn( "Red",    right_justify, text=1 )
        column3 = Gtk.TreeViewColumn( "Grn",    right_justify, text=2 )
        column4 = Gtk.TreeViewColumn( "Blu",    right_justify, text=3 )
        column5 = Gtk.TreeViewColumn( "Swatch", Gtk.CellRendererPixbuf(), pixbuf=4)

        columns = [ column1, column2, column3, column4, column5 ]

        for i,col in enumerate( columns ):
            if ( i == 0 ):
                col.set_sizing( Gtk.TreeViewColumnSizing.AUTOSIZE )  # all columns except first fixed size
                col.set_expand( True )
                col.set_resizable( True )
            else:
                col.set_sizing( Gtk.TreeViewColumnSizing.FIXED )  
                col.set_expand( False )
                col.set_resizable( False )
            self.tree_view.append_column( col )

        self.populateList()

        # FInally add everything to the window
        self.scrollable.add( self.tree_view )
        self.add( self.scrollable )
        self.show_all()


    def getColouredPixmap( self, r, g, b, a=255 ):
        """ Given components, return a colour swatch pixmap """
        CHANNEL_BITS=8
        WIDTH=64
        HEIGHT=32
        swatch = GdkPixbuf.Pixbuf.new( GdkPixbuf.Colorspace.RGB, True, CHANNEL_BITS, WIDTH, HEIGHT ) 
        swatch.fill( (r<<24) | (g<<16) | (b<<8) | a ) # RGBA
        return swatch


    def populateList( self ):
        """ Fill the list with a number of colour-name, components and swatch-image """
        # Probematic Record for the top entry
        swatch = self.getColouredPixmap( 184, 134,  11 )
        #self.colour_list.append( [ 'Sarcoline (literally mea…', 184, 134,  11, swatch ] )
        self.colour_list.append( [ 'Sarcoline (literally meaning: "flesh coloured", so varies...)', 184, 134,  11, swatch ] )

        # A bunch of other records, just for fun
        try:
            fin = open( '/etc/X11/rgb.txt', 'rt' )
            records = fin.readlines()
            fin.close()
        except:
            # excerpt fro those without rgb.txt
            records = """ 245 255 250     MintCream
                          240 255 255     azure
                          240 248 255     alice blue
                          230 230 250     lavender
                          255 240 245     lavender blush """.split( '\n' )

        # 255 240 245     lavender blush
        for rec in records:
            if ( len( rec.strip() ) > 0 and rec[0] != '!' and rec.find('gray') == -1 ):
                rec = rec.strip().replace( '\t', ' ')
                while( rec.find( '  ' ) != -1 ):
                    rec = rec.replace( '  ', ' ' )  # remeove double-spaces
                r,g,b,desc = rec.split( ' ', 3 )
                r = int( r )
                g = int( g )
                b = int( b )
                swatch = self.getColouredPixmap( r, g, b )
                self.colour_list.append( [ desc.capitalize(), r, g, b, swatch ] )


### MAIN
win = ListWindow()
win.connect("destroy", Gtk.main_quit)
win.show_all()
Gtk.main()
Solution

  • Explicitly setting GtkCellRendererText's "ellipsize" property seems to work:

            renderer  = Gtk.CellRendererText()
        renderer.set_property("ellipsize", Pango.EllipsizeMode.END)
        # Five columns, name, r, g, b, swatch
        column1 = Gtk.TreeViewColumn( "Name",   renderer, text=0 )

    You may also be interested in preventing last column from growing