AG-Grid API - how to get return values

[MarkSimUM]

** Updated example code 19 Sept 2022 **

I would like to be able to save the user selected Ag-Grid column state. However, I can not figure out how to get the grid ColumnState JSON into JavaScript / local storage. Within justpy, columnApi.getColumnState() will return this information.

import justpy as jp
import pandas as pd


grid_options = """{
  allowDragFromColumnsToolPanel:true,
  enableCharts: true,
  enableRangeSelection: true,	 

  defaultColDef: {
    minWidth: 100,
    // allow every column to be aggregated
    enableValue: true,
    // allow every column to be grouped
    enableRowGroup: true,
    filter: true,
    // allow every column to be pivoted
    enablePivot: true,
    sortable: true,
    },
    columnDefs: [
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ],
    rowData: [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Toyota", model: "Corolla", price: 25000},
      {make: "Toyota", model: "Camry", price: 33000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Ford", model: "Mustang", price: 53000},
      {make: "Ford", model: "Explorer", price: 39000},
      {make: "Porsche", model: "Boxter", price: 72000}
      
         ],

  
  sideBar: {

  
    toolPanels: [
      {
        id: 'columns',
        labelDefault: 'Column Custom',
        labelKey: 'columns',
        iconKey: 'columns',
        toolPanel: 'agColumnsToolPanel',
        minWidth: 225,
        width: 250,
        maxWidth: 400,
        toolPanelParams: {
            suppressColumnMove: false,
            suppressSyncLayoutWithGrid: false, 
            suppressRowGroups: false,
            suppressValues: false,
            suppressRowGroups: false,
            suppressPivots: false,
            suppressPivotMode: false,
            suppressColumnFilter: false,
            suppressColumnSelectAll: false,
            suppressColumnExpandAll: false,
          },            

        },
       {
        id: 'filters',
        labelDefault: 'Filters',
        labelKey: 'filters',
        iconKey: 'filter',
        toolPanel: 'agFiltersToolPanel',
        minWidth: 180,
        maxWidth: 400,
        width: 250,
        }, 

    ],
    position: 'left',
    defaultToolPanel: 'columns',
  },


}
"""



def grid_test(request):

  # ?? how do you get AG-Grid get api information --->  
    async def saveColumnState(self, msg):
        
        await msg.page.run_javascript("""
        console.log('How do you get gridOptions.columnApi.getColumnState() into local storage?')
        console.log('How do you pass ag-Grid information via JavaScript?')
        """)  
        wp.row_data_divMessages.text = 'How do you get gridOptions.columnApi.getColumnState() into local storage? '
        wp.row_data_divMessages.text = wp.row_data_divMessages.text+'  How do you pass ag-Grid information via JavaScript? '
        
    # placeholder for printing AG-Grid column state
    async def printColumnState(self, msg):
        await msg.page.run_javascript("""
        for (var i = 0; i<3; i++) {
            console.log('Line: ' + i);
            }

        """)
        wp.row_data_divMessages.text = 'Once ag-Grid ColumnState is in local storage, test by printing to console...'

    # set a javaScript variable to window.localStorage
    async def initStore(self, msg):
        await msg.page.run_javascript("""
        myStorage = window.localStorage;
        console.log(myStorage)
        """)
        
    # example of saving key|value to local storage
    async def setStore(self, msg):
        await msg.page.run_javascript("""
        localStorage.setItem('myItem', 'a value');
        """)

        
    async def deselect_rows(self, msg):
        colState = ''
        await self.grid.run_api('deselectAll()', msg.page)
    async def select_all_rows(self, msg):
        await self.grid.run_api('selectAll()', msg.page)
    def row_selected(self, msg):
        wp = msg.page
        if msg.selected:
            wp.selected_rows[msg.rowIndex] = msg.data
        else:
            wp.selected_rows.pop(msg.rowIndex)
        s = f'Selected rows {sorted(list(wp.selected_rows.keys()))}'
        for i in sorted(wp.selected_rows):
            s = f'{s}\n Row {i}  Data: {wp.selected_rows[i]}'
        if wp.selected_rows:
            wp.rows_div.text = s
        else:
            wp.rows_div.text = 'No row selected'
         
    wp = jp.WebPage()
    wp.selected_rows = {}  # Dictionary holding selected rows
    wp.column_state = {}   # attempt to save the column state from AG-Grid api
    grid = jp.AgGrid(a=wp, options=grid_options, style='height: 400px; width: 800px; margin: 0.25em')

    grid.options.columnDefs[0].checkboxSelection = True
    grid.on('rowSelected', row_selected)
    wp.rows_div = jp.Pre(text='', classes='border text-lg', a=wp)
    
    # placeholders for code to save or print Ag-Grid column state:
    btn_state = jp.Button(text='save Column State', classes=jp.Styles.button_simple+' m-2', a=wp, click=saveColumnState)
    btn_state.grid = grid
    btn_printstate = jp.Button(text='print Column State', classes=jp.Styles.button_simple+' m-2', a=wp, click=printColumnState)
    btn_printstate.grid = grid

    row_data_divMessages = jp.Div(a=wp)
    grid.row_data_divMessages = row_data_divMessages 

    wp.row_data_divMessages = jp.Pre(text='(messages)', classes='border text-lg', a=wp)
    
    btn_storeinit = jp.Button(text='init store', classes=jp.Styles.button_simple+' m-2', a=wp, click=initStore)
    btn_storeinit.grid = grid
    btn_store = jp.Button(text='store', classes=jp.Styles.button_simple+' m-2', a=wp, click=setStore)
    btn_store.grid = grid


    btn_deselect = jp.Button(text='Deselect rows', classes=jp.Styles.button_simple+' m-2', a=wp, click=deselect_rows)
    btn_deselect.grid = grid
    btn_select_all = jp.Button(text='Select all rows', classes=jp.Styles.button_simple+' m-2', a=wp, click=select_all_rows)
    btn_select_all.grid = grid
    wp.rows_div = jp.Pre(text='(data will go here when you select rows)', classes='border text-lg', a=wp)

    return wp

jp.justpy(grid_test)

[elimintz]

You will need to use the web page's run_javascript method along with with the result_ready event as explained here: https://justpy.io/reference/webpage/#async-def-run_javascriptself-javascript_string-request_id-sendtrue

If you create a simple example with this, please post it and I will add it to the docs.

[WolfgangFahl]

@MarkSimUM I have added your code to the examples and the syntax is not ok. Could you please amend/advise?

[MarkSimUM]

I updated my comment with new code. I was hoping to get some help on how to get Ag-Grid ColumnState information into JavaScript / local session so I can save it for later use.

On Sat, Sep 17, 2022 at 2:24 PM Wolfgang Fahl @.***> wrote:

@MarkSimUM https://github.com/MarkSimUM I have added your code to the examples and the syntax is not ok. Could you please amend/advise? [image: grafik] https://user-images.githubusercontent.com/1336221/190871328-7d761cce-84f0-4f67-918d-cf9cb486563a.png

— Reply to this email directly, view it on GitHub https://github.com/justpy-org/justpy/issues/342#issuecomment-1250119284, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACSQM36JM42MUACC47BGTLTV6YEG3ANCNFSM5MZEZZCA . You are receiving this because you were mentioned.Message ID: @.***>

[WolfgangFahl]

see #685