Inspecting item array values

GoJS
1

Is it possible to attach data inspector to a table row?
Or make an editable adornment?

I want to be able to change some value using something like that… I know I could make a special node template and use this, but I was thinking if what I’m asking is possible.

2

Could you show a sketch of what you want and how it should react as the node changes?

3

28
Screen Shot 2018-08-16 at 15.15.28.png1298×490 32.9 KB

I’ve composed this with screenshots of your samples (was the quickest way). So, when fieldB is selected, I want the inspector to display the values of that row.

4

Just change the click event handler so that when the field is selected it sets the object being inspected to be the field descriptor object that is the item in the Array of the node’s data.

5

I’ve been trying to do it like this:

var fieldTemplate =
    $(go.Panel, "TableRow",  // this Panel is a row in the containing Table
      new go.Binding("portId", "name"),  // this Panel is a "port"
      {
        background: "transparent",  // so this port's background can be picked by the mouse
        fromSpot: go.Spot.LeftRightSides,  // links only go from the right side to the left side
        toSpot: go.Spot.LeftRightSides,
        // allow drawing links from or to this port:
        fromLinkable: true, toLinkable: true
      },
      { // allow the user to select items -- the background color indicates whether "selected"
        //?? maybe this should be more sophisticated than simple toggling of selection
        click: function(e, item) {
          // assume "transparent" means not "selected", for items
          var oldskips = item.diagram.skipsUndoManager;
          item.diagram.skipsUndoManager = true;
          if (item.background === "transparent") {
            item.background = "dodgerblue";
          } else {
            item.background = "transparent";
          }
          item.diagram.skipsUndoManager = oldskips;

          var inspector = new Inspector('info', myDiagram,
                        {
                            properties: {
                        // key would be automatically added for nodes, but we want to declare it read-only also:
                        "key": { readOnly: true, show: Inspector.showIfPresent },
                        // fill and stroke would be automatically added for nodes, but we want to declare it a color also:
                        "fill": { show: Inspector.showIfPresent, type: 'color' },
                        "stroke": { show: Inspector.showIfPresent, type: 'color' }
                            }
                            }
                            )
        }
      },
      $(go.Shape,
        { width: 12, height: 12, column: 0, strokeWidth: 2, margin: 4,
          // but disallow drawing links from or to this shape:
          fromLinkable: false, toLinkable: false },
        new go.Binding("figure", "figure"),
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: new go.Margin(0, 2), column: 1, font: "bold 13px sans-serif",
          // and disallow drawing links from or to this text:
          fromLinkable: false, toLinkable: false },
        new go.Binding("text", "name")),
      $(go.TextBlock,
        { margin: new go.Margin(0, 2), column: 2, font: "13px sans-serif" },
        new go.Binding("text", "info"))
    );

I’ve added an info div at the bottom of the page… but it doesn’t work

6

I’m assuming you have a DIV holding the Inspector somewhere on the page. Where it is doesn’t matter for your question, since you can manage that separately.

So you don’t create a new Inspector each time the user clicks on a field. You call myInspector.inspectObject(item.data) on the Inspector that you want to show the details of that field.

7

It works. thank you!