Z-index for arrow node

GoJS
1

We have some custom table nodes with arrows for each row of table marked in blue, and we have an arrow shape inside that table, but it is not visible. How can we set z-index to make this arrow layer top of the table nodes?

here my table node

(go.Node, "Auto", {isShadowed:true,name: "groupshape", shadowOffset: new go.Point(0.2, 2),shadowColor:'lightgray',shadowBlur:'10'}, new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), (go.Shape, “RoundedRectangle”, {width: 150, strokeWidth: 0, stroke: “#989898”, fill: “White”}),
//new go.Binding(“stroke”, “error”, function(v) { return “red” })
new go.Binding(“stroke”, “error”),
{ selectionAdorned: false, // don’t bother with any selection adornment
selectionChanged: onSelection },
$(go.Panel, “Vertical”,

            $(go.Panel, "Auto",

                $(go.Shape, "RoundedRectangle", {
                    height: 25,
                    width: 150,
                    fill: colors.blue,
                    strokeWidth: 0, stroke: null

                }),

                $(go.TextBlock, {
                        stroke: "white",

                        font: "14px FrutigerNext_LT_Regular"
                    },
                    new go.Binding("text"))),
            // The title

            //$(go.Placeholder, {})

$(go.Panel, "Table",
    new go.Binding("itemArray", "items"),
    {
        stretch: go.GraphObject.Vertical,
        defaultRowSeparatorStroke: "gray",
        defaultColumnSeparatorStroke: "gray",
        itemTemplate: $(go.Panel, "Spot",
            new go.Binding("row"),
            new go.Binding("column"),
            new go.Binding("rowSpan"),
            new go.Binding("columnSpan"),
            new go.Binding("fill"),
            {alignment: go.Spot.Left},
            $(go.Shape, "Rectangle",
                {fill: "white", strokeWidth: 0, width: 70, height: 15},
                new go.Binding("fill", "c")

            ),

            $(go.TextBlock, new go.Binding("text", "name"),
                {margin: 5, font: "14px FrutigerNext_LT_Regular"}),
            // The arrow that acts as a port on either the left or ride side
            $(go.Shape,


                {
                    alignment: go.Spot.Right,
                    name: 'arrow',
                    figure: "TriangleRight",
                    //margin: 6,
                    width: 7.5, height: 7.5,
                    fill: "white",
                    stroke: "lightgray",
                    strokeWidth: 1, portId: "Out",
                    fromLinkable: true,
                    toLinkable: true


                },
                //new go.Binding("fill", "error", function(v) { return "red" }),

                // These bindings make the assumption there will only be two columns
                new go.Binding("alignment", "column", function (col) {
                    return (col === 0) ? go.Spot.Left : go.Spot.Right;
                }),

                new go.Binding("alignmentFocus", "column", function (col) {
                    return (col === 1) ? go.Spot.Left : go.Spot.Right;
                }),
                new go.Binding("portId", "", function (data) {
                    // This assumes row and column are always specified and that they are unique
                    var string = (data.column === 0) ? "In" : "Out";
                    return string + data.row;
                }),
                new go.Binding("fromLinkable", "column", function (col) {
                    return (col === 1);
                }),
                new go.Binding("toLinkable", "column", function (col) {
                    return (col === 0);
                })
            ) // end arrow shapw
        ) // end item template
    }
)

))

2

Perhaps you have a good reason for it, but I’m surprised that your items do not each describe a whole row and that your Panel.itemTemplate isn’t a “TableRow” Panel where each element has a different hard-coded GraphObject.column value.

3

i don`t understand what you said you can you explain more details? or can you help me to create something like image i showed you? Friend Simon is given this to me long back.

4

Didn’t what he give you include visible ports on both sides?

What I am talking about is what is shown in most of the examples that use “Table” Panels. Each row of the table is implemented as a “TableRow” Panel, where each of its elements has a different value for column:. The port on the left would be in column 0 and the port on the right would be in column N-1, where N seems to be 4 in your case.

For example, the Record Mapper sample, Record Mapper, does this, except that it doesn’t have separate left and right ports – it uses the whole row as a single port. Still, the itemTemplate (named fieldTemplate) demonstrates what I mean about using a “TableRow” Panel.