The Image pictures not aligning

Hi Walter

  1. How wrap the text in the table i use below it is not wraping
    $(go.TextBlock, textStyle(), // the name
    {
    row: 2,
    column: 3,
    columnSpan: 2,
    font: “8pt Segoe UI,sans-serif”,
    //stroke :"#a3fff1",
    editable: false,
    isMultiline: true,
    minSize: new go.Size(10, 16)
    }, new go.Binding(“text”, “personName”).makeTwoWay()

  2. if you see the text in the second box i use row 2 column 3 still appearing in top(not on row 2) .
    In the second box case the images are not displaying.(with out images also the text should be displayed in the row 2.

https://gojs.net/latest/intro/textblocks.html#Wrapping

So you need to limit the width of the TextBlock or of the Table column that it is in.

Hi Walter

Waiting for reply for second question above

did you see the second box text is algined top. the code is below. In the second box case i am not displaying images like (up arrow and IRS).

$(go.TextBlock, textStyle(), // the name
{
row: 1,
column: 3,
columnSpan: 2,
margin: 2,
width: 150,

Adding to that is there any way i can add borders to the table. or i can leave margins. see Attached the top and bottom images are cut it.

I didn’t see a second question. If you want us to help, you need to state what you are doing concisely but thoroughly. Otherwise we can only guess.

Borders are implemented by “Auto” Panels, where the main (probably first) element is a Shape.

“Auto” Panels also clip their contents.

I did use the auto panels. see below code.

$(go.Panel, “Table”, { defaultAlignment: go.Spot.Bottom },
$(go.Panel, “Auto”,
{ row: 0, column: 0, margin: 2, columnSpan: 3,rowSpan: 3, stretch: go.GraphObject.Horizontal },
$(go.Shape, “RoundedRectangle”),
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “key”, findHeadShot))),
$(go.Panel, “Auto”,
{row: 0, column: 6,margin: 2,
desiredSize: new go.Size(15, 15) },
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “isCommandAlter”, findUpArrowImg), new go.Binding(“visible”, “isCommandRepAccess”))),

$(go.Panel, “Auto”,
{row: 0, column: 7,margin: 2,margin: 2,
desiredSize: new go.Size(15, 15) },
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “isCommandRepAccess”, findIRSImg), new go.Binding(“visible”, “isCommandRepAccess”))),

What kind of Panel is your Node, and what properties have you set on that?

I really have a hard time reading code when it isn’t formatted and indented properly.

i did not mention any panel on the node it is Auto

myDiagram.nodeTemplate = $(go.Node, “Auto”, {
height : 70
}

And what’s the main element of that “Auto” Panel?

main element meaning shape … below is the shape and then table

$(go.Shape, “Rectangle”, {
name: “SHAPE”,
fill: “white”,
stroke: null,
// set the port properties:
portId: “”,
fromLinkable: true,
toLinkable: true,
cursor: “pointer”
}), $(go.Panel, “Table”, { defaultAlignment: go.Spot.Bottom },

Could you please provide your whole Node template, formatted and indented correctly (use triple backquotes: Code Formatting), and strip out event handlers and any other code that is unrelated to your question?

Hi walter I formatted

myDiagram.nodeTemplate = $(go.Node, “Auto”, {
height : 70
}, {
// doubleClick : nodeDoubleClick
}, { // handle dragging a Node onto a Node to (maybe)
// change the reporting relationship
mouseDragEnter: function(e, node, prev) {
var diagram = node.diagram;
var selnode = diagram.selection.first();
if (!mayWorkFor(selnode, node)) return;
var shape = node.findObject(“SHAPE”);
if (shape) {
shape._prevFill = shape.fill; // remember the // original // brush
shape.fill = “darkred”;
}
},
mouseDragLeave: function(e, node, next) {
var shape = node.findObject(“SHAPE”);
if (shape && shape._prevFill) {
shape.fill = shape._prevFill; // restore the // original // brush
}
},
mouseDrop: function(e, node) {
var diagram = node.diagram;
var selnode = diagram.selection.first(); // assume // just // one // Node // in // selection
if (mayWorkFor(selnode, node)) {
// find any existing link into the selected node
var link = selnode.findTreeParentLink();
if (link !== null) { // reconnect any// existing link
link.fromNode = node;
} else { // else create a new link
diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
}
}
},
click: function(e, node) {
self.isFolderEditable(true);
var nodeTreeDataArray = [];
self.commandSearch(node.data.command);
loadTreeData(nodeTreeDataArray);
//diagram.model = nodeTreeDataArray;
//self.showOrgChartDiagram(nodeTreeDataArray, node.data.key);
myDiagram.model = new go.TreeModel(nodeTreeDataArray);
if (self.refresh()) {
myTreeDiagram.model = new go.TreeModel(nodeTreeDataArray);
}
myDiagram.nodes.each(function(n) {
if (n.data.command == self.commandSearch()) {
self.commandOperId(n.data.key);
myDiagram.centerRect(n.actualBounds);
myDiagram.scrollToRect(n.actualBounds);
myDiagram.select(n);
myDiagram.focus();
myDiagram.commandHandler.scrollToPart(n.data.part);
var shape = n.findObject(“SHAPE”);
var GO = go.GraphObject.make;
var color = “#8eedc0”; //levelColors[level];
if (shape) {
shape.fill = GO(go.Brush, “Linear”, {
0: color,
1: go.Brush.lightenBy(color, 0.05),
start: go.Spot.Left,
end: go.Spot.Right
});
}
}
})
//document.getElementById(‘myDiagramDiv’).style.height=‘860px’;
document.getElementById(‘bottom-content’).style.display = ‘none’;
}
},
// for sorting, have the Node.text be the data.name
new go.Binding(“text”, “name”),
// bind the Part.layerName to control the Node’s layer
// depending on whether it isSelected
new go.Binding(“layerName”, “isSelected”, function(sel) {
if (sel != null) {
// myInspector.inspectObject(sel);
}
return sel ? “Foreground” : “”;
}).ofObject(),
// define the node’s outer shape
$(go.Shape, “Rectangle”, {
name: “SHAPE”,
fill: “white”,
stroke: null,
// set the port properties:
portId: “”,
fromLinkable: true,
toLinkable: true,
cursor: “pointer”
}), $(go.Panel, “Table”, { defaultAlignment: go.Spot.Bottom },
$(go.Panel, “Auto”,
{ row: 0, column: 0, margin: 2, columnSpan: 3,rowSpan: 3, stretch: go.GraphObject.Horizontal, alignment: go.Spot.Bottom },
$(go.Shape, “RoundedRectangle”),
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “key”, findHeadShot))),
$(go.Panel, “Auto”,
{row: 0, column: 6,margin: 2,alignment: go.Spot.Bottom,
desiredSize: new go.Size(15, 15) },
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “isCommandAlter”, findUpArrowImg), new go.Binding(“visible”, “isCommandRepAccess”))),

$(go.Panel, “Auto”,
{row: 0, column: 7,margin: 2,alignment: go.Spot.Bottom,
desiredSize: new go.Size(15, 15) },
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “isCommandRepAccess”, findIRSImg), new go.Binding(“visible”, “isCommandRepAccess”))),
$(“Button”, {
row: 4, column: 7,margin: 2,
alignment: go.Spot.BottomRight,
alignmentFocus: go.Spot.BottomRight,
name: ‘TREEBUTTON’,
click: function(e, obj) { // OBJ is the Button
myDiagram.commandHandler.showContextMenu(e.targetObject);
e.handled = true;
}
//mouseClick: function(e, obj) { myDiagram.commandHandler.showContextMenu(e.targetObject);}
},
$(go.Picture, {
name: “Picture”,margin: 2,
desiredSize: new go.Size(15, 15),
}, new go.Binding(“source”, “key”, findPencilImg)), new go.Binding(“visible”, “key”, showContextButton)),
// define the panel where the text will appear
$(go.TextBlock, textStyle(), // the name
{
row: 1,
column: 3,
columnSpan: 2,
margin: 2,
width: 150,
font: “8pt Segoe UI,sans-serif”,
editable: false,
isMultiline: true,
//stroke :“#a3fff1”,
minSize: new go.Size(10, 16)
}, new go.Binding(“text”, “orgName”).makeTwoWay(), new go.Binding(“stroke”, “highlight”, function(v) {
return v ? “black” : “white”;
})),
$(go.TextBlock, textStyle(), // the name
{
row: 2,
column: 3,
columnSpan: 2,
margin: 2,
width: 150,
font: “8pt Segoe UI,sans-serif”,
//stroke :“#a3fff1”,
editable: false,
isMultiline: true,
minSize: new go.Size(10, 16)
}, new go.Binding(“text”, “personName”).makeTwoWay(), new go.Binding(“stroke”, “highlight”, function(v) {
return v ? “black” : “white”;
}))
) // end Horizontal Panel
); // end Node

when i paste here it is not formating is there any other place i can put it

This is what I just suggested.

It’s important for you to see the structure of the visual tree that you’re defining. That’s why I also suggested that you strip out the event handlers. You might as well strip out the Bindings too, unless their target is a property that affects panel layout.

In fact, maybe you should just post (inside triple-backquotes) the elements that you are using, including the types of the Panels and the alignment/alignmentFocus/stretch/row/column. Something like:

Node "Auto"
    Shape "RoundedRectangle"
    Panel "Table"
        Picture row: 0 column: 0
        TextBlock row: 0 column: 1 stretch: Horizontal
    . . .

formtted and taken out events…

myDiagram.nodeTemplate = $(go.Node, "Auto", {
		height : 70
	},  
	// for sorting, have the Node.text be the data.name
	new go.Binding("text", "name"),
	new go.Binding("layerName", "isSelected", function(sel) {
		return sel ? "Foreground" : "";
	}).ofObject(),
	// define the node's outer
    $(go.Shape, "Rectangle", {
		name: "SHAPE",
		fill: "white",
		stroke: null,
		// set the port properties:
		portId: "",
		fromLinkable: true,
		toLinkable: true,
		cursor: "pointer"
	}), $(go.Panel, "Table", { defaultAlignment: go.Spot.Bottom },
		$(go.Panel, "Auto",
			{ row: 0, column: 0, margin: 2, columnSpan: 3,rowSpan: 3, stretch: go.GraphObject.Horizontal, alignment: go.Spot.Bottom },
			 $(go.Shape, "RoundedRectangle"),
			$(go.Picture, {
			name: "Picture",
		}, new go.Binding("source", "key", findHeadShot))),
		$(go.Panel, "Auto",
		{row: 0, column: 6,margin: 2,alignment: go.Spot.Bottom,
			desiredSize: new go.Size(15, 15) },
		$(go.Picture, {
			name: "Picture",
		}, new go.Binding("source", "isCommandAlter", findUpArrowImg), new go.Binding("visible", "isCommandRepAccess"))),

		$(go.Panel, "Auto",
		{row: 0, column: 7,margin: 2,alignment: go.Spot.Bottom,
			desiredSize: new go.Size(15, 15) },
		$(go.Picture, {
			name: "Picture",
		}, new go.Binding("source", "isCommandRepAccess", findIRSImg), new go.Binding("visible", "isCommandRepAccess"))),
		$("Button", {
			row: 4, column: 7,margin: 2,
			alignment: go.Spot.BottomRight,
			alignmentFocus: go.Spot.BottomRight,
			name: 'TREEBUTTON',
			click: function(e, obj) { // OBJ is the Button
				myDiagram.commandHandler.showContextMenu(e.targetObject);
				e.handled = true;
			}
			//mouseClick: function(e, obj) { myDiagram.commandHandler.showContextMenu(e.targetObject);}
		},
		$(go.Picture, {
			name: "Picture",margin: 2,
			desiredSize: new go.Size(15, 15),
		}, new go.Binding("source", "key", findPencilImg)),
	 	new go.Binding("visible", "key", showContextButton)),
		// define the panel where the text will appear
		$(go.TextBlock, textStyle(), // the name
		{
			row: 1,
			column: 3,
			columnSpan: 2,
			margin: 2,
			width: 150,
			font: "8pt Segoe UI,sans-serif",
			editable: false,
			isMultiline: true,
			//stroke :"#a3fff1",
			minSize: new go.Size(10, 16)
		}, new go.Binding("text", "orgName").makeTwoWay(), new go.Binding("stroke", "highlight", function(v) {
			return v ? "black" : "white";
		})),
		$(go.TextBlock, textStyle(), // the name
			{
				row: 2,
				column: 3,
				columnSpan: 2,
				margin: 2,
				width: 150,
				font: "8pt Segoe UI,sans-serif",
				//stroke :"#a3fff1",
				editable: false,
				isMultiline: true,
				minSize: new go.Size(10, 16)
			}, new go.Binding("text", "personName").makeTwoWay(), new go.Binding("stroke", "highlight", function(v) {
				return v ? "black" : "white";
			}))
		) // end Horizontal Panel
); // end Node

I don’t know why you didn’t do as I suggested, using triple-backquote around all of your code. Now you can edit it so that it is properly indented, before I can read it.

Is it what you wanted

``````height : 70
```},  
```// for sorting, have the Node.text be the data.name
```new go.Binding("text", "name"),
```new go.Binding("layerName", "isSelected", function(sel) {
``````return sel ? "Foreground" : "";
```}).ofObject(),
```// define the node's outer shape
```$(go.Shape, "Rectangle", {
``````name: "SHAPE",
``````fill: "white",
``````stroke: null,
``````// set the port properties:
``````portId: "",
``````fromLinkable: true,
``````toLinkable: true,
``````cursor: "pointer"
```}), 
```$(go.Panel, "Table", { defaultAlignment: go.Spot.Bottom },
``````$(go.Panel, "Auto",
`````````{ 
````````````row: 0,
````````````column: 0, 
````````````margin: 2, 
````````````columnSpan: 3,
````````````rowSpan: 3, 
````````````stretch: go.GraphObject.Horizontal, alignment: go.Spot.Bottom 
`````````},
`````````$(go.Shape, "RoundedRectangle"),
`````````$(go.Picture, {
````````````name: "Picture",
`````````}, 
``````new go.Binding("source", "key", findHeadShot))),
``````$(go.Panel, "Auto", {
`````````row: 0, 
`````````column: 6,
`````````margin: 2,
`````````alignment: go.Spot.Bottom,
`````````desiredSize: new go.Size(15, 15) 
``````},
$(go.Picture, {
`````````name: "Picture",
``````}, 
``````new go.Binding("source", "isCommandAlter", findUpArrowImg), new go.Binding("visible", "isCommandRepAccess"))),

``````$(go.Panel, "Auto",
``````{row: 0, column: 7,margin: 2,alignment: go.Spot.Bottom,
`````````desiredSize: new go.Size(15, 15) },
``````$(go.Picture, {
`````````name: "Picture",
``````}, 
``````new go.Binding("source", "isCommandRepAccess", findIRSImg), new go.Binding("visible", "isCommandRepAccess"))),
``````$("Button", {
`````````row: 4, column: 7,margin: 2,
`````````alignment: go.Spot.BottomRight,
`````````alignmentFocus: go.Spot.BottomRight,
`````````name: 'TREEBUTTON',
`````````click: function(e, obj) { // OBJ is the Button
````````````myDiagram.commandHandler.showContextMenu(e.targetObject);
````````````e.handled = true;
`````````}
`````````//mouseClick: function(e, obj) { myDiagram.commandHandler.showContextMenu(e.targetObject);}
``````},
``````$(go.Picture, {
`````````name: "Picture",margin: 2,
`````````desiredSize: new go.Size(15, 15),
``````}, new go.Binding("source", "key", findPencilImg)),
``` ```new go.Binding("visible", "key", showContextButton)),
``````// define the panel where the text will appear
``````$(go.TextBlock, textStyle(), // the name
``````{
`````````row: 1,
`````````column: 3,
`````````columnSpan: 2,
`````````margin: 2,
`````````width: 150,
`````````font: "8pt Segoe UI,sans-serif",
`````````editable: false,
`````````isMultiline: true,
`````````//stroke :"#a3fff1",
`````````minSize: new go.Size(10, 16)
``````}, new go.Binding("text", "orgName").makeTwoWay(), new go.Binding("stroke", "highlight", function(v) {
`````````return v ? "black" : "white";
``````})),
``````$(go.TextBlock, textStyle(), // the name
`````````{
````````````row: 2,
````````````column: 3,
````````````columnSpan: 2,
````````````margin: 2,
````````````width: 150,
````````````font: "8pt Segoe UI,sans-serif",
````````````//stroke :"#a3fff1",
````````````editable: false,
````````````isMultiline: true,
````````````minSize: new go.Size(10, 16)
`````````}, new go.Binding("text", "personName").makeTwoWay(), new go.Binding("stroke", "highlight", function(v) {
````````````return v ? "black" : "white";
}))
) // end Table Panel
); // end Node

i did that it is appears like above

Hi Walter

Your help is appreciate in this.

Ignore this issue. I fixed by setting the margins in the table