Home Ask Login Register

Developers Planet

Your answer is one click away!

IARI February 2016

Is it possible to display an Image in an autocompletion-popup list (Gtk3)

I am using an Entry with an EntryCompletion opbject that has a ListStore model. For each record in the model, there is an image I would like to display in the autocomplete-popup list.

How can this be done? Is it possible to add a Gtk.CellRendererPixbuf column to the model?


B8vrede February 2016

Interesting enough I could not find any examples of this yet it turns out to be possible and not insanely complicated. Lets start with a small image of the goal which uses icons for convinces reasons. Example of auto-completion with icons

So how do we get there, first we create the ListStore containing a column with strings to match on and a icon-name to convert into a pixbuf (this could also be a pixbuf directly).

    # Define the entries for the auto complete
    entries = [
        ('revert', 'document-revert'),
        ('delete', 'edit-delete'),
        ('dev help', 'devhelp'),

    # Setup the list store (Note that the data types should match those of the entries)
    list_store = Gtk.ListStore(str, str)

    # Fill the list store
    for entry_pair in entries:

Next step is setting up the EntryCompletion and linking it with the Liststore

    # Create the Entry Completion and link it to the list store
    completion = Gtk.EntryCompletion()

Now the magic, we need to create 2 renderers, one for the text, one for the pixbufs. We then pack these in the completion to add columns to it.

    # Create renderer's for the pixbufs and text
    image_renderer = Gtk.CellRendererPixbuf.new()
    cell_renderer = Gtk.CellRendererText.new()

    # Pack the columns in to the completion, in this case first the image then the string
    completion.pack_start(image_renderer, True)
    completion.pack_start(cell_renderer, True)

In order to make sure the renderers use the the correct column we here specify which column from the ListStore the renderers should read. For the image_renderer we set the icon_na

Post Status

Asked in February 2016
Viewed 1,965 times
Voted 7
Answered 1 times


Leave an answer

Quote of the day: live life