How to update ScrollingTable

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

I found the solution using this.
You are free to close the post.

Thanks