Unable to bind textblock data into panel

GoJS
1

1.I want to bind textblock with below panel using createHyperlinkText method

image
image766×216 14 KB

  1. textblock present in below method
    image
    image1089×707 63.4 KB

note : for hyperlink I have use this way to bind textblock in panel.

2

Panel.elements is a read-only property, so it does not make sense to try to set that property as the target of a Binding.

Instead have the Binding target the Panel.itemArray property and set Panel.itemTemplate to a Panel holding a TextBlock that has Bindings on the Panel or on the TextBlock so that you get the appearances that you want. Item Arrays | GoJS

The Binding of the Panel.itemArray property can use a converter so that it gets the desired Array that you compute.

3

Here’s a complete stand-alone example that renders a diamond which is the hyperlink. In this example the first node’s text includes the string “called”, which is replaced by a Shape that is a hyperlink. The second node doesn’t have that “called” string in the text, so it just displays the text.

image
image825×84 10.5 KB

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv", { initialScale: 2 });

// the Panel.itemTemplateMap
const ITM = new go.Map();
ITM.set("",  // default case: just a string
  new go.Panel()
    .add(
      new go.TextBlock().bind("text", "")
    ));
ITM.set("LINK",  // a hyperlink
  new go.Panel()
    .add(
      new go.Shape("Diamond", {
          width: 12, height: 12,
          fill: "cyan", stroke: "gold",
          cursor: "pointer",
          click: (e, pnl) => window.open(pnl.part.data.hyperlink, "_blank")
        })
    ));

myDiagram.nodeTemplate =
  new go.Node("Auto")
    .add(
      new go.Shape("RoundedRectangle", { fill: null, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight }),
      new go.Panel("Horizontal", { margin: new go.Margin(4, 4, 2, 4), itemTemplateMap: ITM })
        .bind("itemArray", "text", t => {
          const s = t.split("called");
          const a = [];
          for (let i = 0; i < s.length; i++) {
            if (i > 0) a.push({ category: "LINK" });
            a.push(s[i]);
          }
          return a;
        })
    );

myDiagram.model = new go.GraphLinksModel([
  { text: "a fish called Wanda", hyperlink: "https://example.com/Wanda" },
  { text: "no link embedded here" }
]);
  </script>
</body>
</html>