Tooltip and Template with Table

Is it possible to have a template with Table layout ?

I need to make a custom template with different type information. Tying for CustomHtml template,
but then when node is at the rightmost side, the tooltip is not visible completely (due to overflow)

So with following code - trying to set Tootip but gets compilation error.

   $(go.Panel, "Auto",
      $(go.Shape, { fill: "white" }),
      $(go.Panel, "Vertical",
        {
          margin: 3,
          defaultAlignment: go.Spot.Left,
          itemCategoryProperty: "type",  // this property controls the template used
          itemTemplateMap: itemtemplates  // map was defined above
        },
        new go.Binding("itemArray", "info"))
    )

I assume you are talking about “Table” Panels. Yes, of course a template can include one or more panels that are of type “Table”. That’s true for Node and Group templates as well as for elements in a Link template and for item templates.

Or are you asking a different question?

I taken the template code from another gojs sample and trying to set it for toolTip. With typescipt code getting compilation error -

And how can I help you if you won’t show me the code that resulted in those TypeScript errors?

Hi Walter,
Here is the sample -
There are two node templates, one with normal table - that works. Using this, there will be fix rows in table, so can’t use it.

Another one is with itemTemplate - which fails to compile.

import * as React from ‘react’;

import * as go from ‘gojs’;

import { Diagram, ToolManager } from ‘gojs’;

import { NodeModel } from ‘…/store/reducer/diagramReducer’;

import { UpdateNodeTextEvent } from ‘…/store/action/diagram’;

import { ReactDiagram } from ‘gojs-react’;

import { RadialLayout } from ‘./RadialLayout’;

require (’./MyDiagram.css’);

interface MyDiagramProps {

nodeDataArray: Array<NodeModel>;

linkDataArray: Array<go.ObjectData>;

onNodeSelection: (key: string, isSelected: boolean) => void;

onModelChange: (event: go.IncrementalData) => void;

onTextChange: (event: UpdateNodeTextEvent) => void;

}

class MyDiagram extends React.PureComponent {

private diagramRef: React.RefObject<ReactDiagram>;

constructor(props: MyDiagramProps) {

    super(props);

    this.diagramRef = React.createRef();

    this.initDiagram = this.initDiagram.bind(this);

    this.onTextEdited = this.onTextEdited.bind(this);

    this.nodeClicked = this.nodeClicked.bind(this);

}

render() {

    return (

          <ReactDiagram

            ref={this.diagramRef}

            divClassName="myDiagram"

            initDiagram={this.initDiagram}

            nodeDataArray={this.props.nodeDataArray}

            linkDataArray={this.props.linkDataArray}

            onModelChange={this.props.onModelChange}

            skipsDiagramUpdate={false}

        />

    );

}

private initDiagram(): Diagram {

    const $ = go.GraphObject.make;

    const myDiagram: Diagram =  $(go.Diagram, // must be the ID or reference to div

    {

      initialAutoScale: go.Diagram.Uniform,

      layout: $(RadialLayout, {

        maxLayers:1,

        layerThickness :400

        }),

      "animationManager.isEnabled": false,

      model: $(go.GraphLinksModel, {

        linkKeyProperty: 'key' 

      })

    });

    myDiagram.toolManager.panningTool.isEnabled = true;

    myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;

    var itemTemplateMap = new go.Map();

    itemTemplateMap.add("",

      $(go.Panel, "TableRow",

        $(go.TextBlock, new go.Binding("text", "name"),

          { column: 0, margin: 2, font: "bold 10pt sans-serif" }),

        $(go.TextBlock, new go.Binding("text", "description"),

          { column: 1, margin: 2 }),

        $(go.TextBlock, new go.Binding("text", "name"),

          { column: 2, margin: 2 })

      ));

                

   // define the Node template

   myDiagram.nodeTemplate =

    $(go.Node, "Spot",

      {

        locationSpot: go.Spot.Center,

        locationObjectName: "SHAPE",  // Node.location is the center of the Shape

        selectionAdorned: false,

        click: this.nodeClicked,

        toolTip:  // define a tooltip for each node that displays the color as text

        $("ToolTip",

            $(go.Panel, "Table",

            { stretch: go.GraphObject.Fill, margin: 0.5 },

      

            $(go.RowColumnDefinition,

              { column: 0, sizing: go.RowColumnDefinition.None, background: "white", coversSeparators: true }),

            $(go.RowColumnDefinition,

              { column: 1, minimum: 100, background: "white", separatorStroke: "black" }),

            $(go.RowColumnDefinition,

              { row: 0, sizing: go.RowColumnDefinition.None }),

            $(go.RowColumnDefinition,

              { row: 1, separatorStroke: "black" }),

      

            $(go.TextBlock,

              { row: 0, column: 0, margin: 6, text : "Name" }),

            $(go.TextBlock,

                { row: 1, column: 0, margin: 6, text : "Description" }),                  

            $(go.TextBlock,

              { row: 0, column: 1, stretch: go.GraphObject.Horizontal, margin: 2, textAlign: "center" },

              new go.Binding("text", "text")),

            $(go.TextBlock,

              { row: 1, column: 1, stretch: go.GraphObject.Fill, margin: 2, textAlign: "center" },

              new go.Binding("text", "description"))

          ),

        )  // end of Adornment            

      },

      $(go.Shape, "Rectangle",

        {

          name: "SHAPE",

          fill: "lightgreen",  // default value, but also data-bound

          stroke: "black",

          strokeWidth: 2,

          desiredSize: new go.Size(200, 30),

          portId: ""  // so links will go to the shape, not the whole node

        }),

      $(go.TextBlock,

        {

          name: "TEXTBLOCK",

        },

        new go.Binding("text"))

    );

   // this is the root node, at the center of the circular layers

   myDiagram.nodeTemplateMap.add("Root",

    $(go.Node, "Spot",

      {

        locationSpot: go.Spot.Center,

        locationObjectName: "SHAPE",  // Node.location is the center of the Shape

        selectionAdorned: false,

        click: this.nodeClicked,

        toolTip:  // define a tooltip for each node that displays the color as text

        $("ToolTip",

            $(go.Panel, "Table",

            new go.Binding("itemArray", "info"),

            {

              defaultAlignment: go.Spot.Left,

              defaultColumnSeparatorStroke: "black",

              itemTemplateMap: itemTemplateMap

            },

            $(go.RowColumnDefinition,

              { row: 0, background: "lightgray" }),

            $(go.RowColumnDefinition,

              { row: 1, separatorStroke: "black" })

          )

        )  // end of Adornment                

      },

      $(go.Shape, "Circle",

        {

          name: "SHAPE",

          fill: "#aa33dd",  // default value, but also data-bound

          stroke: "red",

          strokeWidth: 4,

          desiredSize: new go.Size(150, 150),

          portId: ""  // so links will go to the shape, not the whole node

        }),

      $(go.TextBlock,

        {

          name: "TEXTBLOCK",

        },

        new go.Binding("text"))

    ));

   // define the Link template

    myDiagram.linkTemplate =

    $(go.Link,       // the whole link panel

        $(go.Shape)  // the link shape, default black stroke

    );

    return myDiagram;

}

private nodeClicked(e : any, root:any) {

    var diagram = root.diagram;

    if (diagram === null) return;

    // all other nodes should be visible and use the default category

    diagram.nodes.each(function(n) {

      n.visible = true;

      if (n !== root) n.category = "";

    })

    // make this Node the root

    root.category = "Root";

    // tell the RadialLayout what the root node should be

    diagram.layout.root = root;

    if (diagram.layout.maxLayers == 0)

       diagram.layout.maxLayers = 1;

    //else if (diagram.layout.maxLayers == 1)

      // diagram.layout.maxLayers = diagram.layout.maxLayers + 1;        

    diagram.layoutDiagram(true);

  }    

private onTextEdited(e: go.DiagramEvent) {

    const tb = e.subject;

    if (tb === null) {

        return;

    }

    const node = tb.part;

    if (node instanceof go.Node && this.props.onTextChange) {

        this.props.onTextChange({ key: node.key as string, text: tb.text });

    }

}

}

export default MyDiagram;

Thanks for the code. Now it’s clear that the problem is that you haven’t adequately specified the type of the itemTemplateMap variable.

const itemTemplateMap = new go.Map<string, go.Panel>();
itemTemplateMap.add("", . . .)