justpy-org / justpy

An object oriented high-level Python Web Framework that requires no frontend programming
https://justpy.io
Apache License 2.0
1.22k stars 96 forks source link

Drag/Drop agGrid #383

Closed ducnva closed 2 years ago

ducnva commented 2 years ago

Hi there, Can you tell me how to drag/drop agGrid with justpy? please let me see one simple example. thank a lot.

luongnv275 commented 2 years ago

import justpy as jp

grid_options1 = """ { defaultColDef: { flex: 1, minWidth: 100, sortable: true, filter: true, resizable: true, }, columnDefs: [ {headerName: "Make", field: "make",rowDrag:true}, {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} ], rowDragManaged: true,

} """ grid_options = """ { rowSelection: "multiple", rowDragMultiRow: true, suppressRowClickSelection: true,

rowDragManaged: true, suppressMoveWhenRowDragging: true, animateRows: true, defaultColDef: { filter: true, sortable: true, resizable: true, cellStyle: {textAlign: 'center'}, headerClass: 'font-bold' }, columnDefs: [ {headerName: "Make", field: "make",rowDrag:true}, {headerName: "Model", field: "model"}, {headerName: "Price", field: "price"} ], rowData: [ {make: "Toyota1", model: "Celica1", price: 35000}, {make: "Ford1", model: "Mondeo1", price: 32000}, {make: "Porsche1", model: "Boxter1", price: 72000} ], } """

async def page_ready(self, msg): jp.run_task(self.run_javascript(f''' grid1_def=cached_grid_def['g'+self.grid1.id]; grid_def = cached_grid_def['g'+self.grid.id]; zone=grid1_def.api.getRowDropZoneParams() grid_def.api.addRowDropZone(zone) ''')) def grid_test(): wp = jp.WebPage() wp.on('page_ready', page_ready)

wp.body_html='<script src="https://unpkg.com/ag-grid-community@27.3.0/dist/ag-grid-community.min.js"></script>'
self=wp
self.grid = jp.AgGrid(a=wp, options=grid_options , style='height: 200px; width: 300px; margin: 0.25em')
self.grid.id="grid"
self.grid.options.columnDefs[0].checkboxSelection = True

self.grid1= jp.AgGrid(a=wp, options=grid_options1 , style='height: 200px; width: 300px; margin: 0.25em')
self.grid1.id="grid1"
self.grid.grid1=self.grid1

return wp

jp.justpy(grid_test)

can you optimize drag and drop between 2 grids

ducnva commented 2 years ago

Thank @luongnv275 I will check example above