{"id":5910,"date":"2020-05-26T09:58:54","date_gmt":"2020-05-26T09:58:54","guid":{"rendered":"https:\/\/www.askpython.com\/?p=5910"},"modified":"2020-05-26T09:58:56","modified_gmt":"2020-05-26T09:58:56","slug":"tkinter-treeview-widget","status":"publish","type":"post","link":"https:\/\/www.askpython.com\/python-modules\/tkinter\/tkinter-treeview-widget","title":{"rendered":"Tkinter TreeView Widget"},"content":{"rendered":"\n

Hello again! As a part of our Tkinter tutorial series<\/a>, today’s post will cover the TreeView widget.<\/p>\n\n\n\n

The TreeView widget is very useful if you want to display a hierarchy of items, with all attributes listed side by side.<\/p>\n\n\n\n

For example, if you want to construct an application which looks like the Windows File Explorer, we can do this using Tkinter’s TreeView widget.<\/p>\n\n\n\n

\"Windows
Windows File Explorer 1<\/figcaption><\/figure><\/div>\n\n\n\n

So, what TreeView allows us to do is to build a tree-like structure and insert items accordingly, along with their attributes.<\/p>\n\n\n\n

You can dynamically add or remove nodes from your Tree when you want to, so this is very useful for a lot of your GUI applications.<\/p>\n\n\n\n

We can construct the Tree according to our preference.<\/p>\n\n\n\n

If you want to replicate the file explorer, you’d create a TreeView of files with their attributes, and add nested files and folders as the children of the parent folders!<\/p>\n\n\n\n

While we won’t be doing this exercise, I’d suggest you try this out on your own, so that you can get a good understand of how TreeView<\/code> works.<\/p>\n\n\n\n

Let’s now look at how we can construct a TreeView widget, and perform operations on it – like insertion and deletion.<\/p>\n\n\n\n

\n\n\n\n

Construct a TreeView Widget<\/h2>\n\n\n\n

The TreeView widget belongs to the tkinter.ttk<\/code> module, so we must import this.<\/p>\n\n\n

\nimport tkinter.tk as ttk\n<\/pre><\/div>\n\n\n
Now, we can refer to the widget as ttk.TreeView()<\/code>.<\/p>\n\n\n\n
To create a new TreeView widget, the syntax is simple.<\/p>\n\n\n
\ntree = ttk.Treeview(master, columns)\n<\/pre><\/div>\n\n\n
Here, tree<\/code> corresponds to the root node of the newly formed tree. Here, master <\/code>refers to the main Tkinter application master node.<\/p>\n\n\n\n
columns<\/code> is a tuple, which refers to the names of the columns.<\/p>\n\n\n\n
For example, we can construct a TreeView widget like this, having the columns “Name” and “ID”:<\/p>\n\n\n
\ntree = ttk.Treeview(master, columns=("Name", "ID"))\n<\/pre><\/div>\n\n\n
This tree will be constructed using master<\/code> as the base widget. Typically, you would want it to be the main master object of your application:<\/p>\n\n\n
\nmaster = tk.Tk()\n<\/pre><\/div>\n\n\n
Now, while we have a TreeView widget, it makes no sense to display it since it is empty.<\/p>\n\n\n\n
Let’s first insert some objects, so that we can view the TreeView in our actual applications.<\/p>\n\n\n\n
Keep in mind that the rows of a TreeView node consists only of strings, like this:<\/p>\n\n\n
\n"Label" , "Hello", "Second Col", "Third Col"\n<\/pre><\/div>\n\n\n
Now, let’s insert some nodes to our newly constructed TreeView.<\/p>\n\n\n\n
Insert to a TreeView<\/h2>\n\n\n\n
The insert syntax is very simple. We take the TreeView object, and insert some values<\/code>, labelled using a text<\/code>. We can also specify a unique ID for the node, using the iid<\/code> parameter.<\/p>\n\n\n
\ntree.insert(parent, index, iid, text, values)\n<\/pre><\/div>\n\n\n
Here, we insert the node to parent<\/code>. If you want the parent<\/code> widget as the master (root) node, we can set this to the empty string (”). Otherwise, we must mention the iid<\/code> of an existing parent node.<\/p>\n\n\n\n
The child number of this node is referenced using index<\/code>.<\/p>\n\n\n\n
For example, if you want to insert at the first child, you specify index=0<\/code>. If you want to insert at the end, you can mention the special value 'end'<\/code>.<\/p>\n\n\n
\ntree.insert(parent='', index='end', iid=0, text="Label", values=("Hello", "Second Col", "Third Col"))\n<\/pre><\/div>\n\n\n
The above is an example of inserting to the end of a root node, with the values as the below row:<\/p>\n\n\n
\n"Label" , "Hello", "Second Col", "Third Col"\n<\/pre><\/div>\n\n\n
Unfortunately, there isn’t an easy way to construct a TreeView, since you need other widgets to visualize the output properly.<\/p>\n\n\n\n
Please ensure that you have gone through our tutorial sections on the Tkinter Button<\/a>, Grid Manager<\/a>, and Tkinter Entry<\/a> widgets before proceeding further.<\/p>\n\n\n\n
I’ll provide a sample application to visualize the output, using these widgets:<\/p>\n\n\n
\nimport tkinter as tk\nimport tkinter.ttk as ttk\n\nclass Application(tk.Frame):\n    def __init__(self, root):\n        self.root = root\n        self.initialize_user_interface()\n\n    def initialize_user_interface(self):\n        # Configure the root object for the Application\n        self.root.title("Application")\n        self.root.grid_rowconfigure(0, weight=1)\n        self.root.grid_columnconfigure(0, weight=1)\n        self.root.config(background="green")\n\n        # Define the different GUI widgets\n        self.name_label = tk.Label(self.root, text="Name:")\n        self.name_entry = tk.Entry(self.root)\n        self.name_label.grid(row=0, column=0, sticky=tk.W)\n        self.name_entry.grid(row=0, column=1)\n\n        self.idnumber_label = tk.Label(self.root, text="ID")\n        self.idnumber_entry = tk.Entry(self.root)\n        self.idnumber_label.grid(row=1, column=0, sticky=tk.W)\n        self.idnumber_entry.grid(row=1, column=1)\n\n        self.submit_button = tk.Button(self.root, text="Insert", command=self.insert_data)\n        self.submit_button.grid(row=2, column=1, sticky=tk.W)\n\n        self.exit_button = tk.Button(self.root, text="Exit", command=self.root.quit)\n        self.exit_button.grid(row=0, column=3)\n\n        # Set the treeview\n        self.tree = ttk.Treeview(self.root, columns=('Name', 'ID'))\n\n        # Set the heading (Attribute Names)\n        self.tree.heading('#0', text='Item')\n        self.tree.heading('#1', text='Name')\n        self.tree.heading('#2', text='ID')\n\n        # Specify attributes of the columns (We want to stretch it!)\n        self.tree.column('#0', stretch=tk.YES)\n        self.tree.column('#1', stretch=tk.YES)\n        self.tree.column('#2', stretch=tk.YES)\n\n        self.tree.grid(row=4, columnspan=4, sticky='nsew')\n        self.treeview = self.tree\n\n        self.id = 0\n        self.iid = 0\n\n    def insert_data(self):\n        self.treeview.insert('', 'end', iid=self.iid, text="Item_" + str(self.id),\n                             values=("Name: " + self.name_entry.get(),\n                                     self.idnumber_entry.get()))\n        self.iid = self.iid + 1\n        self.id = self.id + 1\n\napp = Application(tk.Tk())\napp.root.mainloop()\n<\/pre><\/div>\n\n\n
Here, I have created some labels and entries for the input. I’ve also created a TreeView, which comprises of two parts:<\/p>\n\n\n\n
  • The TreeView Headings (To display the column names)<\/li>
  • The TreeView Columns and the insert_data()<\/code> method<\/li><\/ul>\n\n\n\n
    Whenever we press the “Insert” button, the insert_data()<\/code> method will be called on our TreeView widget.<\/p>\n\n\n\n
    Now, enough of talking. Let’s now test our program for insertion!<\/p>\n\n\n\n
    \"Treeview
    Treeview Example<\/figcaption><\/figure><\/div>\n\n\n\n
    Okay, that seems to work quite well! Let’s now add a Delete button so that we can delete a selected row.<\/p>\n\n\n\n
    \n\n\n\n
    Deleting a row from the TreeView<\/h2>\n\n\n\n
    There exists a TreeView.delete()<\/code> method that we can take advantage of. This will delete the corresponding node (row, in our case) from our TreeView widget.<\/p>\n\n\n
    \ntree.delete(iid)\n<\/pre><\/div>\n\n\n
    This simply takes the iid<\/code> Identification Number of the node, and deletes it from the TreeView!<\/p>\n\n\n\n
    We’ll wrap this up on a method called delete_data()<\/code>.<\/p>\n\n\n\n
    Now, the big question is how we can get the id number of our row, from the TreeView widget.<\/p>\n\n\n\n
    Well, this depends on how<\/em> you’re going to be performing the deletion operation.<\/p>\n\n\n\n
    We’ll delete a row whenever we select that row using the mouse. After the row gets highlighted, we can press the delete button, and this will remove it from the TreeView<\/code> widget.<\/p>\n\n\n\n
    To do this, we will use the TreeView.focus()<\/code> method, to get the iid<\/code> of the row (as a string). We can use this to delete that row directly!<\/p>\n\n\n
    \n    def delete_data(self):\n        row_id = int(self.tree.focus())\n        self.treeview.delete(row_id)\n<\/pre><\/div>\n\n\n
    Let’s add a delete button and use this method as a callback function!<\/p>\n\n\n\n
    After adding it, the application will look like this:<\/p>\n\n\n
    \nimport tkinter as tk\nimport tkinter.ttk as ttk\n\nclass Application(tk.Frame):\n    def __init__(self, root):\n        self.root = root\n        self.initialize_user_interface()\n\n    def initialize_user_interface(self):\n        # Configure the root object for the Application\n        self.root.title("Application")\n        self.root.grid_rowconfigure(0, weight=1)\n        self.root.grid_columnconfigure(0, weight=1)\n        self.root.config(background="green")\n\n        # Define the different GUI widgets\n        self.name_label = tk.Label(self.root, text="Name:")\n        self.name_entry = tk.Entry(self.root)\n        self.name_label.grid(row=0, column=0, sticky=tk.W)\n        self.name_entry.grid(row=0, column=1)\n\n        self.idnumber_label = tk.Label(self.root, text="ID:")\n        self.idnumber_entry = tk.Entry(self.root)\n        self.idnumber_label.grid(row=1, column=0, sticky=tk.W)\n        self.idnumber_entry.grid(row=1, column=1)\n\n        self.submit_button = tk.Button(self.root, text="Insert", command=self.insert_data)\n        self.submit_button.grid(row=2, column=1, sticky=tk.W)\n\n        self.delete_button = tk.Button(self.root, text="Delete", command=self.delete_data)\n        self.delete_button.grid(row=100, column=100)\n\n        self.exit_button = tk.Button(self.root, text="Exit", command=self.root.quit)\n        self.exit_button.grid(row=0, column=3)\n\n        # Set the treeview\n        self.tree = ttk.Treeview(self.root, columns=('Name', 'ID'))\n\n        # Set the heading (Attribute Names)\n        self.tree.heading('#0', text='Item')\n        self.tree.heading('#1', text='Name')\n        self.tree.heading('#2', text='ID')\n\n        # Specify attributes of the columns (We want to stretch it!)\n        self.tree.column('#0', stretch=tk.YES)\n        self.tree.column('#1', stretch=tk.YES)\n        self.tree.column('#2', stretch=tk.YES)\n\n        self.tree.grid(row=4, columnspan=4, sticky='nsew')\n        self.treeview = self.tree\n\n        self.id = 0\n        self.iid = 0\n\n    def insert_data(self):\n        self.treeview.insert('', 'end', iid=self.iid, text="Item_" + str(self.id),\n                             values=("Name: " + self.name_entry.get(),\n                                     self.idnumber_entry.get()))\n        self.iid = self.iid + 1\n        self.id = self.id + 1\n\n    def delete_data(self):\n        row_id = int(self.tree.focus())\n        self.treeview.delete(row_id)\n\napp = Application(tk.Tk())\napp.root.mainloop()\n<\/pre><\/div>\n\n\n
    Output<\/strong><\/p>\n\n\n\n
    \"Treeview
    Treeview Delete<\/figcaption><\/figure><\/div>\n\n\n\n
    Now, we have the basic structure of the TreeView completed, and also implemented bare-bones insertion and deletion operations.<\/p>\n\n\n\n
    I’d suggest you to add more functionality to this application by dealing with other operations, such as updating some rows. You may also notice that the item numbers are not ordered properly after deletion.<\/p>\n\n\n\n
    Here’s a simple template function for update()<\/code> that you can use as a reference:<\/p>\n\n\n
    \ndef update(self):\n    for idx, node in enumerate(self.treeview.get_children()):\n        self.tree.item(node, text="Updated_Item_" + str(idx))\n<\/pre><\/div>\n\n\n
    This updates all the rows of your TreeView<\/code> and changes your text<\/code> label. You can modify other attributes similarly.<\/p>\n\n\n\n
    These are among the various improvements that you could make to your application.<\/p>\n\n\n\n
    \n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    Hopefully, you’ve got this simple application working using TreeView<\/code>. We briefly looked at how we could use this widget to display rows and columns of our application, structured as a Tree.<\/p>\n\n\n\n
    \n","protected":false},"excerpt":{"rendered":"
    Hello again! As a part of our Tkinter tutorial series, today’s post will cover the TreeView widget. The TreeView widget is very useful if you want to display a hierarchy of items, with all attributes listed side by side. For example, if you want to construct an application which looks like the Windows File Explorer, […]<\/p>\n","protected":false},"author":7,"featured_media":6051,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[92],"tags":[],"class_list":["post-5910","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tkinter"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts\/5910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/comments?post=5910"}],"version-history":[{"count":0,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts\/5910\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/media\/6051"}],"wp:attachment":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/media?parent=5910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/categories?post=5910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/tags?post=5910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}