I would like to update a TableRow in a ScrollingTable that I created following your example.
I’m using a graphobject with a treelayout and two different node template.
I have a data structure based on two types of nodes:
the “scroll” node that contains the items that is an array full of “noscroll” nodes
{
key: mykey,
category: “scroll”,
text: key,
entityType: en.EntityType,
items: en.items,
}
{
key: mykey,
category: “noscroll”,
text: key,
entityType: en.EntityType,
fill: go.Brush.randomColor(),
}
This is the scrolling template that you created and I’m using adding the click action:
myDiagram.nodeTemplateMap.add("scroll", $(go.Node, "Vertical", { selectionObjectName: "SCROLLER", resizable: true, resizeObjectName: "SCROLLER", fromSpot: go.Spot.BottomSide, toSpot: go.Spot.TopSide, }, new go.Binding("location").makeTwoWay(), $(go.TextBlock, { font: "bold 14px sans-serif" }, new go.Binding("text", "entityType")), $(go.Panel, "Auto", $(go.Shape, { fill: "white" }), $("ScrollingTable", { name: "SCROLLER", desiredSize: new go.Size(250, 60), stretch: go.GraphObject.Fill, defaultColumnSeparatorStroke: "gray", defaultColumnSeparatorStrokeWidth: 0.5 }, new go.Binding("TABLE.itemArray", "items"), new go.Binding("desiredSize", "size").makeTwoWay(), { "TABLE.itemTemplate": $(go.Panel, "TableRow", { defaultStretch: go.GraphObject.Horizontal, fromSpot: go.Spot.BottomSide, toSpot: go.Spot.TopSide, }, new go.Binding("portId", "key"), $(go.TextBlock, { column: 0 }, new go.Binding("text", "entityType")), $(go.TextBlock, { column: 1 }, new go.Binding("text", "text")), $("Button", { column: 2, margin: new go.Margin(0, 1, 0, 0), desiredSize: new go.Size(20, 20), click: function (e, obj) { removeFromScroll(obj.panel.data.entityType, obj.panel.data.key) } }, $(go.Shape, "ThickCross", { desiredSize: new go.Size(8, 8) }) ), ), "TABLE.defaultColumnSeparatorStroke": "gray", "TABLE.defaultColumnSeparatorStrokeWidth": 0.5, "TABLE.defaultRowSeparatorStroke": "gray", "TABLE.defaultRowSeparatorStrokeWidth": 0.5, "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3) } ) ) ));
And this is the part in which I’m trying to remove a row from the table
> function removeFromScroll(entityType, key) {
var nodeDataArray = myDiagram.model.nodeDataArray var elemToRemove, toUpdateIndex; var itemArray;
for (var i = 0; i < nodeDataArray.length; i++) { if (nodeDataArray[i].category === "scroll" && nodeDataArray[i].entityType === entityType) { toUpdateIndex = i; itemArray = nodeDataArray[i].items; var index = itemArray.findIndex(item => item.key === key); if (index !== -1) { elemToRemove = itemArray[index]; itemArray.splice(index, 1); } } }
myDiagram.startTransaction("remove item"); var data = nodeDataArray[toUpdateIndex] var node = myDiagram.findNodeForData(data) node.data.items = Object.assign({}, itemArray); myDiagram.commitTransaction("remove item"); }
I remove correctly the node as can I see in a console log, but it remains in the scroll as nothing happened. What do I need to do?
Thanks