Go Node Hover Adornment location is not proper for the row in table layout

I am using table layout and i need to show a delete icon on hovering the row,
but for every row the icon is coming at the top right.

This is my group template code

 const templateName = 'ListContainer';
        this.diagram.groupTemplateMap.add(templateName,
            $(go.Group, 'Auto',
                {
                    layerName: 'Background',
                    name: 'LIST_CONTAINER',
                    stretch: go.GraphObject.Fill,
                    width: 500,
                    height: 600,
                    selectable: false,
                    computesBoundsAfterDrag: false,
                    computesBoundsIncludingLocation: false,
                    handlesDragDropForMembers: false,
                    mouseDragEnter: function (e: go.InputEvent, group: any, prev: go.GraphObject) { group.isHighlighted = true; },
                    mouseDragLeave: function (e: go.InputEvent, group: any, next: go.GraphObject) { group.isHighlighted = false; },
                    mouseDrop: (e, obj) => this.listContainerGroupMouseDropHandler(e, obj)
                },
                new go.Binding('row'),
                new go.Binding('column', 'col'),
                $(go.Shape,
                    {
                        stroke: 'lightgray',
                        fill: 'white',
                        stretch: go.GraphObject.Fill,
                    },
                ),

                $(go.Panel, 'Auto', { name: 'LIST_CONTAINER' },
                    { width: 300, margin: 10 },
                    $(go.Shape,
                        {
                            stroke: 'lightgray',
                            fill: 'white',
                            stretch: go.GraphObject.Fill,

                        },

                    ),
                    $(go.Panel, 'Table',
                        {
                            name: 'POSITIONS_CONTAINER_DATA',
                            defaultRowSeparatorStroke: 'lightgray',
                            defaultRowSeparatorStrokeWidth: 1,
                            stretch: go.GraphObject.Fill,

                            itemTemplate: this.setupListRowContainerTemplate()
                        },
                        new go.Binding('itemArray', 'positions')
                    )

                )
            ));

I have added the code for the adorment in the this.setupListRowContainerTemplate().

I have added this in my panel of row. And called the adorment function like
var nodeHoverAdornment = this.setupMouseOverDelete();

mouseHover: (e: any, obj: { part: any; }): void => {
                    console.log(obj);
                    var node = obj.part;
                    if (nodeHoverAdornment) { nodeHoverAdornment.adornedObject = node; }
                    node.addAdornment('mouseHover', nodeHoverAdornment);
                },
                mouseLeave: (e, obj) => {
                    setTimeout(function () {
                        if (obj.part) {
                            obj.part.removeAdornment('mouseHover');
                        }
                    }, 1000);
                } },

This is my adormnent code

private setupMouseOverDelete(): go.Adornment | undefined {
        return $(go.Adornment, 'Spot',
            $(go.Placeholder,
                {
                    isActionable: true,  // needed because this is in a temporary Layer
                    click: (e: any, obj: any) => {
                        var node = obj.part.adornedPart;
                        node.diagram.select(node);
                    }
                }),
            $('Button', { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Right, 'ButtonBorder.figure': 'Circle', 'ButtonBorder.stroke': 'transparent' },
                { click: (e, obj) => console.log(obj) },
                $(go.Shape, 'Circle', {
                    fill: '#ff6600', width: 20, height: 20, stroke: null, strokeWidth: 0, name: 'DELETE_SHAPE'
                }), this.addIcon('\ue872', { stroke: '#E0E0E0', height: 14 }),
            ),
        );
    }

You don’t show what the itemTemplate is. Did you want to show the delete button for each item panel when the user hovers over it?

But I’ll guess that the problem is that in your mouseHover event handler you are putting the adornment on the Node rather than on the item Panel. So I’ll guess that you need to change your code:

            var node = obj.part;
            if (nodeHoverAdornment) { nodeHoverAdornment.adornedObject = node; }
            node.addAdornment('mouseHover', nodeHoverAdornment);

to something like:

            var item = obj.findBindingPanel();
            if (nodeHoverAdornment) { nodeHoverAdornment.adornedObject = item; }
            item.part.addAdornment('mouseHover', nodeHoverAdornment);