I still am not able to get edit or Hyperlink (
https://mindfusion.eu/Forum/YaBB.pl?num=1590780726/new) to work. Please have a look at my index.cshtml posted below. Thank you.
@using System.Drawing
@using MindFusion.Drawing
@using MindFusion.Diagramming
@using MindFusion.Diagramming.Mvc
@using MindFusion.Diagramming.Manipulators
@using MindFusion.Diagramming.Fluent;
@using MindFusion.Diagramming.Layout.Fluent;
@Scripts.Render("~Scripts/MindFusion.Diagramming.js");
@{
string template = @"{
""component"": ""SimplePanel"",
""children"":
[
{
""component"": ""Shape"",
""name"": ""Frame"",
""shape"": ""{0}"",
""pen"": ""black"",
""isOutline"": true,
""autoProperty"": true
},
{
""component"": ""Border"",
""padding"": ""2""
},
{
""component"": ""GridPanel"",
""columnDefinitions"": [""Auto"",""Auto"",""Auto"",""Auto"",""Auto"",""Auto"",""Auto"",""Auto"",""Auto"",""Auto""],
""rowDefinitions"": [""Auto"",""Auto"",""Auto"",""Auto""],
""children"":
[
{
""gridRow"": 0,
""gridColumn"":7,
""columnSpan"": 3,
""component"": ""Text"",
""name"": ""Title"",
""autoProperty"": true,
""text"": ""title"",
""font"": ""Arial bold"",
""horizontalAlignment"": ""Near""
},
{
""gridRow"": 0,
""gridColumn"":9,
""columnSpan"": 1,
""component"": ""ButtonComponent"",
""imageLocation"": ""../Content/close.png"",
""imageAlign"": ""Center"",
""cornerRadius"": 3.5,
""autoProperty"": true,
""clickHandler"": ""onDeleteClick""
},
{
""component"": ""Text"",
""name"": ""FullName"",
""gridRow"": 1,
""gridColumn"": 0,
""rowSpan"": 2,
""columnSpan"": 5,
""verticalAlignment"": ""Center"",
""enableStyledText"": true,
""autoProperty"": true,
""text"": ""full name""
},
{
""component"": ""Text"",
""name"": ""Details"",
""gridRow"": 3,
""gridColumn"": 1,
""columnSpan"": 6,
""autoProperty"": true,
""text"": ""details"",
""font"": ""Arial 3""
}
]
}
]
}
";
DiagramView view = new DiagramView("diagramView1");
//view.AllowInplaceEdit = true;
view.SetCustomNodeType(typeof(OrgChartNode));
view.Diagram.UndoManager.UndoEnabled = true;
// register current session
view.RegisterSession(Session);
// register custom item type
view.RegisterItemType(typeof(OrgChartNode), "OrgChartNode", "OrgChartNode", 100, template);
view.LoadFromJson(Request.Form["diagramView1_PostData"]);
ViewBag.DiagramView = view;
NodeListView nodeView = new NodeListView("nodeListView1");
nodeView.NodeSize = new SizeF(96, 40);
nodeView.DefaultNodeSize = new SizeF(60, 25);
// register current session
nodeView.RegisterSession(Session);
nodeView.LoadFromJson(Request.Form["nodeListView1_PostData"]);
ViewBag.NodeListView = nodeView;
if (!IsPost)
{
Diagram diagram = view.Diagram;
var node1 = new OrgChartNode();
node1.Bounds = new RectangleF(25, 15, 60, 25);
node1.Title = "Step 1";
node1.FullName = "<a href='http://www.google.com'>Link</a>";
node1.Details = "Edit Me.";
node1.Frame = "Rectangle";
node1.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(50, Color.ForestGreen));
node1.HandlesStyle = HandlesStyle.SquareHandles2;
diagram.Nodes.Add(node1);
nodeView.AddNode(node1);
}
}
@using (Html.BeginForm())
{
<div class="controls">
<input type="submit" name="submitButton" value="submit" />
<button type="button" onclick="diagram.copyToClipboard()">copy</button>
<button type="button" onclick="diagram.cutToClipboard()">cut</button>
<button type="button" onclick="diagram.pasteFromClipboard(5, 5)">paste</button>
<button type="button" onclick="diagram.undo()">undo</button>
<button type="button" onclick="diagram.redo()">redo</button>
</div>
@Html.NodeListView(((NodeListView)ViewBag.NodeListView), new { style = "width:100px; height:700px;" })
@Html.DiagramView(((DiagramView)ViewBag.DiagramView).ControlLoadedScript("onLoaded").NodePointedScript("onNodePoint"),
new { style = "width:800px; height:700px; position:relative; top:-700px; left:120px;" })
ItemTypeResolver.Unregister(Session);
}
<script type="text/javascript">
var Events = Mindfusion.Diagramming.Events;
var diagram = null;
function onLoaded(sender) {
diagram = sender;
diagram.addEventListener(Events.onHyperlinkClicked, onHyperlinkClicked);
diagram.addEventListener(Events.nodeClicked, onEditClick);
var original = OrgChartNode.prototype.updateCanvasElements;
OrgChartNode.prototype.updateCanvasElements = function () {
original.apply(this, []);
var back = this.getComponent('Frame');
back.setBrush(this.getBrush());
}
}
function onNodePoint(sender, args) {
alert("Hello! I am an alert box, created by a hover!");
}
function onDeleteClick(sender, args) {
var item = args.getItem();
item.getParent().deleteItem(item);
}
function onHyperlinkClicked(sender, args) {
window.open(args.getHyperlink());
}
function onEditClick(sender, args) {
sender.beginEdit(args.node, args.mousePosition);
}
</script>