Inline editable datefield for ag-grid

[knoxvilledatabase]

Would it be possible to build an inline editable date component within ag-grid?

https://www.ag-grid.com/javascript-grid-cell-editing/

[elimintz]

It is possible, but it will require a major upgrade to the JavaScript component.
I'll take a deeper dive into the issue in the next few days.

[knoxvilledatabase]

Thank you! Would it be possible to integrate justpy components (like QSelect) into ag-grid in place of the html?

I think a completely inline editable ag-grid would be very powerful! Of course, it already has inline editable text field but needs the following:

1. Inline editable boolean
2. Inline editable datefield
3. Inline editable select field
4. Inline editable multi-select field

[snoodlenay]

knoxvilledatabase,

It took me some poking around the other day, but I found that Ag-Grid supports selects. Here's an example, based on your boolean example. Look at the definition of the column for the enabled field.

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"},
      {'headerName': "Enabled", 'field': "enabled",
       'editable': True,
       'cellEditor': 'agSelectCellEditor',
       'cellEditorParams': {
           'values': ["true", "false"],
       },
       }
    ],
      'rowData': [
      {'make': "Toyota", 'model': "Celica", 'price': 35000, 'enabled': True},
      {'make': "Ford", 'model': "Mondeo", 'price': 32000, 'enabled': False},
      {'make': "Porsche", 'model': "Boxter", 'price': 72000, 'enabled': False}
    ]
}


def grid_test():
    wp = jp.WebPage()
    grid = jp.AgGrid(a=wp, options=grid_options)
    return wp

jp.justpy(grid_test)

I'm not sure if multi and date are built into AG but I wouldn't be surprised. (The checkbox problem is one that AG doesn't seem to handle; other cases online have resorted to adding JS, as Eli has recommended.)

[knoxvilledatabase]

@snoodlenay, thank you for the example you posted. Very interesting!

I think the biggest challenge at this point is getting the value back to JustPy. I'm hoping in the future to use only ag-grid for all of my tables for inline editing of boolean, date, selects and multi-selects. I know @elimintz is working on it and always has brilliant solutions.

[snoodlenay]

@knoxvilledatabase, yes, @elimintz is working at a level I can't yet grasp :)

I should have thought to show how to capture the data. You can add this after you define the grid
self.grid.on('cellValueChanged', self.value_change)

and then do something like this:

    def value_change(self, msg):
        data = msg['data']
        if msg['colId'] == 'enabled':
            new_value = msg['newValue']
            # do something with value
            

I found the list of trappable events here, https://www.ag-grid.com/javascript-grid-events/.

[knoxvilledatabase]

Those trappable events definitely look useful!

Of course, I was able to get the value from @snoodlenay's answer but not from the html checkbox.

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"},
      {headerName: "Enabled", field: "enabled"}
    ],
      rowData: [
      {make: "Toyota", model: "Celica", price: 35000, enabled: '<input id="check1" type="checkbox" onclick="{console.log(this); console.log(this.checked)}" />'},
      {make: "Ford", model: "Mondeo", price: 32000, enabled: '<input id="check2" type="checkbox" />'},
      {make: "Porsche", model: "Boxter", price: 72000, enabled: '<input id="check3" type="checkbox" />'}
    ]
}
"""


def value_change(self, msg):
    # data = msg['data']
    if msg['colId'] == 'enabled':
        new_value = msg['newValue']
        print(new_value)


def grid_test():
    wp = jp.WebPage()
    grid = jp.AgGrid(a=wp, options=grid_options)
    grid.html_columns = [3]
    grid.on('cellValueChanged', value_change)
    return wp


jp.justpy(grid_test)