UNPKG

gojs/intro/itemArrays.html

Version:
1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> GoJS Item Arrays-- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
  
  <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
    
  <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133<h1>Panel Item Arrays</h1>
134<p>
135How does one display a variable number of elements in a node by data binding to a JavaScript Array?
136The answer is simple: just bind (or set) <a>Panel.itemArray</a>.
137The <a>Panel</a> will contain as many elements as there are values in the bound Array.
138</p>
139<p>
140See samples that make use of item Arrays in the <a href="../samples/index.html#itemarrays">samples index</a>.
141</p>
142
143<h2 id="SimpleItemLists">Simple item lists</h2>
144<p>
145Here is a very simple example demonstrating the standard way of binding <a>Panel.itemArray</a> to a data property whose value is an Array.
146</p>
147<pre class="lang-js" id="simple"><code>
diagram.nodeTemplate =
  $(go.Node, "Vertical",
    new go.Binding("itemArray", "items"));
151
diagram.model =
  $(go.GraphLinksModel,
    {
      nodeDataArray: [
        { key: 1, items: [ "Alpha", "Beta", "Gamma", "Delta" ] },
        { key: 2, items: [ "first", "second", "third" ] }
      ],
      linkDataArray: [
        { from: 1, to: 2 }
      ]
    });
163</code></pre>
164<script>goCode("simple", 450, 200)</script>
165<p>
166Note that the <a>Panel.itemArray</a> property is almost always bound to some data property that always has an Array as its value.
167One does not use a literal or constructed Array as the initial value for the Panel.itemArray property in a template,
168unless you expect all parts copied from the template will always have exactly the same unchanging list of items.
169</p>
170<p>
171As with most data bindings, the name of the data property does not really matter.
172In this example, the property name is "items", but you can use whatever name seems appropriate to your app.
173You can also have more than one item array in a node or link.
174</p>
175
176<h2 id="ItemTemplates">Item templates</h2>
177<p>
178You can customize the elements created for each array item by specifying the <a>Panel.itemTemplate</a>.
179The template must be an instance of <a>Panel</a>.
180Each item in the bound Array will get a copy of this Panel that is added to the Panel with the <a>Panel.itemArray</a>.
181The <a>Panel.data</a> will be the item in the Array, so all of the normal data binding functionality is available to customize each item Panel.
182</p>
183<p>
184This use of templates and data binding is similar to the way <a>Node</a>s are created automatically in a <a>Diagram</a> based on an Array of node data in the model.
185The value of <a>Diagram.nodeTemplate</a> must always be a <a>Node</a> or a simple <a>Part</a>;
186the value of <a>Panel.itemTemplate</a> must always be a <a>Panel</a> and cannot be a <a>Part</a>.
187</p>
188<p>
189Note that each item in the <a>Panel.itemArray</a> can be any JavaScript value, including strings and numbers.
190This is different than the values held by the <a>Model.nodeDataArray</a>, which must all be JavaScript Objects.
191The item <a>Panel.data</a> value may be a string, as it is in this example;
192the <a>Part.data</a> value will always be an Object.
193</p>
194<p>
195Here is a simple customization of the <a>Panel.itemTemplate</a>, working with the same model as above.
196Note that the second argument to the <a>Binding</a> constructor in this case is the empty string,
197because strings (and numbers) do not have many useful properties.
198</p>
199<pre class="lang-js" id="vertical"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle",
      { fill: "#3AA7A3" }),
    $(go.Panel, "Vertical",
      new go.Binding("itemArray", "items"),
      {
        itemTemplate:
          $(go.Panel, "Auto",
            { margin: 2 },
            $(go.Shape, "RoundedRectangle",
              { fill: "#91E3E0" }),
            $(go.TextBlock, new go.Binding("text", ""),
              { margin: 2 })
          )  // end of itemTemplate
      })
  );
217
diagram.model =
  $(go.GraphLinksModel,
    {
      nodeDataArray: [
        { key: 1, items: [ "Alpha", "Beta", "Gamma", "Delta" ] },
        { key: 2, items: [ "first", "second", "third" ] }
      ],
      linkDataArray: [
        { from: 1, to: 2 }
      ]
    }
  );
230
231</code></pre>
232<script>goCode("vertical", 450, 200)</script>
233<p>
234However even when binding to strings or numbers one could make the use of converters to get the desired binding values.
235</p>
236
237<p>
238Of course if the array items are Objects, you can refer to their properties just as you can in a <a>Diagram.nodeTemplate</a>.
239As with node data, you can have as many properties on your item data as your app demands, using whatever property names you prefer.
240Use data binding to automatically use those property values to customize the appearance and behavior of your item Panels.
241</p>
242<pre class="lang-js" id="verticalobjects"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle",
      { fill: "#3AA7A3" }),
    $(go.Panel, "Vertical",
      new go.Binding("itemArray", "items"),
      {
        itemTemplate:
          $(go.Panel, "Auto",
            { margin: 2 },
            $(go.Shape, "RoundedRectangle",
              { fill: "#91E3E0" },
              new go.Binding("fill", "c")),
            $(go.TextBlock, new go.Binding("text", "t"),
              { margin: 2 })
          )
      })
  );
261
diagram.model =
  $(go.GraphLinksModel,
    {
      nodeDataArray: [
        {
          key: 1,
          items: [
            { t: "Alpha", c: "orange" },
            { t: "Beta" },
            { t: "Gamma", c: "green" },
            { t: "Delta", c: "yellow" }
          ]
        },
        {
          key: 2,
          items: [
            { t: "first", c: "red" },
            { t: "second", c: "cyan" },
            { t: "third" }
          ]
        }
      ],
      linkDataArray: [
        { from: 1, to: 2 }
      ]
    }
  );
289
290</code></pre>
291<script>goCode("verticalobjects", 450, 200)</script>
292
293<h2 id="DifferentPanelTypes">Different Panel types</h2>
294<p>
295Although <a>Panel</a>s that have an item array are often of type <a>Panel,Vertical</a>,
296you can use other panel types that support a variable number of elements.
297The most common types are <a>Panel,Vertical</a>, <a>Panel,Horizontal</a>, <a>Panel,Table</a>, and <a>Panel,Position</a>.
298It does not make sense to use a <a>Panel,Viewbox</a> panel, because that panel type only supports a single element.
299</p>
300<p>
301If the panel type is <a>Panel,Spot</a>, <a>Panel,Auto</a>, or <a>Panel,Link</a>,
302the first child element of the Panel is assumed to be the "main" object and is kept as the first child
303in addition to all of the nested panels created for the values in the <a>Panel.itemArray</a>.
304</p>
305<p>
306Here is an example of a horizontal Panel:
307</p>
308<pre class="lang-js" id="horizontal"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle",
      { fill: "gold" }),
    $(go.Panel, "Horizontal",
      { margin: 4 },
      new go.Binding("itemArray", "a"),
      {
        itemTemplate:
          $(go.Panel, "Auto",
            { margin: 2 },
            $(go.Shape, "RoundedRectangle",
              { fill: "white" }),
            $(go.TextBlock, new go.Binding("text", ""),
              { margin: 2 })
          )  // end of itemTemplate
      })
  );
327
diagram.model =
  $(go.GraphLinksModel,
    {
      nodeDataArray: [
        { key: "n1", a: [ 23, 17, 45, 21 ] },
        { key: "n2", a: [ 1, 2, 3, 4, 5 ] }
      ],
      linkDataArray: [
        { from: "n1", to: "n2" }
      ]
    }
  );
340
341</code></pre>
342<script>goCode("horizontal", 450, 200)</script>
343
344<p>
345When using a <a>Panel</a> of type <a>Panel,Table</a> as the container, it is commonplace
346to use an item template that is of type <a>Panel,TableRow</a> or <a>Panel,TableColumn</a>.
347This is the only way to specify the individual column or row indexes for the elements inside the template.
348</p>
349<pre class="lang-js" id="table"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "lightgray" }),
    $(go.Panel, "Table",
      new go.Binding("itemArray", "people"),
      { margin: 4,
        defaultAlignment: go.Spot.Left,
        itemTemplate:
          $(go.Panel, "TableRow",
            new go.Binding("background", "back"),
            $(go.TextBlock, new go.Binding("text", "name"),
              { column: 0, margin: 2, font: "bold 10pt sans-serif" }),
            $(go.TextBlock, new go.Binding("text", "phone"),
              { column: 1, margin: 2 }),
            $(go.TextBlock, new go.Binding("text", "loc"),
              { column: 2, margin: 2 })
          )  // end of itemTemplate
      })
  );
369
diagram.model =
  $(go.GraphLinksModel,
    {
      nodeDataArray: [
        { key: "group1",
          people: [
            { name: "Alice", phone: "2345", loc: "C4-E18" },
            { name: "Bob", phone: "9876", loc: "E1-B34", back: "red" },
            { name: "Carol", phone: "1111", loc: "C4-E23" },
            { name: "Ted", phone: "2222", loc: "C4-E197" }
          ] },
        { key: "group2",
          people: [
            { name: "Robert", phone: "5656", loc: "B1-A27" },
            { name: "Natalie", phone: "5698", loc: "B1-B6" }
          ] }
      ],
      linkDataArray: [
        { from: "group1", to: "group2" }
      ]
    }
  );
392
393</code></pre>
394<script>goCode("table", 450, 200)</script>
395<p>
396Note in this case the item template has a data binding of the TableRow Panel's <a>Panel.background</a> property
397to the item data's "back" property.
398</p>
399
400<p>
401Sometimes one wants to get the row for a particular item, or one wants to have a property value depend on the row index.
402You can always depend on the value of <a>Panel.itemIndex</a> to get that property.
403If the item Panel is of type <a>Panel,TableRow</a>, the item Panel's <a>GraphObject.row</a> property will also be set to the zero-based row number,
404so you can access it in code by finding that Panel.
405The same is true for <a>GraphObject.column</a> if the itemTemplate is a <a>Panel,TableColumn</a> Panel.
406</p>
407<p>
408Because that property is set when the item panels are created for Array item data, you can create <a>Binding</a>s where the source
409is that "row" property: <code>new go.Binding("targetProperty", "row", function(i) { return ...; }).ofObject()</code>.
410The following example demonstrates binding the Panel.background property to be light green if the row is even.
411</p>
412<pre class="lang-js" id="alternating"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Table",
      new go.Binding("itemArray", "people"),
      {
        defaultAlignment: go.Spot.Left,
        itemTemplate:
          $(go.Panel, "TableRow",
            new go.Binding("background", "row",
                           function(i) { return i%2 === 0 ? "lightgreen" : "transparent" })
                .ofObject(),
            $(go.TextBlock, new go.Binding("text", "name"),
              { column: 0, margin: 2, font: "bold 10pt sans-serif" }),
            $(go.TextBlock, new go.Binding("text", "phone"),
              { column: 1, margin: 2 }),
            $(go.TextBlock, new go.Binding("text", "loc"),
              { column: 2, margin: 2 }),
            $("Button",
              {
                column: 3,
                margin: new go.Margin(0, 1, 0, 0),
                click: function(e, obj) {
                  // OBJ is this Button Panel;
                  // find the TableRow Panel containing it
                  var itempanel = obj.panel;
                  alert("Clicked on row " + itempanel.row + " for " + itempanel.data.name);
                }
              },
              $(go.Shape, "FivePointedStar",
                { desiredSize: new go.Size(8, 8) })
            )
          )  // end of itemTemplate
      })
  );
448
diagram.model =
  $(go.GraphLinksModel,
    {
      nodeDataArray: [
        { key: "group1",
          people: [
            { name: "Alice", phone: "2345", loc: "C4-E18" },
            { name: "Bob", phone: "9876", loc: "E1-B34" },
            { name: "Carol", phone: "1111", loc: "C4-E23" },
            { name: "Ted", phone: "2222", loc: "C4-E197" },
            { name: "Robert", phone: "5656", loc: "B1-A27" },
            { name: "Natalie", phone: "5698", loc: "B1-B6" }
          ] }
      ]
    }
  );
465
466</code></pre>
467<script>goCode("alternating", 450, 200)</script>
468<p>
469The "Button" Panel in the item template also demonstrates how one can get the particular row index
470as well as the data to which the item panel is bound.
471</p>
472
473<p>
474The natural way to have a distinct header for a Table Panel is to have the first row (i.e. the first item)
475hold the data for the header, but have it be styled differently.
476If you want such a behavior, you will want to use multiple templates -- see the example in <a href="templateMaps.html">Template Maps</a>.
477</p>
478<p>
479If instead you want to have a table header that is "fixed" and not dependent on item Array data,
480you can have a single "TableRow" (or "TableColumn") Panel in the "Table" Panel that is kept if <a>Panel.isPanelMain</a> is true.
481</p>
482<pre class="lang-js" id="header"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Table",
      new go.Binding("itemArray", "people"),
      {
        defaultAlignment: go.Spot.Left,
        defaultColumnSeparatorStroke: "black",
        itemTemplate:  // the row created for each item in the itemArray
          $(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", "phone"),
              { column: 1, margin: 2 }),
            $(go.TextBlock, new go.Binding("text", "loc"),
              { column: 2, margin: 2 })
          )
      },
      // define the header as a literal row in the table,
      // not bound to any item, but bound to Node data
      $(go.Panel, "TableRow",
        { isPanelMain: true },  // needed to keep this element when itemArray gets an Array
        $(go.TextBlock, "Person",
          { column: 0, margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" }),
        $(go.TextBlock, "Phone",
          { column: 1, margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" }),
        $(go.TextBlock, "Location",
          { column: 2, margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" })
      ),
      $(go.RowColumnDefinition,
        { row: 0, background: "lightgray" }),
      $(go.RowColumnDefinition,
        { row: 1, separatorStroke: "black" })
    )
  );
518
diagram.model =
  $(go.GraphLinksModel,
    {
      nodeDataArray: [
        { key: "group1",
          people: [
            { name: "Alice", phone: "2345", loc: "C4-E18" },
            { name: "Bob", phone: "9876", loc: "E1-B34" },
            { name: "Carol", phone: "1111", loc: "C4-E23" },
            { name: "Ted", phone: "2222", loc: "C4-E197" },
            { name: "Robert", phone: "5656", loc: "B1-A27" },
            { name: "Natalie", phone: "5698", loc: "B1-B6" }
          ] }
      ]
    }
  );
535
536</code></pre>
537<script>goCode("header", 450, 200)</script>
538<p>
539In such cases the constant header element, the literal "TableRow" Panel in the node template,
540will have a <a>GraphObject.row</a> == 0 and a <a>Panel.itemIndex</a> that is NaN.
541The "TableRow" Panel corresponding to the first item data, <code>panel.itemArray[0]</code>,
542will have a <a>GraphObject.row</a> == 1, matching its position in the list of <a>Panel.elements</a>.
543But it will have a <a>Panel.itemIndex</a> == 0, matching its position in the itemArray.
544</p>
545
546<h2 id="ArraysInModels">Arrays in Models</h2>
547<p>
548When a data-bound Part is copied, the Part's <a>Part.data</a>, which must be a JavaScript Object, is copied too.
549The normal copying method, <a>Model.copyNodeData</a>, makes a shallow copy of the original data object.
550</p>
551<p>
552However that is probably not the desired behavior for Arrays.
553When you use item Arrays, you normally do <em>not</em> want to share those Arrays between copies of the Node.
554If your node data is not copied correctly, unexpected behavior may occur.
555So when you are using item Arrays and permit users to copy nodes, you will need to make sure such Arrays and their objects are copied.
556For the simplest cases, it may be sufficient to set <a>Model.copiesArrays</a> and <a>Model.copiesArrayObjects</a> to true.
557More generally you may want to implement your own node data copier function
558and assign it to <a>Model.copyNodeDataFunction</a>.
559</p>
560<p>
561This is demonstrated by the <a href="../samples/dynamicPorts.html">Dynamic Ports</a> sample,
562which not only needs to copy the four item Arrays that each node data holds,
563but also each Object that is in each of those Arrays.
564In that sample the <a>Model.copiesArrays</a> and <a>Model.copiesArrayObjects</a> properties
565are set to true in the JSON-formatted representation of the model that is loaded into the diagram.
566</p>
567<p>
568For <a>GraphLinksModel</a>s, there is also a similar members for link data:
569the <a>GraphLinksModel.copyLinkData</a> method and <a>GraphLinksModel.copyLinkDataFunction</a> property.
570</p>
571<p>
572If you need to dynamically modify the value of a property of an item data, call <a>Model.setDataProperty</a>,
573just as you would for node data or link data.
574</p>
575<p>
576If you need to add or remove items from an item Array, call the <a>Model.insertArrayItem</a> or <a>Model.removeArrayItem</a> methods.
577</p>
578
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
589
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/sales/index.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
              </li>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
652
            </ul>
          </li>
        </ul>
656
657
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
663</footer>  </body>
664
665<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
666<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
677
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
687</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
690<script src="../extensions/Figures.js"></script>  <script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
703</html>