Table panel overlaps or goes in background of other nodes

GoJS
1

Hi

On click of text block of a table row, I am showing extra rows. But it goes in the background or overlaps to other nodes. I dont want to see this behaviour rather I would like to see clean diagram where nodes don’t overlap or go in the background other nodes.

Any help would appreciated please

new go.Binding('text', 'nodeType')),
        $(go.TextBlock,
          {
            font: '300 10pt Questrial',
            editable: false,
            row: 0, column: 1, columnSpan: 2,
            alignment: go.Spot.Center,

          },
          {
            click: function (e, item) {
              var node = item.diagram.findNodeForKey(item.Zd);
              if (node) {
                myDiagram.startTransaction('expandDetails');
                myDiagram.model.setDataProperty(node.data, 'showSummary', !node.data.showSummary);

…
…
…

$(go.Panel, “Table”,
{
row: 2, column: 0,
columnSpan: 2,
defaultAlignment: go.Spot.Left,
width: 250
},
// new go.Binding(“height”, “detailsHeight”),
// new go.Binding(‘height’, ‘detailsHeight’),
new go.Binding(“visible”, “showSummary”, function (v) { return v ? false : true; }),
…
…
…

gojs%20overlaps
gojs overlaps.png880×373 18.6 KB

…

2

I fixed it by using below code for now

myDiagram.model.setDataProperty(node.data, ‘myLayor’, ‘Foreground’);

3

The positioning of nodes is the responsibility of the Diagram.layout. Have you set that to an instance of TreeLayout? If so, my guess is that you have also set Layout.isOngoing to false, when you should not have set that at all (or set it to its default value of true).

See, for example, IVR Tree.

4

thats a perfect example for my need. Thanks for sharing it.
Is it possible replicate expand functionality in click header row instead of expander button?

5

Sure, it’s just a GraphObject.click event handler. Look at the definition of the “PanelExpanderButton”, if you are interested.