Is there an official way to add a row under another row in a tree datagrid? I've kind of worked it out, but I'm having a couple of issues:
` const addSubRow = () => {
AttributeRowCount++;
let grid = apiRef.current.getState();
if (grid.selectedRows.length === 1) {
let selectedID = grid.selectedRows[0];
let gridRow = grid.flatData.find(selected => selected.id === selectedID);
console.log("GridRow for Sub Row Insert:");
console.log(gridRow);
if (gridRow.data === undefined) {
gridRow.data = [];
}
let subRow = {
id: AttributeRowCount,
AttributeName: "1",
Scale: "1",
Rank: "0",
BuildPoints: "0",
PowerSlots: "0",
data: []
}
gridRow.data.push(subRow);
gridRow.open = true;
// Throws an Error:
//apiRef.current?.exec("open-row", { id: 0, nested: true });
}
console.log(grid);
}`
Issues:
- On the front end, the grid does not refresh to show the new row. If I add another row or otherwise get the grid to refresh, it will appear. Trying to execute "Open Row" just throws an error. I can provide the exact error if requested.
- There's no control to expand/collapse the tree. I have treetoggle set on the "AttributeName" column currently:
let gridCol = [
{ id: "id", flexgrow: 1, hidden: true },
{
id: "AttributeName",
width: 154,
treetoggle: true,
header: "Attribute",
footer: "Attribute",
editor: {
type: "richselect",
config: { template: (option) =>${option.label}` },
},
options: attributeList,
},
{
id: "Scale", header: "Scale", footer: "Scale", width: 100,
editor: {
type: "richselect",
config: { template: (option) => `${option.label}` },
},
options: attributeScale
},
{ id: "Rank", header: "Rank", footer: "Rank", width:75, editor: "text" },
{ id: "BuildPoints", header: "BP Cost", footer: "BP Cost", width: 75 },
{ id: "PowerSlots", header: "Power Slots", footer: "Power Slots", width: 95}
];`
Looking forward to any advice you might have!
Thanks!
