markgojs

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GoJS® Panel Class</title> <script src="../../assets/js/jquery.min.js"></script> <script src="../../assets/js/bootstrap.min.js"></script> <script src="../../assets/js/highlight.js"></script> <script src="../../assets/js/api.js"></script> <script src="../../assets/js/fuse.min.js"></script> <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >  <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/> <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>  <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" /> </head> <body>  <nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top"> <div class="container-fluid"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#navbar"> <a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="../../index.html">Home</a></li> <li><a href="../../learn/index.html">Learn</a></li> <li><a href="../../samples/index.html">Samples</a></li> <li><a href="../../intro/index.html">Intro</a></li> <li><a href="../../api/index.html">API</a></li> <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li> <li><a href="../../download.html">Download</a></li> <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li> <li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li> <li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li> <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li> </ul> </div> </div> </nav> <div class="container-fluid">  <div id="navindex" class="col-md-2">   <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Diagram Classes</span> </div> </div> <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li> <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li> <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li> <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li> <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li> <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li> <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li> <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li> <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li> <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li> <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li> <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li> <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li> <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li> <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li> <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li> <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li> <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li> <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li> <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Geometry Classes</span> </div> </div> <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li> <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li> <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li> <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li> <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li> <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li> <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li> <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li> <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Model Classes</span> </div> </div> <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li> <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li> <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li> <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li> <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li> <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li> <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Layout Classes</span> </div> </div> <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li> <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li> <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li> <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li> <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li> <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li> <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Tool Classes</span> </div> </div> <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li> <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li> <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li> <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li> <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li> <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li> <li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li> <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li> <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li> <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li> <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li> <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li> <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li> <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li> <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li> <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li> <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Collection Classes</span> </div> </div> <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li> <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li> <li><a href="../symbols/List.html" class="linkConstructor">List</a></li> <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li> <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li> </ul> </div> </div> </div>   </div> <div id="contentBody" class="col-md-10"> <div class="searchsumm"> <div class="table-wrap"> <div class="table-cell" id="apisearch" data-base="../"> <div class="title">Search API</div> <div class="field"> <label for="search-field" class="search-icon"></label> <input id="search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> </div> <div class="table-cell" id="apisumm"> <input type="checkbox" id="showsumms" /> <label class="apisumms" for="showsumms">Show Summaries</label> </div> </div> </div>  <div id="header" class="fineprint"> <b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div>  <h2 class="classTitle"> Class Panel </h2>  <p class="classsummary"> <span class="extends"> Extends <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.</span> A Panel is a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that holds other GraphObjects as its elements. A Panel is responsible for sizing and positioning its elements. The elements of a panel are drawn in the order in which they appear in the <a href="../symbols/Panel.html#elements" class="linkProperty">elements</a> collection. <p> The <a href="../symbols/Part.html" class="linkConstructor">Part</a> class inherits from Panel; Part in turn is the base class of <a href="../symbols/Node.html" class="linkConstructor">Node</a> and <a href="../symbols/Link.html" class="linkConstructor">Link</a>. <p> Every Panel has a <a href="../symbols/Panel.html#type" class="linkProperty">type</a> and establishes its own coordinate system. The type of a Panel determines how it will size and arrange its elements: <ul> <li><a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a> is used to arrange elements based on their absolute positions within the Panel's local coordinate system.</li> <li><a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> are used to create linear "stacks" of elements.</li> <li><a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> is used to size the main element to fit around other elements in the Panel.</li> <li><a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> is used to arrange elements based on the <a href="../symbols/Spot.html" class="linkConstructor">Spot</a> properties <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> and <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a>, relative to a main element of the panel. Spot panels can align relative to other elements by using <a href="../symbols/Panel.html#alignmentFocusName" class="linkProperty">Panel.alignmentFocusName</a>.</li> <li><a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> is used to arrange elements into rows and columns, typically employing the different elements' <a href="../symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a>, <a href="../symbols/GraphObject.html#rowSpan" class="linkProperty">GraphObject.rowSpan</a>, <a href="../symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>, and <a href="../symbols/GraphObject.html#columnSpan" class="linkProperty">GraphObject.columnSpan</a> properties. This Panel type also makes use of <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>.</li> <li><a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> can only be used immediately within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel to organize a collection of elements as a row or as a column in a table.</li> <li><a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> is used to automatically resize a single element to fit inside the panel's available area.</li> <li><a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> is not used to house typical elements, but is used only to draw regular patterns of lines. The elements must be <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>s used to describe the repeating lines.</li> <li><a href="../symbols/Panel.html#Link" class="linkConstant">Panel.Link</a> is only used by <a href="../symbols/Link.html" class="linkConstructor">Link</a> parts and Link Adornments.</li> <li><a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> is used to draw regular tick marks and text along the main <a href="../symbols/Shape.html" class="linkConstructor">Shape</a> element.</li> </ul> Using <a href="../../intro/buildingObjects.html">GraphObject.make</a>, the second argument can be used to declare the Panel type: <pre>// Either: $(go.Panel, go.Panel.Horizontal, ... // Or: $(go.Panel, "Horizontal", ... // Full example: $(go.Panel, "Horizontal", { width: 60, height: 60 }, // panel properties // elements in the panel: $(go.Shape, "Rectangle", { stroke: "lime" }), $(go.TextBlock, "Some Text") ) // end of panel definition </pre> <p class="boxread"> For an overview of most Panel types, please read the <a href="../../intro/panels.html">Introduction page on Panels</a>. <p> <a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> panels are frequently used to position two or more GraphObjects vertically above each other or horizontally next to each other. Use the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> or <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties on the individual elements to control their position and size. Set <a href="../symbols/Panel.html#isOpposite" class="linkProperty">isOpposite</a> to true if you want the elements arranged from right-to-left in Horizontal Panels or from bottom-to-top in Vertical Panels. <p> <a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> and <a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> panels have a "main" element, signified by the Panel's first element with <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true. If there is no such element, it uses the first element as the "main" one. Use the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> property to position elements with respect to the main element. Use the <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a> property to further specify the position within Spot Panels. "Spot" and "Auto" Panels should have two or more elements in them. <p> In <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panels you will want to set the <a href="../symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a> and <a href="../symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a> properties on each element. The <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> and <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties are also useful when an element's table cell is larger than that element. <p class="boxrun">Please read the <a href="../../intro/tablePanels.html">Introduction page on Table Panels</a> for more examples and explanation. <p> <a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> panels can only be used as elements within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel. They are typically only used in item templates, e.g. for automatically creating rows in a Table Panel based on model data provided in an <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>. You will still need to specify properties on the individual elements within a TableRow or TableColumn as if they were immediate elements of the containing Table panel. <p class="boxrun">For an example that uses TableRow Panels, see <a href="../../samples/records.html">Records sample</a>. <p> <a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> panels are often used for the Diagram's <a href="../symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>. <pre>$(go.Diagram, "myDiagramDiv", { . . . grid: $(go.Panel, "Grid", { gridCellSize: new go.Size(40, 40) }, $(go.Shape, "LineH", { stroke: "lightgray" }), $(go.Shape, "LineV", { stroke: "lightgray" }) ), . . . });</pre> Or to get a green bar effect: <pre>$(go.Diagram, "myDiagramDiv", { . . . grid: $(go.Panel, "Grid", { gridCellSize: new go.Size(100, 100) }, $(go.Shape, "BarH", { fill: "lightgreen", height: 50 }) ), . . . });</pre> But Grid Panels can also be stand alone objects: <pre>$(go.Node, go.Panel.Grid, { gridCellSize: new go.Size(6, 6), width: 60, height: 60 }, $(go.Shape, "LineH", { stroke: "gray" }), $(go.Shape, "LineV", { stroke: "gray" }))</pre> <p> A Grid Panel's elements do not participate in object picking. <p class="boxrun">Please read the <a href="../../intro/grids.html">Introduction page on Grid Patterns</a> for more examples and explanation. <p> <a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> panels, like Spot and Auto Panels have a "main" element. The other elements within a Graduated Panel are used to define ticks and labels to draw along the main shape's path. <pre>$(go.Part, "Graduated", $(go.Shape, { geometryString: "M0 0 H400" }), $(go.Shape, { geometryString: "M0 0 V10" }), // offset to display below ticks $(go.TextBlock, { segmentOffset: new go.Point(0, 12) }) );</pre> <p> Only the main shape of a Graduated Panel participates in object picking, but a <code>background</code> can be set if the entire panel needs to be pickable. You cannot set or bind the <a>Panel.itemArray</a> of a Graduated Panel. Events on the tick Shapes and TextBlock labels of a Graduated Panel will be ignored. Graduated Panel TextBlock labels cannot be edited. <p> Rotating the main shape will not rotate the ticks, just as rotating a Spot Panel's main element won't rotate its children. Rotation should generally be done at the Panel level. Another similarity to Spot Panels is that resizing of a Graduated Panel should generally be done on the main shape. <p class="boxrun">Please read the <a href="../../intro/graduatedPanels.html">Introduction page on Graduated Panels</a> for more examples and explanation. <h3>Changing and accessing elements of a Panel</h3> <p> You can change the collection of <a href="../symbols/Panel.html#elements" class="linkProperty">elements</a> by calling <a href="../symbols/Panel.html#add" class="linkMethod">add</a>, <a href="../symbols/Panel.html#insertAt" class="linkMethod">insertAt</a>, <a href="../symbols/Panel.html#remove" class="linkMethod">remove</a>, or <a href="../symbols/Panel.html#removeAt" class="linkMethod">removeAt</a>. You can get direct access to a particular element by calling <a href="../symbols/Panel.html#elt" class="linkMethod">elt</a>. <p> You can search the visual tree of a Panel for GraphObjects that given a <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> using <a href="../symbols/Panel.html#findObject" class="linkMethod">findObject</a>. <h3>Panel Size and Appearance</h3> <p> Panels typically compute their own size based on their elements and Panel <a href="../symbols/Panel.html#type" class="linkProperty">type</a>, but can also be sized by setting <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a>, <a href="../symbols/GraphObject.html#minSize" class="linkProperty">GraphObject.minSize</a>, and <a href="../symbols/GraphObject.html#maxSize" class="linkProperty">GraphObject.maxSize</a>. Setting an explicit size on a Panel may cause nested elements of that panel to size themselves differently, especially in the cases of nested elements having a <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> value or <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a>'s having word wrap. <p> Panels have no visual components of their own unless a <a href="../symbols/GraphObject.html#background" class="linkProperty">GraphObject.background</a> or <a href="../symbols/GraphObject.html#areaBackground" class="linkProperty">GraphObject.areaBackground</a> is specified or separators are specified either as defaults for the whole Table Panel or on individual <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>s. <p> In addition to the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties on elements that are only used by certain types of panels, several Panel properties only apply to specific Panel types. <ul> <li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> use the <a href="../symbols/Panel.html#rowCount" class="linkProperty">rowCount</a>, <a href="../symbols/Panel.html#rowSizing" class="linkProperty">rowSizing</a>, <a href="../symbols/Panel.html#columnCount" class="linkProperty">columnCount</a>, <a href="../symbols/Panel.html#columnSizing" class="linkProperty">columnSizing</a>, <a href="../symbols/Panel.html#leftIndex" class="linkProperty">leftIndex</a>, <a href="../symbols/Panel.html#topIndex" class="linkProperty">topIndex</a>, and all of the "default" separator properties.</li> <li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> do not act like regular GraphObjects, instead they are only to be used immediately within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>. They are pass-through containers that hold elements for their parent table, and ignore their own scale and angle.</li> <li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> use the <a href="../symbols/Panel.html#gridCellSize" class="linkProperty">gridCellSize</a> and <a href="../symbols/Panel.html#gridOrigin" class="linkProperty">gridOrigin</a> properties.</li> <li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> use the <a href="../symbols/Panel.html#viewboxStretch" class="linkProperty">viewboxStretch</a> property.</li> <li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> use the <a href="../symbols/Panel.html#graduatedMin" class="linkProperty">graduatedMin</a>, <a href="../symbols/Panel.html#graduatedMax" class="linkProperty">graduatedMax</a>, <a href="../symbols/Panel.html#graduatedTickUnit" class="linkProperty">graduatedTickUnit</a>, and <a href="../symbols/Panel.html#graduatedTickBase" class="linkProperty">graduatedTickBase</a> properties. </ul> <p class="boxread"> For live examples of all Panel types, see the <a href="../../intro/panels.html">Introduction page on Panels.</a> <h3>Data Binding</h3> <p> Panels also provide fundamental support for data binding. When a diagram gets a new model or when a diagram's model is augmented with additional data, the diagram automatically creates a new Node or Link whose <a href="../symbols/Panel.html#data" class="linkProperty">data</a> property refers to the corresponding node data or link data object. <p class="boxread"> For more discussion of data binding, please read the <a href="../../intro/usingModels.html">Introduction page on Models</a> and <a href="../../intro/dataBinding.html">Data Binding</a>. <p> Panels provide support for automatically creating elements within the Panel based on items in a JavaScript Array. This is achieved by setting or binding the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property, which acts in a manner similar to the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> property. You can supply an <a href="../symbols/Panel.html#itemTemplate" class="linkProperty">itemTemplate</a>, which must itself be a simple Panel, which is copied to create the element in this container Panel corresponding to an item in the itemArray. This property is analogous to the <a href="../symbols/Diagram.html#nodeTemplate" class="linkProperty">Diagram.nodeTemplate</a> property, although for the diagram the template must be a <a href="../symbols/Node.html" class="linkConstructor">Node</a>, <a href="../symbols/Group.html" class="linkConstructor">Group</a>, or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>. <p> Much like the <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>, Panel's <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a> supports having multiple templates, so that the actual structure of the element created for a data item can be chosen dynamically. Just as the <a href="../symbols/Model.html#nodeCategoryProperty" class="linkProperty">Model.nodeCategoryProperty</a> determines which template in the <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a> is copied to create a <a href="../symbols/Node.html" class="linkConstructor">Node</a>, the <a href="../symbols/Panel.html#itemCategoryProperty" class="linkProperty">itemCategoryProperty</a> names the data property whose value chooses the Panel in the itemTemplateMap to copy for the item. <p> When binding the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property, it is commonplace to set <a href="../symbols/Model.html#copiesArrays" class="linkProperty">Model.copiesArrays</a> and <a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">Model.copiesArrayObjects</a> properties to true, so that when a node is copied, the item Array and its contents are copied, not shared. Or more generally, to customize the model's copying processes, you can supply a custom <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">Model.copyNodeDataFunction</a>. <p class="boxread"> For more discussion and examples of item arrays, please read the <a href="../../intro/itemArrays.html">Introduction page on Item Arrays</a>. </p>  <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Panel."> <thead> <tr> <th scope="col" class="name">Name</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr> <td class="name" > <div class="name"> Panel(type) </div> </td> <td class="description"> <div class="description"> <p><p>Constructs an empty Panel of the given <a href="../symbols/Panel.html#type" class="linkProperty">type</a>.<span class="nodetails" id="xconPanel"><a class="morelink" onclick="hst('conPanel')">More...</a></span> <span class="details" id="conPanel"> Default type is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>. The panel type must be one of the enumerated values defined on the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> class, including: <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>, <a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a>, <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a>, <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>, <a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a>, <a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a>, or <a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a>.</span> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{EnumValue=}</span> <b>type</b> </dt> <dd>If not supplied, the default Panel type is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.</dd> </dl> </div> </td> </tr> </tbody> </table> </div>  <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Panel."> <thead> <tr> <th scope="col" class="name">Name, Value Type</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr id="alignmentFocusName" > <td class="name"> <div class="name"> alignmentFocusName </div> <div class="attributes"> <span class="light">{string}</span> <span class="since" title="since">1.7</span> </div> </td> <td class="description"> <div class="description">  <p>For Panels which are elements of Spot Panels, this gets or sets the name of this Panel's element that should be used as the alignment object instead of this Panel.<span class="nodetails" id="xpropalignmentFocusName"><a class="morelink" onclick="hst('propalignmentFocusName')">More...</a></span> <span class="details" id="propalignmentFocusName"> </span><div class="details" id="dpropalignmentFocusName"><p> This allows Spot Panels to align objects that are nested in the element tree of its own elements.</div> </div> </td> </tr> <tr id="columnCount" > <td class="name"> <div class="name"> columnCount </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>This read-only property returns the number of columns in this Panel if it is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xpropcolumnCount"><a class="morelink" onclick="hst('propcolumnCount')">More...</a></span> <span class="details" id="propcolumnCount"> This value is only valid after the Panel has been measured.</span> </div> </td> </tr> <tr id="columnSizing" > <td class="name"> <div class="name"> columnSizing </div> <div class="attributes"> <span class="light">{EnumValue}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets how this Panel's columns deal with extra space if the Panel is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xpropcolumnSizing"><a class="morelink" onclick="hst('propcolumnSizing')">More...</a></span> <span class="details" id="propcolumnSizing"> Valid values are <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a> and <a href="../symbols/RowColumnDefinition.html#None" class="linkConstant">RowColumnDefinition.None</a>. The default is <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a>.</span> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/RowColumnDefinition.html#sizing" class="linkProperty">RowColumnDefinition.sizing</a></li> <li><a href="../symbols/Panel.html#rowSizing" class="linkProperty">rowSizing</a></li> </ul> </div> </div> </td> </tr> <tr id="data" > <td class="name"> <div class="name"> data </div> <div class="attributes"> <span class="light">{Object}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the optional model data to which this panel is data-bound.<span class="nodetails" id="xpropdata"><a class="morelink" onclick="hst('propdata')">More...</a></span> <span class="details" id="propdata"> The data must be a JavaScript Object if this is