Swapping Node Templates Based on External Elements

GoJS
1

I want to give viewers of my diagram the ability to toggle between a few different node views. The traditional approach, from what I can gather, is dependent upon data in the model (via TemplateMaps) - however the flag that I’m checking has nothing to do with my data model. It’s the result of a radiobutton state, and would be applied globally to all nodes in the diagram.

When my user select a radiobutton, I don’t know how to tell the diagram to refresh its “commonPanel”. I attempted to use the Layered Digraph Layout example, as a guide - but the myDiagram.layout option doesn’t seem to cause the node templates to refresh.

How can I tell my diagram to update or refresh its template definitions?

Thank you

  • Aaron

— Relevant code below. —

Oh - and I’m using jQuery, so I am using “G” for the assignment of “go.GraphObject.make”.

In my init() function:

function commonPanel() {
console.log($("input[name='inlineRadioOptions']:checked").val()) //isn't called ever after initial load
if($("input[name='inlineRadioOptions']:checked").val()!="Show Description"){
  return G(go.Panel, "Horizontal", commonIcon(), commonTextBlock())
} else {
  return G(go.Panel, "Vertical",
    G(go.Panel, "Horizontal", commonIcon(), commonTextBlock()),
    G(go.TextBlock,
      new go.Binding("text", "description"),
      {
        name: "NODE_DESCRIPTION",
        stroke: "#103010",
        margin: 2,
        font: "italic 12px Helvetica",
      }
    ))
}
}

var basicTemplate =
G(go.Group, "Auto", commonGroupStyle(),
  G(go.Shape, "RoundedRectangle", commonShapeStyle()),
  commonPanel()
);
2

Let’s say that all of your nodes use the same template at any given time. So you would define two templates – call them basic and detailed.

Then whenever the radio buttons change value, you set your diagram’s Diagram.nodeTemplate property to the appropriate template, either the value of basic or of detailed.

You might want to read GoJS Template Maps -- Northwoods Software

3

This is even better than what I was looking to do!

Thanks as always, Walter.