@brajeshrajput wrote:
Hi,
I am creating two group with fixed height and width but node inside group is not auto adjust with in group it is showing out of box, even it is having lots of space in group. I tried to set property stretch: go.GraphObject.Fill of Group , but it is not working. Following is the screen shot of the same:Following is the code :
function init() {
var = go.GraphObject.make; myDiagram = (go.Diagram, “myDiagramDiv”,
{
initialContentAlignment: go.Spot.TopCenter,
contentAlignment: go.Spot.TopCenter,
autoScale: go.Diagram.Uniform,
“undoManager.isEnabled”: true
});myDiagram.nodeTemplate = $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", new go.Binding("fill", "BackColor"), new go.Binding("stroke", "Stroke"), new go.Binding("figure", "Figure") ), $(go.TextBlock, new go.Binding("text", "Text"), new go.Binding("stroke", "ForeColor"), new go.Binding("font", "Font"), new go.Binding("margin", "Margin") ), $(go.Picture, new go.Binding("source", "Image") ) ); myDiagram.groupTemplate = $(go.Group, "Auto", { layout: $(go.TreeLayout, { angle: 90, arrangement: go.TreeLayout.ArrangementVertical, alignment: go.TreeLayout.AlignmentBus }), resizeObjectName: "BODY", alignment: go.Spot.TopCenter, isSubGraphExpanded: true, resizable: false, ungroupable: true, stretch: go.GraphObject.Fill, desiredSize: new go.Size(700, 700), avoidable: false } , $(go.Shape, { alignment: go.Spot.TopCenter }, new go.Binding("fill", "GroupBackColor"), new go.Binding("figure", "GroupFigure"), new go.Binding("stroke", "GroupStroke") ), $(go.Panel, "Table", { name: "BODY", alignment: go.Spot.TopCenter, padding: 10, stretch: go.GraphObject.Fill, }, $(go.TextBlock, { row: 0, stretch: go.GraphObject.Horizontal, textAlign: "center", editable: true, alignment:go.Spot.TopCenter }, new go.Binding("text", "GroupText"), new go.Binding("font", "GroupFont"), new go.Binding("margin", "GroupMargin"), new go.Binding("stroke", "GroupForeColor") ), $(go.Placeholder, { margin: go.Margin.parse("0 20 20 20"), alignment: go.Spot.TopCenter, row: 1, stretch: go.GraphObject.Fill, }, new go.Binding("row", "NodeRow") ) ) ); myDiagram.linkTemplate = $(go.Link, { routing: go.Link.AvoidsNodes }, $(go.Shape, new go.Binding("strokeWidth", "StrokeWidth"), new go.Binding("stroke", "LinkColor") ), $(go.Shape, { stroke: null }, new go.Binding("visible", "ToVisible"), new go.Binding("toArrow", "ToArrow"), new go.Binding("fill","ToArrowColor") ), $(go.Shape, { stroke: null }, new go.Binding("visible","FromVisible"), new go.Binding("fromArrow", "FromArrow"), new go.Binding("fill","FromArrowColor") ) ); load(); } function load() { myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value); // make sure all data have up-to-date "members" collections // this does not prevent any "cycles" of membership, which would result in undefined behavior var arr = myDiagram.model.nodeDataArray; for (var i = 0; i < arr.length; i++) { var data = arr[i]; var supers = data.supers; if (supers) { for (var j = 0; j < supers.length; j++) { var sdata = myDiagram.model.findNodeDataForKey(supers[j]); if (sdata) { // update _supers to be an Array of references to node data if (!data._supers) { data._supers = [sdata]; } else { data._supers.push(sdata); } // update _members to be an Array of references to node data if (!sdata._members) { sdata._members = [data]; } else { sdata._members.push(data); } } } } } }Model:
{ "class": "go.GraphLinksModel", "nodeDataArray": [ { "key": "FirstGroup", "Text": null, "isGroup": true, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "N/A", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": "#E3EFD9", "GroupForeColor": "#3A542D", "GroupStroke": "#748A63", "GroupText": "First Group Title", "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroup", "Text": null, "isGroup": true, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "N/A", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": "#CBFEFF", "GroupForeColor": "#3A542D", "GroupStroke": "#ABCBCC", "GroupText": "Second Group Title", "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "FirstGroupTools", "Text": null, "isGroup": false, "Image": "../images/deliveryTools.jpg", "BackColor": "#E3EFD9", "Stroke": "#E3EFD9", "group": "FirstGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "FirstGroupGatewayManager", "Text": "Gateway Manager", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "FirstGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "FirstGroupmyCORECategory ", "Text": "CORE Category ", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "FirstGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "FirstGroupAiOpsApps", "Text": "AiOps Apps", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "FirstGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "FirstGroupSystemsIntegration-Waterfall", "Text": "Systems Integration - Waterfall", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "FirstGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "FirstGroupSystemsIntegration-Agile", "Text": "Systems Integration - Agile", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "FirstGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupTools", "Text": null, "isGroup": false, "Image": "../images/deliveryTools.jpg", "BackColor": "#CBFEFF", "Stroke": "#CBFEFF", "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupGatewayManager", "Text": "Gateway Manager", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupmyCORECategory ", "Text": "CORE Category ", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupAiOpsApps", "Text": "AiOps Apps", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupApplicationManagement(AM/AO)", "Text": "Application Management (AM/AO)", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupDevOps", "Text": "DevOps", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupATRConnectors", "Text": "ATR Connectors", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupRPA|BOTS|AutomationScript", "Text": "RPA | BOTS | AutomationScript", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupTargetSystem", "Text": null, "isGroup": false, "Image": "../images/targetSystem.jpg", "BackColor": "#CBFEFF", "Stroke": "#CBFEFF", "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupSplunkForwarders", "Text": "Splunk Forwarders", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 }, { "key": "SecondGroupToolGateway", "Text": "Tool Gateway", "isGroup": false, "Image": null, "BackColor": "#6FAD4A", "Stroke": null, "group": "SecondGroup", "ForeColor": "White", "Figure": null, "Font": "bold 16pt Calibri", "Margin": 8, "GroupFigure": null, "GroupBackColor": null, "GroupForeColor": "#3A542D", "GroupStroke": null, "GroupText": null, "GroupFont": "bold 20pt Arial", "GroupMargin": 10, "GroupMaxSize": null, "GroupStrokeWidth": 2 } ], "linkDataArray": [ { "from": "FirstGroupTools", "to": "FirstGroupGatewayManager", "ToVisible": false, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "FirstGroupGatewayManager", "to": "FirstGroupmyCORECategory ", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "FirstGroupGatewayManager", "to": "FirstGroupmyCORECategory ", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "FirstGroupmyCORECategory ", "to": "FirstGroupAiOpsApps", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "FirstGroupmyCORECategory ", "to": "FirstGroupSystemsIntegration-Waterfall", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "FirstGroupmyCORECategory ", "to": "FirstGroupSystemsIntegration-Agile", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupTools", "to": "SecondGroupGatewayManager", "ToVisible": false, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupGatewayManager", "to": "SecondGroupmyCORECategory ", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupGatewayManager", "to": "SecondGroupmyCORECategory ", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupmyCORECategory ", "to": "SecondGroupAiOpsApps", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupmyCORECategory ", "to": "SecondGroupApplicationManagement(AM/AO)", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupmyCORECategory ", "to": "SecondGroupDevOps", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupTools", "to": "SecondGroupATRConnectors", "ToVisible": false, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupATRConnectors", "to": "SecondGroupmyCORECategory ", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupATRConnectors", "to": "SecondGroupRPA|BOTS|AutomationScript", "ToVisible": false, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupTools", "to": "SecondGroupRPA|BOTS|AutomationScript", "ToVisible": false, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupRPA|BOTS|AutomationScript", "to": "SecondGroupTargetSystem", "ToVisible": true, "FromVisible": false, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupAiOpsApps", "to": "SecondGroupSplunkForwarders", "ToVisible": false, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupSplunkForwarders", "to": "SecondGroupTargetSystem", "ToVisible": true, "FromVisible": false, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupATRConnectors", "to": "SecondGroupDevOps", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupTools", "to": "SecondGroupToolGateway", "ToVisible": false, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "SecondGroupToolGateway", "to": "SecondGroupGatewayManager", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" }, { "from": "FirstGroupGatewayManager", "to": "SecondGroupGatewayManager", "ToVisible": true, "FromVisible": true, "StrokeWidth": 1.5, "LinkColor": "gray", "ToArrow": "Triangle", "ToArrowColor": "gray", "FromArrow": "BackwardTriangle", "FromArrowColor": "gray" } ] }
Posts: 3
Participants: 2