Comments (7)
Below please find a simple example in which you use the grid's cellValueChanged event to capture changes from edit. In the example below when a cell changes the event handler cell_changed is called. In the example the values in msg are printed but that is the place where you would update the server side data repository. Let me know if this is what you are looking for.
I will work on a more complete CRUD example.
import justpy as jp
grid_options = """
{
defaultColDef: {
filter: true,
sortable: true,
resizable: true,
cellStyle: {textAlign: 'center'},
headerClass: 'font-bold'
},
columnDefs: [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
],
rowData: [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
]
}
"""
def cell_changed(self, msg):
print(msg)
print(f'Old value: {msg.oldValue}, New value: {msg.newValue}, Row Index: {msg.rowIndex}, Column ID: {msg.colId}')
print(f'Row data: {msg.data}')
# Here you would update your database or Pandas frame etc.
def grid_test():
wp = jp.WebPage()
grid = jp.AgGrid(a=wp, options=grid_options, style='height: 200px; width: 300px; margin: 0.25em')
for col_def in grid.options.columnDefs:
col_def.editable = True # You can add this directly to the columnDefs in grid_options
grid.on('cellValueChanged', cell_changed)
return wp
jp.justpy(grid_test)
from justpy.
This is helpful.
Thanks for the assistance.
You may have gathered I don't consider myself much of a developer, and more of an all-rounder. Your paragraph Hopefully, JustPy will enable teaching web development in introductory Python courses by reducing the complexity of web development. makes real sense to me.
from justpy.
Could you please take a look at https://justpy.io/grids_tutorial/database/ ?
Please let me know what you would like to see in addition to that example.
from justpy.
Not sure if you are wanting inline editing or a button click event. For a button click event this is what we had to do. Basically on cell click it prints the column id assuming there is an ID column:
grid = jp.AgGrid(a=whatever)
grid.on('cellClicked', cell_click)
def cell_click(self, target, msg):
if msg['colId'] == 'Some Text':
if msg['data'].get('Some Text', '') != '':
print(msg['data']['ID'])
print(msg['data']['Some Text'])
Hope this helps, and if you come up with a better way I would be interested in seeing it.
Credit for this goes to: https://github.com/johnrtipton
from justpy.
Hi @elimintz @knoxvilledatabase
Thanks for the prompt responses. I did miss the the SQLite Chinook example on my first pass. I see now this includes multiple tables and some Quasar. This is really great.
If we modify the example slightly to make the grid inline editable
def value_change(self, msg):
# print(self)
# print(msg)
# # Perhaps this?
# self.['rowData'].iloc[msg.rowIndex] = msg.['data'].values
def db_test(request):
wp = jp.QuasarPage()
table_name = request.query_params.get('table', 'albums')
s = jp.QSelect(options=table_names, a=wp, label="Select Table", outlined=True, input=selected_event,
style='width: 350px; margin: 0.25rem; padding: 0.25rem;', value=table_name)
g = tables[table_name].jp.ag_grid(a=wp, style='height: 90vh; width: 99%; margin: 0.25rem; padding: 0.25rem;')
g.options.pagination = True
g.options.paginationAutoPageSize = True
g.on('cellValueChanged', value_change)
# make grid editable
for z in range(len(tables[table_name].columns)):
g.options.columnDefs[z].editable = True
wp.g = g
return wp
Is there a nice way to push the edits back into the tables dataframe? Or indeed add/remove rows?
On the example I altered selected_event
adding a similar msg.page.g.options.columnDefs[z].editable = True
If this is too much work I understand if you choose not to respond.
Maybe my half day with JustPy has made me lazy as https://medium.com/ag-grid/building-a-crud-application-with-ag-grid-part-4-3189034df922 sure looks complicated in comparison.
I think I can probably use https://stackoverflow.com/questions/52188446/pandas-to-sql-to-update-unique-values-in-db or similar from there as replacing the whole table doesn't seem wise. I am more comfortable with SQL than Python.
Any insight is appreciated.
from justpy.
If you're familiar with Django, one option is to use the django orm with justpy:
sys.path.append('../path_to_project')
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'settings')
from django import setup
setup()
Import your django models:
from my_django_project.models import MyModel
Then you can interact with the django orm from the grid:
records = MyModel.objects.filter(is_active=True).order_by('id')
grid_data = [
{
'ID': record.id,
'First Name': record.first_name,
}
for record in records
]
dj_df = pandas.DataFrame(grid_data)
grid.load_pandas_frame(dj_df)
from justpy.
from justpy.
Related Issues (20)
- jp.AgGrid.load_lod(lod, columnDefs) overrides user-specified self.options.columnDefs HOT 1
- jp.redirect not working HOT 2
- Allow to redirect to new tab with POST HOT 1
- QEditor 'value' does not update when 'event_propagation=False' HOT 3
- add fastapi support
- build fails in test_route with PlainTextResponse(url) HOT 1
- Qtree doesn't support toggle HOT 4
- Cannot add meta tag to head of the page for mobile friendliness. HOT 1
- PlotlyChart not show
- Unnamed folder under js template
- CI fails due to TypeError: ChromeDriverManager.__init__() got an unexpected keyword argument 'cache_valid_range'
- I want to add the timeout for session in my justpy project. HOT 1
- Store session I'd in cookie HOT 1
- How to store custom cookie in justpy application .
- Question: Authentication with Firebase
- In QSelect multiple option is not working as expected HOT 1
- Announcing ofjustpy: A webdev framework build/derived from justpy (link: https://github.com/ofjustpy/ofjustpy) HOT 3
- Uncaught ReferenceError: JustpyCore is not defined
- Ajax mode doesn't work HOT 1
- The button spinner in the slot is rendered behind the button HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from justpy.