Hello,
I have a ag-grid with pagination, and I would to automatically scroll to the newly added row when I add one.
I tried to get inspired from to Scroll To | Dash for Python Documentation | Plotly page, but I still have one error saying “Cannot read properties of undefined (reading ‘rowIndex’)” when I click on the add button. The row is well added but it does not scoll to the end page.
Here is my code :
import dash_ag_grid as dag
from dash import Dash, dcc, html, Input, Output, clientside_callback, MATCH, callback, State
import pandas as pd
import uuid
import json
app = Dash(__name__)
class ComponentAIO(html.Div):
class ids:
grid = lambda aio_id: {
"component": "ComponentAIO",
"subcomponent": "grid",
"aio_id": aio_id,
}
entry = lambda aio_id: {
"component": "ComponentAIO",
"subcomponent": "entry",
"aio_id": aio_id,
}
button = lambda aio_id: {
"component": "ComponentAIO",
"subcomponent": "button",
"aio_id": aio_id,
}
# # Make the ids class a public class
ids = ids
# Define the arguments of the All-in-One component
def __init__(self, aio_id=None):
if aio_id is None:
aio_id = str(uuid.uuid4())
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)
df["id"] = df.index
columnDefs = [
{
"headerName": "Row #",
"valueGetter": {"function": "params.node.rowIndex"},
"width": 100,
},
{"field": "id", "width": 75},
] + [{"field": c} for c in df.columns if c != "id"]
super().__init__(
[
html.Label("Scroll to row id:"),
dcc.Input(id=self.ids.entry(aio_id), min=0, max=df.shape[0], type="number"),
html.Button( "Add ",id=self.ids.button(aio_id)),
dag.AgGrid(
id=self.ids.grid(aio_id),
columnDefs=columnDefs,
rowData=df.to_dict("records"),
defaultColDef={"resizable": True, "sortable": True},
getRowId="params.data.id",
dashGridOptions={"pagination": True, "paginationPageSize": 50},
),
]
)
@callback(
Output(ids.grid(MATCH), component_property='rowTransaction',allow_duplicate=True),
Output(ids.entry(MATCH), component_property='value',allow_duplicate=True),
Input(ids.button(MATCH), "n_clicks"),
State(ids.grid(MATCH), component_property='rowData'),
prevent_initial_call=True,
)
def add_row(n_clicks:int,data):
print(len(data))
#print(data[0])
last_id=data[-1].get("id")
print("last id is ",data[-1].get("id"))
empty_row={'id':last_id+1,'athlete': 'me', 'age': '0', 'coutry': 'Zimbabwe', 'year': 2023, 'sport':"ski"}
return {"add": [empty_row]},last_id+1
clientside_callback(
"""function (rowId) {
if (rowId) {
grid = dash_ag_grid.getApi("""+ json.dumps(ids.grid("go-to-pagination"))+""")
rowIndex = grid.getRowNode(rowId).rowIndex
pageTarget = Math.floor(rowIndex / grid.paginationGetPageSize())
grid.paginationGoToPage(pageTarget)
}
return {"rowId": rowId.toString()}
}""",
Output(ids.grid("go-to-pagination"), "scrollTo"),
Input(ids.entry("go-to-pagination"), "value"),
prevent_initial_call=True,
)
app.layout = ComponentAIO("go-to-pagination")
if __name__ == "__main__":
app.run(debug=True)
Can someone help me ? Thanks