Tree Ag Grid: Rows with children does not show up in selectedRows after checking the box

Hi,

I created a tree using dash ag grid.

In my tree, some nodes have children. and all the parent nodes, have a checkbox to select.

When I select a parent node with no child, it shows in selectedRows. But when I select a parent node with children, it does not. I’d like to add that I made all the children editable cell, though if I type into a children cell, after clicking enter, my type goes away.

dag.AgGrid(
id=“field-modal-grid”,
enableEnterpriseModules=True,
licenseKey=license_key,
rowData=fields,
columnDefs=,
columnSize=“sizeToFit”,
defaultColDef={
“flex”: 1,
“checkboxSelection”: {“function”: "params.node.level == 0 "},
“editable”: {“function”: “params.node.level != 0”},
},
dashGridOptions={
“rowSelection”: “multiple”,
‘suppressAggFuncInHeader’: True,
‘groupDefaultExpanded’ : -1,
‘autoGroupColumnDef’: {
‘headerName’: ‘Field’,
‘cellRendererParams’: {
‘suppressCount’: True,
}
},
“treeData”: True,
“getDataPath”: {“function”: “getDataPath(params)”},
“rowMultiSelectWithClick”: True
})

dagfuncs.getDataPath = function (row) {
if (!row.UserInput){
return [row.HeaderName]
}
else {
return [row.HeaderName, row.UserInput]
}
}

Thanks,

Hello @231530353,

You might need to add your own event listener for selected rows to the api to pull in the data differently.

@231530353

Did you try the groupSelectsChildren prop?

React Data Grid: Tree Data

thanks for your reply @jinnyzor. I added cellValueChanged, but as it is expected, changing any parent node which has any children does not fire the cellValueChanged callback. Any other way that I can add event listener?

thanks for your reply @AnnMarieW. I don’t want any children hav any checkbox. I guess grouping makes all the items selectable

@AnnMarieW I tried group selection but editable still not working:

dag.AgGrid(
id=“field-modal-grid”,
enableEnterpriseModules=True,
licenseKey=license_key,
rowData=fields,
columnDefs=,
columnSize=“sizeToFit”,
defaultColDef={
“flex”: 1,
“checkboxSelection”: True,
“editable”: True,
},
dashGridOptions={
“rowSelection”: “multiple”,
‘suppressAggFuncInHeader’: True,
‘groupDefaultExpanded’ : -1,
‘autoGroupColumnDef’: {
‘headerName’: ‘Field’,
‘cellRendererParams’: {
‘suppressCount’: True,
}
},
“treeData”: True,
“getDataPath”: {“function”: “getDataPath(params)”},
“rowMultiSelectWithClick”: True,
“groupMultiAutoColumn”: True,
“rowSelection”: “multiple”,
“groupSelectsChildren”: True,
“suppressRowClickSelection”: True,
“suppressAggFuncInHeader”: True,
“singleClickEdit”: True,
“enableCellChangeFlash”: True,
})

@231530353

Is there an example in the AG Grid docs with the functionality you are looking for? If not, since you have AG Grid Enterprise, you could ask the support team at AG Grid. If you get an example using React, we can help you adapt it for Dash.

Note that AG Grid even offers support during the trial period. Find more info here:

Thanks a lot @AnnMarieW . No I cannot find any similar example. You’re right, my best bet would be to contact the AG Grid Enterprise support team.

1 Like

Hi @AnnMarieW

I created this code example using Java Script AG Grid. I used the closest example in AG Grid document and added editable attribute to it. The main issue is, if you edit a cell, it does not work, and shows the original cell value.

https://codesandbox.io/p/sandbox/group-selects-children-forked-yjj7mn?file=%2Fmain.ts

I have the same issue using Dash Ag Grid too.

In the browser console of your example, you will see this helpful message:

AG Grid: you need either field or valueSetter set on colDef for editing to work

That’s my problem. I cannot define any field in colDef for tree nodes, and getDataPath does the job.

You’ll need to adjust the nodes by hand upon cellValueChanged.

This is a lot more complex than what you will normally encounter. Haha.

I think because there is no field or valueSetter, no cellValueChanged event is triggered when I edit a node child