How to get rowselected event in aggrid

[abulka]

I'd like aggrid to support selection events, and .bind_value(). Currently the demos require the user click a button to extract the selected row, which is not ideal.

The https://www.ag-grid.com/javascript-data-grid/row-selection/#selection-events show

...
  onRowSelected: onRowSelected,
  onSelectionChanged: onSelectionChanged,
};

function onRowSelected(event) {
  window.alert(
    'row ' + event.node.data.athlete + ' selected = ' + event.node.isSelected()
  );
}

Is there a way to get this into ui.aggrid?

[falkoschindler]

You can register rowSelected event handlers like this:

grid.on('rowSelected', lambda msg: print(msg))

Output:

{'id': 4, 'listener_id': '24f241a9-64a5-49c2-a752-7559dbee877e', 'args': {'rowIndex': 1, 'data': {'name': 'Bob', 'age': 21}, 'source': 'rowClicked', 'selected': True, 'rowHeight': 28, 'rowId': '1'}}
{'id': 4, 'listener_id': '24f241a9-64a5-49c2-a752-7559dbee877e', 'args': {'rowIndex': 0, 'data': {'name': 'Alice', 'age': 18}, 'source': 'rowClicked', 'selected': True, 'rowHeight': 28, 'rowId': '0'}}
...

Regarding binding, somewhere else I wrote:

Collections like lists and dictionaries are hard to bind in Python. While an object notices when one of its members is accessed, there is no way to notice when one of its members is modified, e.g. adding or removing a row. That's why NiceGUI's binding module doesn't support binding lists or dictionaries (yet?), and why we don't provide a binding API for table rows. But we're totally up for suggestions if there's a reasonable way to implement such a feature.

So I'm not sure how to make the selected rows bindable.

[abulka]

grid.on('rowSelected', lambda msg: print(msg))

Brilliant, thanks.

Collections like lists and dictionaries are hard to bind in Python. While an object notices when one of its members is accessed, there is no way to notice when one of its members is modified

Just speculating, if ui.elements could could consume objects as well as dictionaries then would it be possible to data bind in those cases where you supply an object?

[falkoschindler]

I'm not quite sure if I understand your question. What do you mean with ui.elements could could consume objects?

[abulka]

If "collections like lists and dictionaries are hard to bind in Python" and objects are not, then switching to (optionally) using objects as parameters to ui.elements might help introduce binding. For example instead of

tree_data = [
    {'id': 'numbers', 'children': [ ... ]},
    {'id': 'letters', 'children': [ ... ]}
]

ui.tree(tree_data, ...)

we instead create

class TreeData:
 ...
class TreeItem:
 ...

ui.tree(TreeData(), ...)

or something like that. The point is, changing e.g. treeitem.name = 'Fred' would (perhaps via a property setter) notify the tree UI to update itself in whatever way binding in NiceGui happens. Just a thought.

[falkoschindler]

The problem is: treeitem.name = 'Fred' might inform treeitem that the property name has been set. But ui.tree doesn't notice anything about what happens within its attribute objects. In this way objects are not easier to bind than collections (lists, dicts, ...). Only when binding agains primitive types like int, float, str and bool we can either get noticed by the containing object when the property setter is called (as our BindableProperty does) or continually read the property value for change detection.

[rajeshhalyal]

I am getting erratic results on this

mygrid =ui.aggrid({'columnDefs':myColumnDefinitions, 'rowData': myDataRows,  'rowSelection': 'single'})
mygrid.on("rowSelected", lambda msg: self.handle_row_select(msg.args['data']))


def handle_row_select(self,record):
    self.current_record  = record
    ui.notify(self.current_record)

On every selection of row in grid by mouse click the notify give two rows the on that is currently selected and one that is newly selected
Even the order is in the order in which the rows are in the datarows list
that is if currently 2nd row is selected and I click on 4th row the notify shows 4th record first then the 2nd record
What am I missing or doing wrong

[falkoschindler]

Your second example seems much more reasonable, because the event arguments contain every information you need. Requesting the selected row again from the client is unnecessary overhead.

[rajeshhalyal]

sorry not related to this thread
any link to solve the setselectedrow
like mygrid.setselectedrow(2) or something similar

[falkoschindler]

Selecting a row requires some custom JavaScript:

grid = ui.aggrid({
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
    ],
    'rowData': [
        {'name': 'Alice', 'age': 18},
        {'name': 'Bob', 'age': 21},
        {'name': 'Carol', 'age': 42},
    ],
    'rowSelection': 'single',
})

ui.slider(min=0, max=2, on_change=lambda e: ui.run_javascript(f'''
    getElement({grid.id}).api.getRowNode({e.value}).setSelected(true);
''')).classes('w-20')

[rajeshhalyal]

Thank you very much it was helpful and was able to do what I wanted
I am Weak in javascript

[kleynjan]

Thanks very much @falkoschindler for this example! I was stuck on await run_javascript to first get the node and then try to call setSelected in a second run_javascript call. Your code shows how it's done instead. Maybe include in the docs for aggrid?

It might be worth noting that the example above is more or less broken if you click on the header to sort the grid. Here is an expanded version that deals with that. Somehow AG Grid makes it difficult to access the rows by current index (=after sorting).

grid = ui.aggrid({
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
    ],
    'rowData': [
        {'name': 'Alice', 'age': 92},
        {'name': 'Bob', 'age': 21},
        {'name': 'Carol', 'age': 42},
    ],
    'rowSelection': 'single',
})

def set_selected_by_index(index):
    ui.run_javascript(f'''
        getElement({grid.id}).api.forEachNodeAfterFilterAndSort((node, idx) => {{
            if (idx === {index} ) {{
                node.setSelected(true);
            }}
        }});
    ''')
ui.slider(min=0, max=2, on_change=lambda e: set_selected_by_index(e.value)).classes('w-20')