Tkinter TreeView remove dotbox highlight

Question

Hi I'm trying to remove the dotbox hightlight when i select a certain row of my TreeView, It highlights the text of the first columns that also contains a image:

I'm a newbie, but guessing that is happening because the first column is not created with the constructor and is separate to the other columns as you can see in the following example:

    f = ttk.Frame(master)
    f.pack(fill=BOTH, expand=True)
    self.dataCols = ('Project Name','Status', 'Cores', 'Added date/time')
    self.tree = ttk.Treeview(columns=self.dataCols)
    self.tree.grid(in_=f, row=0, column=0, sticky=NSEW)
    self.tree.heading('#0', text='', anchor='center')
    self.tree.heading('#1', text='Project Name', anchor='center')
    self.tree.heading('#2', text='Status', anchor='center')
    self.tree.heading('#3', text='Cores', anchor='center')
    self.tree.heading('#4', text='Added date/time', anchor='center')
    self.tree.column('#0', anchor='center', width=1)
    self.tree.column('#1', anchor='w')
    self.tree.column('#2', anchor='center')
    self.tree.column('#3', anchor='center')
    self.tree.column('#4', anchor='center')
    f.rowconfigure(0, weight=1)
    f.columnconfigure(0, weight=1)
    style = ttk.Style(master)
    style.configure('Treeview', rowheight=38)

It was implemented this way to allow a image as a column value.

Edit:

This is how I'm inserting rows to the Treeview.

    self.tree.insert('', 'end', image=auxiliary_classes.global_data.img_container[obj.name],
                     value=obj.get_list())

Edit:

    style = ttk.Style(master)
    style.theme_use('clam')

    style.layout('nodotbox.Treeview.Item',
                 [('Treeitem.padding',
                   {'children': [('Treeitem.indicator', {'side': 'left', 'sticky': ''}),
                                 ('Treeitem.image', {'side': 'left', 'sticky': ''}),
                                 ('Treeitem.text', {'side': 'left', 'sticky': ''})],
                    'sticky': 'nswe'})])

    style.configure(style='nodotbox.Treeview')

Edit:

This code did the trick!

    style = ttk.Style()
    style.layout("Treeview.Item",
                 [('Treeitem.padding', {'sticky': 'nswe', 'children':
                     [('Treeitem.indicator', {'side': 'left', 'sticky': ''}),
                      ('Treeitem.image', {'side': 'left', 'sticky': ''}),
                      # ('Treeitem.focus', {'side': 'left', 'sticky': '', 'children': [
                      ('Treeitem.text', {'side': 'left', 'sticky': ''}),
                      # ]})
                      ],
                                        })]
                 )

j_4321 j_4321 · Accepted Answer · 2018-03-26T19:49:00

The dotbox highlight is part of the style so you can remove it by changing the layout of the treeview's style.

The default layout is

[('Treeitem.padding',
  {'children': [('Treeitem.indicator', {'side': 'left', 'sticky': ''}),
    ('Treeitem.image', {'side': 'left', 'sticky': ''}),
    ('Treeitem.focus',
     {'children': [('Treeitem.text', {'side': 'left', 'sticky': ''})],
      'side': 'left',
      'sticky': ''})],
   'sticky': 'nswe'})]

and the dotbox is 'Treeitem.focus', so if you create a custom layout without it, then it will no longer be visible:

style = ttk.Style(master)

style.layout('nodotbox.Treeview.Item', 
             [('Treeitem.padding',
               {'children': [('Treeitem.indicator', {'side': 'left', 'sticky': ''}),
                 ('Treeitem.image', {'side': 'left', 'sticky': ''}),
                 ('Treeitem.text', {'side': 'left', 'sticky': ''})],
                'sticky': 'nswe'})])

tree.configure(style='nodotbox.Treeview')

EDIT: Full example:

import tkinter as tk
from tkinter import ttk

master = tk.Tk()

style = ttk.Style(master)

style.layout('nodotbox.Treeview.Item', 
             [('Treeitem.padding',
               {'children': [('Treeitem.indicator', {'side': 'left', 'sticky': ''}),
                 ('Treeitem.image', {'side': 'left', 'sticky': ''}),
                 ('Treeitem.text', {'side': 'left', 'sticky': ''})],
                'sticky': 'nswe'})])

tk.Label(master, text='Default layout').pack()
tree1 = ttk.Treeview(master, columns=('a', 'b'))
tree1.insert('', 'end', text='item 1', values=('a', 'b'))
tree1.insert('', 'end', text='item 2', values=('a', 'b'))
tree1.pack()

tk.Label(master, text='No dotbox').pack()
tree2 = ttk.Treeview(master, style='nodotbox.Treeview', columns=('a', 'b'))
tree2.insert('', 'end', text='item 1', values=('a', 'b'))
tree2.insert('', 'end', text='item 2', values=('a', 'b'))
tree2.pack()

master.mainloop()

Tkinter TreeView remove dotbox highlight

1 Answers