how to inplace_entry event binding #243

cls116 · 2024-04-07T13:27:01Z

cls116
Apr 7, 2024

I want to bind the Tab key event to the inplace_entry of the pygubu EditableTreeview in order to display a popup window. How can I do that?

alejandroautalan · 2024-04-08T01:22:28Z

alejandroautalan
Apr 8, 2024
Maintainer

Hello @cls116, thanks for trying pygubu.

What you have to do is create your own InplaceEditor class.
A quick way to do this and maintain the functionality of "inplace_entry" is to derive from _EntryEditor.

The following example shows the latter, using the color selector as a popup window.

demoapp.py:

#!/usr/bin/python3
import tkinter as tk
import tkinter.ttk as ttk
import tkinter.colorchooser
import pathlib
import pygubu
from pygubu.widgets.editabletreeview import _EntryEditor

PROJECT_PATH = pathlib.Path(__file__).parent
PROJECT_UI = PROJECT_PATH / "demoapp.ui"


class MyEntryIEditor(_EntryEditor):

    def _create_widget(self, master, **kw):
        entry = super()._create_widget(master, **kw)
        entry.bind("<Tab>", self.show_popup)
        return entry

    def show_popup(self, event=None):
        parent = self._widget.winfo_toplevel()
        current = self._variable.get()
        rgb, color = tk.colorchooser.askcolor(current, parent=parent)
        if color:
            self._variable.set(color)


class EditableTreeviewDemoApp:
    def __init__(self, master=None):
        self.builder = builder = pygubu.Builder()
        builder.add_resource_path(PROJECT_PATH)
        builder.add_from_file(PROJECT_UI)
        self.mainwindow = builder.get_object("toplevel1", master)
        self.etv = builder.get_object("etv")

        self.allow_edit = None
        builder.import_variables(self, ["allow_edit"])
        self.allow_edit.set(True)

        builder.connect_callbacks(self)

        self.combo_values = ("A", "B", "C", "D", "E", "F")
        self.custom_editor = None
        self._setup_data()

    def _setup_data(self):

        # Add some data to the treeview
        data = [
            ("news", "http://www.realnews.com.ar", True, "A", 0, "red"),
            ("games", "https://www.gogamer.com.ar", True, "F", 0, "blue"),
            ("search", "https://duckduckgo.com.ar", False, "D", 0, "green"),
        ]
        for d in data:
            self.etv.insert("", tk.END, text=d[0], values=d[1:])

    def run(self):
        self.mainwindow.mainloop()

    def on_cell_edited(self, event=None):
        # This method is connected with the <<TreeviewCellEdited>>
        # virtual event of the Editabletreeview
        col, item = self.etv.get_event_info()
        msg = f"Column {col} of item {item} was changed"
        print(msg)
        data = self.etv.item(item, "values")
        print("New values:", data)

        # Test get_value method
        print(f"Column '{col}' value: ", self.etv.get_value(col, item))

    def on_inplace_edit(self, event=None):
        # This method is connected with the <<TreeviewInplaceEdit>>
        # virtual event of the Editabletreeview
        #
        # Get the column id and item id of the cell
        # that is going to be edited
        col, item = self.etv.get_event_info()

        # Allow edition only if allow_edit variable is checked
        if self.allow_edit.get():
            # Define the widget editor to be used to edit the column value
            if col in ("col1",):
                self.etv.inplace_entry(col, item)
            if col == "col2":
                self.etv.inplace_checkbutton(col, item)
            if col == "col3":
                self.etv.inplace_combobox(
                    col,
                    item,
                    self.combo_values,
                    readonly=True,
                    update_values=False,
                )
            if col == "col4":
                self.etv.inplace_spinbox(col, item, 0, 100, 5)
            if col == "col5":
                # create editor here, so all editors are created in order.
                if self.custom_editor is None:
                    self.custom_editor = MyEntryIEditor(self.etv)
                self.etv.inplace_editor(col, item, self.custom_editor)

    def on_row_selected(self, event=None):
        # This method is connected with the <<TreeviewSelect>> event
        # The Editabletreeview also uses this event so, Do not forget to
        # mark Add=True in the binding definition

        sel = self.etv.selection()
        if sel:
            item = sel[0]
            print(f"Row item {item} was selected.")

    def on_editors_unfocused(self, event=None):
        # user clicked in treeview area with no rows
        # the editors where hidden.
        print("Editors hidden")


if __name__ == "__main__":
    app = EditableTreeviewDemoApp()
    app.run()

demoapp.ui:

<?xml version='1.0' encoding='utf-8'?>
<interface version="1.3">
  <object class="tk.Toplevel" id="toplevel1">
    <property name="geometry">840x280</property>
    <property name="height">200</property>
    <property name="resizable">both</property>
    <property name="title" translatable="yes">Editable Treeview Example</property>
    <property name="width">200</property>
    <child>
      <object class="ttk.Frame" id="frame1">
        <property name="height">200</property>
        <property name="padding">4</property>
        <property name="width">200</property>
        <layout manager="pack">
          <property name="expand">true</property>
          <property name="fill">both</property>
          <property name="side">top</property>
        </layout>
        <child>
          <object class="ttk.Frame" id="frame2">
            <property name="height">200</property>
            <property name="width">200</property>
            <layout manager="pack">
              <property name="anchor">w</property>
              <property name="side">top</property>
            </layout>
            <child>
              <object class="ttk.Checkbutton" id="checkbutton1">
                <property name="text" translatable="yes">Allow edit</property>
                <property name="variable">boolean:allow_edit</property>
                <layout manager="pack">
                  <property name="side">top</property>
                </layout>
              </object>
            </child>
          </object>
        </child>
        <child>
          <object class="pygubu.builder.widgets.scrollbarhelper" id="scrollbarhelper1">
            <property name="scrolltype">both</property>
            <property name="usemousewheel">false</property>
            <layout manager="pack">
              <property name="expand">true</property>
              <property name="fill">both</property>
              <property name="side">top</property>
            </layout>
            <child>
              <object class="pygubu.builder.widgets.editabletreeview" id="etv">
                <property name="selectmode">extended</property>
                <bind sequence="&lt;&lt;TreeviewCellEdited&gt;&gt;" handler="on_cell_edited" add="" />
                <bind sequence="&lt;&lt;TreeviewEditorsUnfocused&gt;&gt;" handler="on_editors_unfocused" add="" />
                <bind sequence="&lt;&lt;TreeviewInplaceEdit&gt;&gt;" handler="on_inplace_edit" add="" />
                <bind sequence="&lt;&lt;TreeviewSelect&gt;&gt;" handler="on_row_selected" add="True" />
                <layout manager="pack">
                  <property name="side">top</property>
                </layout>
                <child>
                  <object class="ttk.Treeview.Column" id="coltree">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">w</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Tree</property>
                    <property name="tree_column">true</property>
                    <property name="visible">true</property>
                    <property name="width">140</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="col1">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">w</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Entry</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">200</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="col2">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">w</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Checkbutton</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">100</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="col3">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">w</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Combobox</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">100</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="col4">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">w</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Spinbox</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">100</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="col5">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">w</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Custom Editor</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">140</property>
                  </object>
                </child>
              </object>
            </child>
          </object>
        </child>
        <child>
          <object class="ttk.Frame" id="frame3">
            <property name="height">200</property>
            <property name="width">200</property>
            <layout manager="pack">
              <property name="fill">x</property>
              <property name="pady">5 0</property>
              <property name="side">top</property>
            </layout>
            <child>
              <object class="ttk.Label" id="label1">
                <property name="text" translatable="yes">Extra:</property>
                <layout manager="pack">
                  <property name="padx">0 5</property>
                  <property name="side">left</property>
                </layout>
              </object>
            </child>
            <child>
              <object class="ttk.Entry" id="entry1">
                <property name="text" translatable="yes">Entry to test focus.</property>
                <layout manager="pack">
                  <property name="side">left</property>
                </layout>
              </object>
            </child>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

If you need more control, you will need to derive from InplaceEditor and implement the required methods. An example of this is found here.

Let me know.
Regards

Alejandro A.

0 replies

cls116 · 2024-04-23T11:35:51Z

cls116
Apr 23, 2024
Author

Thank you Alejandro. The problem was resolved well, and I was able to implement it as I wanted.

1 reply

alejandroautalan Apr 23, 2024
Maintainer

I'm glad you've solved.

cls116 · 2024-05-03T12:18:52Z

cls116
May 3, 2024
Author

I have additional questions alejandro~
If the value selected in the pop-up window is code or name
What should I do if I want to insert a name into the column right next to where the event was executed?

thank you for helping me

1 reply

alejandroautalan May 4, 2024
Maintainer

Hello @cls116.

If the value selected in the pop-up window is code or name
What should I do if I want to insert a name into the column right next to where the event was executed?

If the next column is not editable, the easy way is to use the event "<<TreeviewCellEdited>>" and update the next column value in that event.

But, if the next column is also editable, you need "connected" custom editors. I managed to create and example for this case.

Let me know if this helps.
Regards

Alejandro A.

cls116 · 2024-05-07T12:40:04Z

cls116
May 7, 2024
Author

Hello Alejandro~
The example you provided did not produce results because it did not run on my local computer.
I have reviewed the sources you provided, but have not yet found a way to implement the function.
So I upload my source.
There are two functions I want to implement.

A function where the combobox list of the first column of the Editable Treeview is updated when the Header Combobox is selected.
Press the Tab key in the second column of etv to launch a popup window and then select in the popup window, the code is entered in the column where the tab was executed and the name is entered in the next column.

#!/usr/bin/python3
import pathlib
import tkinter.ttk as ttk
import pygubu
from pygubu.widgets.editabletreeview import _EntryEditor
from test_pop import TestPopApp
PROJECT_PATH = pathlib.Path(__file__).parent / 'screen'
PROJECT_UI = PROJECT_PATH / "test.ui"

# Custom Widget : Inplace Entry Widget Event Binding "Tab" Key
class MyEntryIEditor(_EntryEditor):    
    def _create_widget(self, master, **kw):
        entry = super()._create_widget(master, **kw)
        entry.bind("<Tab>", self.popup)
        return entry

    def popup(self, event=None):
        pop = TestPopApp()
        pop.popupData()
        pop.mainwindow.wait_window()
        if pop.set_values:
            self._variable.set(pop.set_values[1])

class TestApp:
    def __init__(self, master=None):
        self.builder = builder = pygubu.Builder(on_first_object=self.setup_ttk_styles)
        builder.add_resource_path(PROJECT_PATH)
        builder.add_from_file(PROJECT_UI)
        # Main widget
        self.mainwindow = builder.get_object("toplevel1", master)
        builder.connect_callbacks(self)
        self.init_widget()

    def run(self):
        self.mainwindow.mainloop()

    def setup_ttk_styles(self, widget=None):
        # ttk styles configuration
        self.style = style = ttk.Style()
        optiondb = style.master
        style.configure("MyCustomLabel.TLabel", background="green")
        style.configure("MyCustomFrame.TFrame", background='purple')
        style.configure("SecondStyle.TLabel", background="yellow", foreground="blue")
        style.configure('MyCoolButton.TButton', background='white')
        style.theme_use("default")     # clam, alt, default, classic
        style.configure('tv.Treeview')
    
    def init_widget(self):
        list_AG = ['1 - Cost','2 - Profit & Loss']
        self.dict_item = {
            '1':['1.Raw Matrials','2.Labor Costs','3.Manufacturing Overheads'],
            '2':['1.Sales','2.Cost of sales','3.Gross Profit','4.Selling admin & exp',
                 '5.Non-operating income','6.Non-operating expense']
        }
        self.cmbAG = self.builder.get_object('AccountGroup')
        self.cmbAG['state'] = 'readonly'
        self.cmbAG['values'] = list_AG
        self.etv = self.builder.get_object('etv')
        self.linenum = self.builder.get_object('Line')
        self.acctitem = self.builder.get_object('AcctItem')
        self.fromacct = self.builder.get_object('FromAcct')
        self.fromname = self.builder.get_object('FromName')
        self.toacct = self.builder.get_object('ToAcct')
        self.toname = self.builder.get_object('ToName')
        for i in range(9):                                              # Insert Treeview Blank Line
            self.etv.insert("", "end", text=i+1, values=(i+1, ""))
        self.btn_add = self.builder.get_object('btn_Add')
        self.btn_cancel = self.builder.get_object('btn_Cancel')

    #-----------------------------------------------------------------------------------------------------------------
    # Event
    # Connect <<ComboboxSelected>>
    def callback(self, event):
        cost_num = self.cmbAG.get()[:1]
        return self.dict_item[cost_num]

    # Connect <<TreeviewInplaceEdit>>
    def on_inplace_edit(self, event=None):
        if self.btn_add.grid_info():
            col, item = self.etv.get_event_info()
            if col in ('AcctItem'):
                self.etv.inplace_combobox(col, item, self.callback(event), readonly=True, update_values=True)
            if col in ('FromAcct','ToAcct'):
                self.custom_editor = None
                if self.custom_editor is None:
                    self.custom_editor = MyEntryIEditor(self.etv)
                self.etv.inplace_editor(col, item, self.custom_editor)
            if col in ('Remarks',):
                self.etv.inplace_entry(col, item)

    def close(self, event=None):
        self.mainwindow.destroy()
    
    #-----------------------------------------------------------------------------------------------------------------
    # Data

#---------------------------------------------------------------------------------------------------------------------
if __name__ == "__main__":
    app = TestApp()
    app.run()

#!/usr/bin/python3
import pathlib
import tkinter.ttk as ttk
import pygubu
import pandas as pd

PROJECT_PATH = pathlib.Path(__file__).parent / 'screen'
PROJECT_UI = PROJECT_PATH / "test_pop.ui"


class TestPopApp:
    def __init__(self, master=None):
        self.builder = builder = pygubu.Builder(on_first_object=self.setup_ttk_styles)
        builder.add_resource_path(PROJECT_PATH)
        builder.add_from_file(PROJECT_UI)
        # Main widget
        self.mainwindow = builder.get_object("top_pu", master)
        builder.connect_callbacks(self)
        self.init_widget()

    def run(self):
        self.mainwindow.mainloop()

    def setup_ttk_styles(self, widget=None):
        # ttk styles configuration
        self.style = style = ttk.Style()
        optiondb = style.master
        style.configure("MyCustomLabel.TLabel", background="green")
        style.configure("MyCustomFrame.TFrame", background='purple')
        style.configure("SecondStyle.TLabel", background="yellow", foreground="blue")
        style.configure('MyCoolButton.TButton', background='white')
        style.theme_use("default")     # clam, alt, default, classic
        style.configure('tv.Treeview')

    def init_widget(self):
        self.tv = self.builder.get_object("tv_pu")
        self.btn_ok = self.builder.get_object("btn_ok")
        self.btn_cancel = self.builder.get_object("btn_cancel")

    #--------------------------------------------------------------------------------------------------------------
    # Event
    def on_ok_clicked(self, event=None):
        selectv = self.tv.focus()
        values = self.tv.item(selectv, 'values')
        self.set_values = values
        self.mainwindow.destroy()  

    def on_cancel_clicked(self, event=None):
        self.mainwindow.destroy()

    #-------------------------------------------------------------------------------------------------------------
    # Data
    def popupData(self):
        acct = {
            'Code':['A','B','C','D','E','F','G','H','I','J','K','L'],
            'NAME':['ALPHA','BRAVO','CHARLIE','DELTA','ECHO','FOX','GOLF','HOTEL','INDIA','JULIETT','KILO','LIMA']
        }
        # Create df
        df = pd.DataFrame(acct)
        # 2.df to treeview
        for idx, row in df.iterrows():
            self.tv.insert(parent='', index='end', iid=idx+1, text=idx+1, values=(idx+1, row[0], row[1]))
        # 3.Event Bind
        self.tv.bind('<Double-Button-1>', lambda event: self.on_ok_clicked(event))

#-----------------------------------------------------------------------------------------------------------------
if __name__ == "__main__":
    app = TestPopApp()
    app.run()

<?xml version='1.0' encoding='utf-8'?>
<interface version="1.3">
  <object class="tk.Toplevel" id="toplevel1">
    <property name="geometry">740x310</property>
    <property name="height">200</property>
    <property name="width">200</property>
    <child>
      <object class="ttk.Frame" id="frame1">
        <property name="height">20</property>
        <property name="width">200</property>
        <layout manager="grid">
          <property name="column">0</property>
          <property name="padx">10</property>
          <property name="pady">10</property>
          <property name="row">0</property>
          <property name="sticky">nw</property>
        </layout>
        <containerlayout manager="grid">
          <property name="propagate">false</property>
        </containerlayout>
        <child>
          <object class="ttk.Label" id="Label_AccountGroup" named="True">
            <property name="text" translatable="yes">Account Group</property>
            <layout manager="grid">
              <property name="column">0</property>
              <property name="row">0</property>
              <property name="sticky">nsew</property>
            </layout>
          </object>
        </child>
        <child>
          <object class="ttk.Combobox" id="AccountGroup" named="True">
            <property name="width">13</property>
            <bind sequence="&lt;&lt;ComboboxSelected&gt;&gt;" handler="callback" add="" />
            <layout manager="grid">
              <property name="column">1</property>
              <property name="padx">10</property>
              <property name="row">0</property>
              <property name="sticky">nsew</property>
            </layout>
          </object>
        </child>
      </object>
    </child>
    <child>
      <object class="ttk.Frame" id="frame2">
        <property name="height">200</property>
        <property name="width">720</property>
        <layout manager="grid">
          <property name="column">0</property>
          <property name="padx">10</property>
          <property name="pady">10</property>
          <property name="row">1</property>
          <property name="sticky">nsew</property>
        </layout>
        <containerlayout manager="grid">
          <property name="anchor">n</property>
          <property name="propagate">false</property>
          <property type="col" id="0" name="weight">1</property>
          <property type="row" id="0" name="weight">1</property>
        </containerlayout>
        <child>
          <object class="pygubu.builder.widgets.scrollbarhelper" id="scrollbarhelper1">
            <property name="scrolltype">both</property>
            <property name="usemousewheel">false</property>
            <layout manager="grid">
              <property name="column">0</property>
              <property name="row">0</property>
              <property name="sticky">nsew</property>
            </layout>
            <child>
              <object class="pygubu.builder.widgets.editabletreeview" id="etv" named="True">
                <property name="selectmode">extended</property>
                <property name="show">headings</property>
                <bind sequence="&lt;&lt;TreeviewInplaceEdit&gt;&gt;" handler="on_inplace_edit" add="" />
                <layout manager="grid">
                  <property name="column">0</property>
                  <property name="row">0</property>
                  <property name="sticky">nsew</property>
                </layout>
                <child>
                  <object class="ttk.Treeview.Column" id="Line" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">#</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">40</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="AcctItem" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Group</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">80</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="FromAcct" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">From Acct</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">80</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="FromName" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">From Name</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">120</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="ToAcct" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">To Acct</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">80</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="ToName" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">To Name</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">120</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="Remarks" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Remarks</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">100</property>
                  </object>
                </child>
              </object>
            </child>
          </object>
        </child>
      </object>
    </child>
    <child>
      <object class="ttk.Frame" id="frame3">
        <property name="height">200</property>
        <property name="width">200</property>
        <layout manager="grid">
          <property name="column">0</property>
          <property name="padx">20</property>
          <property name="pady">10</property>
          <property name="row">2</property>
          <property name="sticky">sw</property>
        </layout>
        <child>
          <object class="ttk.Button" id="btn_Add" named="True">
            <property name="text" translatable="yes">Add</property>
            <layout manager="grid">
              <property name="column">0</property>
              <property name="row">0</property>
            </layout>
          </object>
        </child>
        <child>
          <object class="ttk.Button" id="btn_Cancel" named="True">
            <property name="command" type="command" cbtype="simple">close</property>
            <property name="text" translatable="yes">Cancel</property>
            <layout manager="grid">
              <property name="column">1</property>
              <property name="row">0</property>
            </layout>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

<?xml version='1.0' encoding='utf-8'?>
<interface version="1.3">
  <object class="tk.Toplevel" id="top_pu" named="True">
    <property name="height">200</property>
    <property name="title" translatable="yes">Supplier List</property>
    <property name="width">200</property>
    <child>
      <object class="ttk.Frame" id="frm_pu" named="True">
        <property name="height">200</property>
        <property name="width">200</property>
        <layout manager="grid">
          <property name="column">0</property>
          <property name="padx">10 10</property>
          <property name="pady">10 10</property>
          <property name="row">0</property>
        </layout>
        <child>
          <object class="pygubu.builder.widgets.scrollbarhelper" id="scrollbarhelper1">
            <property name="scrolltype">both</property>
            <property name="usemousewheel">false</property>
            <layout manager="grid">
              <property name="column">0</property>
              <property name="row">0</property>
            </layout>
            <child>
              <object class="ttk.Treeview" id="tv_pu" named="True">
                <property name="selectmode">extended</property>
                <property name="show">headings</property>
                <property name="style">tv.Treeview</property>
                <layout manager="grid">
                  <property name="column">0</property>
                  <property name="row">0</property>
                </layout>
                <child>
                  <object class="ttk.Treeview.Column" id="line_id" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">#</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">30</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="code" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Code</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">100</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="name" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Name</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">100</property>
                  </object>
                </child>
                <child>
                  <object class="ttk.Treeview.Column" id="ref" named="True">
                    <property name="column_anchor">w</property>
                    <property name="heading_anchor">center</property>
                    <property name="minwidth">20</property>
                    <property name="stretch">true</property>
                    <property name="text" translatable="yes">Ref</property>
                    <property name="tree_column">false</property>
                    <property name="visible">true</property>
                    <property name="width">100</property>
                  </object>
                </child>
              </object>
            </child>
          </object>
        </child>
      </object>
    </child>
    <child>
      <object class="ttk.Frame" id="frame2">
        <property name="height">200</property>
        <property name="width">200</property>
        <layout manager="grid">
          <property name="column">0</property>
          <property name="padx">10 10</property>
          <property name="pady">0 10</property>
          <property name="row">1</property>
          <property name="sticky">sw</property>
        </layout>
        <child>
          <object class="ttk.Button" id="btn_ok" named="True">
            <property name="command" type="command" cbtype="simple">on_ok_clicked</property>
            <property name="text" translatable="yes">OK</property>
            <layout manager="grid">
              <property name="column">0</property>
              <property name="padx">3 3</property>
              <property name="pady">3 3</property>
              <property name="row">0</property>
            </layout>
          </object>
        </child>
        <child>
          <object class="ttk.Button" id="btn_cancel" named="True">
            <property name="command" type="command" cbtype="simple">on_cancel_clicked</property>
            <property name="text" translatable="yes">Cancel</property>
            <layout manager="grid">
              <property name="column">1</property>
              <property name="padx">3 3</property>
              <property name="pady">3 3</property>
              <property name="row">0</property>
            </layout>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

1 reply

alejandroautalan May 8, 2024
Maintainer

Hello Hae Sik,

So I upload my source.

Yes, is better when you have a minimal test case to run. Now I understand what you want to achieve.

Press the Tab key in the second column of etv to launch a popup window and then select in the popup window, the code is entered in the column where the tab was executed and the name is entered in the next column

For this case, the editor needs to know which related column to update. So I add this info to the editor.

class MyEntryIEditor(_EntryEditor):
    def __init__(self, master, **kw):
        super().__init__(master, **kw)
        #
        # Store treeview instance and init related fields
        self.treeview = master
        self.curr_row_item = None
        self.related_col = None

Then use to update the related column:

class MyEntryIEditor(_EntryEditor):
    ...
    def popup(self, event=None):
        pop = TestPopApp()
        pop.popupData()
        pop.mainwindow.wait_window()
        if pop.set_values:
            self._variable.set(pop.set_values[1])
            #
            # Set value of related column
            if self.curr_row_item and self.related_col:
                label = pop.set_values[2]
                self.treeview.set(self.curr_row_item, self.related_col, label)

...
    def init_widget(self):
        ...
        self.fromacc_editor = MyEntryIEditor(self.etv)
        self.fromacc_editor.related_col = "FromName"
        self.toacc_editor = MyEntryIEditor(self.etv)
        self.toacc_editor.related_col = "ToName"

...
    def on_inplace_edit(self, event=None):
        if self.btn_add.grid_info():
            col, item = self.etv.get_event_info()
            ...
            if col == 'FromAcct':
                self.fromacc_editor.curr_row_item = item
                self.etv.inplace_editor(col, item, self.fromacc_editor)
           ...

A function where the combobox list of the first column of the Editable Treeview is updated when the Header Combobox is selected.

As we did above, whenever the logic of the editor goes outside EditableTreeview control, create a custom editor.

class GroupEditor(_ComboboxEditor):
    def _create_widget(self, master, **kw):
        kw["state"] = "readonly"
        return super()._create_widget(master, **kw)

    def set_options(self, new_values):
        self.widget.configure(values=new_values)
        curr_value = self._variable.get()
        if curr_value not in new_values:
            self._variable.set("")

Later, connect the editor with the update callback:

...
    def init_widget(self):
        ...
        # create and connect group column editor.
        self.group_editor = GroupEditor(self.etv)
        self.cmbAG.bind("<<ComboboxSelected>>", self.on_cmbAG_changed)

...
    def on_cmbAG_changed(self, event):
        cost_num = self.cmbAG.get()[:1]
        self.group_editor.set_options(self.dict_item[cost_num])

Let me know if you have more questions.
Regards!
Alejandro A

Full code below:

#!/usr/bin/python3
import pathlib
import tkinter.ttk as ttk
import pygubu
from pygubu.widgets.editabletreeview import _EntryEditor, _ComboboxEditor
from test_pop import TestPopApp
PROJECT_PATH = pathlib.Path(__file__).parent / 'screen'
PROJECT_UI = PROJECT_PATH / "test.ui"

# Custom Widget : Inplace Entry Widget Event Binding "Tab" Key
class MyEntryIEditor(_EntryEditor):
    def __init__(self, master, **kw):
        super().__init__(master, **kw)
        #
        # Store treeview instance and init related fields
        self.treeview = master
        self.curr_row_item = None
        self.related_col = None

    def _create_widget(self, master, **kw):
        entry = super()._create_widget(master, **kw)
        entry.bind("<Tab>", self.popup)
        return entry

    def popup(self, event=None):
        pop = TestPopApp()
        pop.popupData()
        pop.mainwindow.wait_window()
        if pop.set_values:
            self._variable.set(pop.set_values[1])
            #
            # Set value of related column
            if self.curr_row_item and self.related_col:
                label = pop.set_values[2]
                self.treeview.set(self.curr_row_item, self.related_col, label)


# Create a custom editor for account group field
# when logic is outside EditableTreeview control
# just like we did above.
class GroupEditor(_ComboboxEditor):
    def _create_widget(self, master, **kw):
        kw["state"] = "readonly"
        return super()._create_widget(master, **kw)

    def set_options(self, new_values):
        self.widget.configure(values=new_values)
        curr_value = self._variable.get()
        if curr_value not in new_values:
            self._variable.set("")


class TestApp:
    def __init__(self, master=None):
        self.builder = builder = pygubu.Builder(on_first_object=self.setup_ttk_styles)
        builder.add_resource_path(PROJECT_PATH)
        builder.add_from_file(PROJECT_UI)
        # Main widget
        self.mainwindow = builder.get_object("toplevel1", master)
        builder.connect_callbacks(self)

        self.init_widget()

    def run(self):
        self.mainwindow.mainloop()

    def setup_ttk_styles(self, widget=None):
        # ttk styles configuration
        self.style = style = ttk.Style()
        optiondb = style.master
        style.configure("MyCustomLabel.TLabel", background="green")
        style.configure("MyCustomFrame.TFrame", background='purple')
        style.configure("SecondStyle.TLabel", background="yellow", foreground="blue")
        style.configure('MyCoolButton.TButton', background='white')
        style.theme_use("default")     # clam, alt, default, classic
        style.configure('tv.Treeview')

    def init_widget(self):
        list_AG = ['1 - Cost','2 - Profit & Loss']
        self.dict_item = {
            '1':['1.Raw Matrials','2.Labor Costs','3.Manufacturing Overheads'],
            '2':['1.Sales','2.Cost of sales','3.Gross Profit','4.Selling admin & exp',
                 '5.Non-operating income','6.Non-operating expense']
        }
        self.cmbAG = self.builder.get_object('AccountGroup')
        self.cmbAG['state'] = 'readonly'
        self.cmbAG['values'] = list_AG
        self.etv = self.builder.get_object('etv')
        self.linenum = self.builder.get_object('Line')
        self.acctitem = self.builder.get_object('AcctItem')
        self.fromacct = self.builder.get_object('FromAcct')
        self.fromname = self.builder.get_object('FromName')
        self.toacct = self.builder.get_object('ToAcct')
        self.toname = self.builder.get_object('ToName')
        for i in range(9):                                              # Insert Treeview Blank Line
            self.etv.insert("", "end", text=i+1, values=(i+1, ""))
        self.btn_add = self.builder.get_object('btn_Add')
        self.btn_cancel = self.builder.get_object('btn_Cancel')

        #
        # Create editors only once (for your case):
        self.fromacc_editor = MyEntryIEditor(self.etv)
        self.fromacc_editor.related_col = "FromName"
        self.toacc_editor = MyEntryIEditor(self.etv)
        self.toacc_editor.related_col = "ToName"
        # create and connect group column editor.
        self.group_editor = GroupEditor(self.etv)
        self.cmbAG.bind("<<ComboboxSelected>>", self.on_cmbAG_changed)

    #-----------------------------------------------------------------------------------------------------------------
    # Event
    # Connect <<ComboboxSelected>>
    def on_cmbAG_changed(self, event):
        cost_num = self.cmbAG.get()[:1]
        self.group_editor.set_options(self.dict_item[cost_num])

    # Connect <<TreeviewInplaceEdit>>
    def on_inplace_edit(self, event=None):
        if self.btn_add.grid_info():
            col, item = self.etv.get_event_info()
            if col in ('AcctItem'):
                self.etv.inplace_editor(col, item, self.group_editor)
            if col == 'FromAcct':
                self.fromacc_editor.curr_row_item = item
                self.etv.inplace_editor(col, item, self.fromacc_editor)
            if col == 'ToAcct':
                self.toacc_editor.curr_row_item = item
                self.etv.inplace_editor(col, item, self.toacc_editor)
            if col in ('Remarks',):
                self.etv.inplace_entry(col, item)

    def close(self, event=None):
        self.mainwindow.destroy()

    #-----------------------------------------------------------------------------------------------------------------
    # Data

#---------------------------------------------------------------------------------------------------------------------
if __name__ == "__main__":
    app = TestApp()
    app.run()

cls116 · 2024-05-14T10:39:39Z

cls116
May 14, 2024
Author

Thank you Alejandro. The problem has been resolved well.
I have additional questions.

In the init_widget function of class TestApp
self.group_editor = GroupEditor(self.etv)
Can I bind an event to this instance?

The function you want to implement is

Function to add one more line when you select the value of the combo box in the last line of etv
Function to activate the update button when the combo box value of etv is changed

5 replies

cls116 May 24, 2024
Author

Cheer up Alejandro. We support you.

cls116 May 31, 2024
Author

Hi Alejandro, I found solutions to both issues. I will post it as a new post.

alejandroautalan May 31, 2024
Maintainer

Hello @cls116,
I'm glad you managed to solve it. I apologize for not responding, I have been sick these last few weeks.

Alejandro A.

cls116 Jun 1, 2024
Author

Alejandro, I was worried because I didn't hear back. Fortunately, the on_cell_edited function you created solved the problem. Are you okay now? I will pray for your health. thank you

alejandroautalan Jun 3, 2024
Maintainer

Hello @cls116, thanks for your kind words.
I'm fine now.

Regards
Alejandro A.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to inplace_entry event binding #243

{{title}}

Replies: 5 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

how to inplace_entry event binding #243

cls116 Apr 7, 2024

Replies: 5 comments · 8 replies

alejandroautalan Apr 8, 2024 Maintainer

cls116 Apr 23, 2024 Author

alejandroautalan Apr 23, 2024 Maintainer

cls116 May 3, 2024 Author

alejandroautalan May 4, 2024 Maintainer

cls116 May 7, 2024 Author

alejandroautalan May 8, 2024 Maintainer

cls116 May 14, 2024 Author

cls116 May 24, 2024 Author

cls116 May 31, 2024 Author

alejandroautalan May 31, 2024 Maintainer

cls116 Jun 1, 2024 Author

alejandroautalan Jun 3, 2024 Maintainer

cls116
Apr 7, 2024

Replies: 5 comments 8 replies

alejandroautalan
Apr 8, 2024
Maintainer

cls116
Apr 23, 2024
Author

alejandroautalan Apr 23, 2024
Maintainer

cls116
May 3, 2024
Author

alejandroautalan May 4, 2024
Maintainer

cls116
May 7, 2024
Author

alejandroautalan May 8, 2024
Maintainer

cls116
May 14, 2024
Author

cls116 May 24, 2024
Author

cls116 May 31, 2024
Author

alejandroautalan May 31, 2024
Maintainer

cls116 Jun 1, 2024
Author

alejandroautalan Jun 3, 2024
Maintainer