Hi
I am interested in an enterprised feature of ag-grid. JavaScript Data Grid: Range Selection
I do not see this feature mentioned in the ag-grid documentation. Cell Selection | Dash for Python Documentation | Plotly
Does dash ag-grid have this feature?
If not, would I have to “build” this react feature myself?
Do I pay only only to ag-grid for this feature?
I’m not even sure if these are the right questions to ask. Thanks!
Hello @rictuar ,
Yes, range selection is available with AG Grid, you just need to enableEnterpriseModules=True, and then it will work as desired.
I dont think that we have the selection available in a prop yet.
@jinnyzor Thanks for the prompt reply.
Is this in the works (actively)? Just want to plan out my approach, thanks.
The AG Grid enterprise is much more advanced than the community and has tons of features. We have done our best to make sure that the basics and normal use-cases are covered.
We dont have an issue open for this currently, but, I do have a standing issue open for exposing the api and columnApi which I think would allow for you to pull the rangeSelection:
opened 04:30PM - 22 May 23 UTC
Good day,
I'd like to request a feature to allow for JS to be used seamlessl… y with the grid's `api` and `columnApi`, this would allow for clientside callbacks to work arbitrarily and alter things about the grid's state without need to create specific endpoints in the grid's componet.
The reasoning:
There are tons of features built in to the [api](https://www.ag-grid.com/react-data-grid/grid-api/) and the [columnApi](https://www.ag-grid.com/react-data-grid/column-api/) that to include them all would bloat the component. Exposing these would allow for developers to customize their workflow in an indefinite number of ways.
Some current examples of things that would be available:
[scroll to row/column](https://community.plotly.com/t/ag-grid-vertically-scrolls-the-grid/75457/2)
[drag between grids](https://community.plotly.com/t/dash-ag-grid-how-to-drag-drop-between-grids/75214/8) - would more align with the AG Grid [example](https://www.ag-grid.com/react-data-grid/drag-and-drop/#dragging-between-grids)
[adjusting row height](https://www.ag-grid.com/react-data-grid/row-height/#apiresetrowheights)
More complex workflows for components and editors to interact with other things about the grid.
Complications:
With great power comes great responsibility. There is the chance that updates to the grid may not make their way into the `columnState` in Dash, `rowData` or other changes may also get out of sync.
Possible JS workflow:
```
app.clientside_callback(
""" function (i) {
var gridState = document.getElementById("#grid").gridState()
return window.dash_clientside.no_update
}""",
Output('grid','id'), Input('grid','id'))
app.clientside_callback("""
function resetHeight(n) {
if (n) {
gridState.api.resetRowHeights()
}
return window.dash_clientside.no_update
}""",
Output('resetHeight','n_clicks'), Input('resetHeight','n_clicks')
```
You can also open up a feature request for the rangeSelection to be a prop. Although, I’m not sure there is a way to listen for this type of event without some issues.
thanks for sharing. the timing is rather auspicious.
Because of your point about “avoiding bloat”, I won’t make a specific issue.
1 Like
Hello @rictuar ,
With dash ag grid 2.2.0, you can add custom event listeners through the exposed api.
Check out the flow here:
Hello @smalgotrader ,
With dash ag grid 2.2.0, you now have access to the api and columnApi.
The api allows you to add custom event listeners, now, this won’t directly trigger a callback, but you can definitely hook it into something to trigger it.
You could use the cellContextMenu event, and make sure the column matches the column you want, if so. Prevent the default and show your custom menu where they can disable or enable the updates.
To add it, do something like this:
dash_ag_grid.getAp…
1 Like