Replies: 5 comments 4 replies
-
|
Hello @cls116, thanks for trying pygubu. What you have to do is create your own InplaceEditor class. 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="<<TreeviewCellEdited>>" handler="on_cell_edited" add="" />
<bind sequence="<<TreeviewEditorsUnfocused>>" handler="on_editors_unfocused" add="" />
<bind sequence="<<TreeviewInplaceEdit>>" handler="on_inplace_edit" add="" />
<bind sequence="<<TreeviewSelect>>" 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. Alejandro A. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Thank you Alejandro. The problem was resolved well, and I was able to implement it as I wanted. |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
I'm glad you've solved. |
Beta Was this translation helpful? Give feedback.
-
|
I have additional questions alejandro~ thank you for helping me |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Hello @cls116.
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. Alejandro A. |
Beta Was this translation helpful? Give feedback.
-
|
Hello Alejandro~
|
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Hello Hae Sik,
Yes, is better when you have a minimal test case to run. Now I understand what you want to achieve.
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 = NoneThen 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)
...
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. 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() |
Beta Was this translation helpful? Give feedback.
-
|
Thank you Alejandro. The problem has been resolved well. In the init_widget function of class TestApp The function you want to implement is
|
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Cheer up Alejandro. We support you. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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?
Beta Was this translation helpful? Give feedback.
All reactions