Hi,
Istead of the attached shape node you can use an attached table node, and list each member on a different row. You can use the table cell's Tag property to store the hyperlink:
var kanji = new OrgChartNode(diagram);
kanji.setBounds(new Rect(25, 15, 30, 30));
kanji.setFullName("SFGÒ");
kanji.setHyperLink("http://kanji");
kanji.resize();
diagram.addItem(kanji);
var kanji2 = new MindFusion.Diagramming.TableNode(diagram);
kanji2.redimTable(1, 2); // define a table with 1 column and two rows;
kanji2.setBounds(new Rect(55, 15, 30, 30));
kanji2.setCaptionHeight(0); // hide the header
kanji2.getCell(0, 0).setText("Attached entry A"); // add first entry to the first row
kanji2.getCell(0, 0).setTag("http://A/"); // set the link to first entry information in the tag property
kanji2.getRow(0).height = 15; // resize the first row to fit the text
kanji2.getCell(0, 1).setText("Attached entry B"); // add sedcond entry to the sedcond row
kanji2.getCell(0, 1).setTag("http://B/"); // set the link to second entry information in the tag property
kanji2.getRow(1).height = 15; // resize the second row to fit the text
kanji2.setLocked(true);
kanji2.setIgnoreLayout(true);
kanji2.attachTo(kanji);
diagram.addItem(kanji2);
To handle different type node clicks, modify your nodeClicked handler like this:
// raised when the user clicks on a node
function onNodeClicked(diagram, eventArgs)
{
var link = null;
var node = eventArgs.getNode();
if (MindFusion.AbstractionLayer.isInstanceOfType(MindFusion.Diagramming.ShapeNode, node))
link = node.getHyperLink();
else if (MindFusion.AbstractionLayer.isInstanceOfType(MindFusion.Diagramming.TableNode, node))
{
var cellInfo = node.cellFromPoint(eventArgs.mousePosition);
if (cellInfo)
link = cellInfo.cell.getTag();
}
if (link)
window.open(link);
}
If you think horizontal space is an issue, you can use the treeLayoutAssistant layout trait for leaf nodes, so that they position vertically. Set the enableAssistants property on the TreeLayout, iterate over diagram's nodes collection to identify leaf nodes and set their layoutTraits property, before arranging the graph:
// we apply the tree layout to arrange the diagram
tree = new MindFusion.Graphs.TreeLayout();
// customize the tree layout
tree.direction = MindFusion.Graphs.LayoutDirection.TopToBottom;
tree.linkType = MindFusion.Graphs.TreeLayoutLinkType.Cascading;
tree.enableAssistants = true;
// ...
for (var i = 0; i < diagram.getNodes().length; i++)
{
var node = diagram.getNodes()[i];
if (MindFusion.AbstractionLayer.isInstanceOfType(OrgChartNode, node))
{
if (node.getOutgoingLinks().length == 0) // node is a leaf
node.layoutTraits = { treeLayoutAssistant: MindFusion.Graphs.AssistantType.Left };
}
}
// arrange the diagram with the TreeLayout
diagram.arrangeAnimated(tree);
Regards,
Lyubo