Diagram - Templates with Editing

@model IEnumerable<DevExtreme.NETCore.Demos.Models.OrgItemPlain> @(Html.DevExtreme().Diagram() .ID("diagram") .OnRequestLayoutUpdate("onRequestLayoutUpdate") .CustomShapes(cs => { cs.Add() .Type("employee") .Category("employee") .BaseType("rectangle") .Title("New Employee") .DefaultWidth(1.5) .DefaultHeight(1) .ToolboxWidthToHeightRatio(2) .MinWidth(1.5) .MinHeight(1) .MaxWidth(3) .MaxHeight(2) .AllowEditText(false); }) .CustomShapeTemplate(@<text> <svg class="template"> <text class="template-name" x="50%" y="20%"><%- dataItem ? dataItem.FullName : "Employee's Name" %></text> <text class="template-title" x="50%" y="45%"><%- dataItem ? dataItem.Title : "Employee's Title" %></text> <text class="template-button" x="40%" y="85%" onclick="editEmployee(<%- dataItem && JSON.stringify(dataItem) %>)">Edit</text> <text class="template-button" x="62%" y="85%" onclick="deleteEmployee(<%- dataItem && JSON.stringify(dataItem) %>)">Delete</text> </svg> </text>) .CustomShapeToolboxTemplate(@<text> <svg class="template"> <text x="50%" y="40%">New</text> <text x="50%" y="70%">Employee</text> </svg> </text>) .Nodes(ns => ns .DataSource(d => d .Array() .Key("ID") .Data(Model) .OnInserting("onNodeInserting") ) .KeyExpr("ID") .TypeExpr(new JS("itemTypeExpr")) .CustomDataExpr(new JS("itemCustomDataExpr")) .ParentKeyExpr("HeadID") .AutoLayout(al => al .Type(DiagramDataLayoutType.Tree) ) ) .ContextToolbox(ct => ct .ShapeIconsPerRow(1) .Width(100) ) .Toolbox(tb => tb .Groups(g => { g.Add().Category("employee").Title("Employee").Expanded(true); }) .ShowSearch(false) .ShapeIconsPerRow(1) ) .PropertiesPanel(pp => pp .Tabs(t => { t.Add() .Groups(g => { g.Add() .Title("Page Properties") .Commands(new[] { DiagramCommand.PageSize, DiagramCommand.PageOrientation, DiagramCommand.PageColor }); }); }) ) ) @(Html.DevExtreme().Popup() .ID("popup") .Width(400) .Height(480) .ShowTitle(true) .Title("Edit Employee") .Visible(false) .DragEnabled(false) .ContentTemplate(new TemplateName("popup-content")) ) @using(Html.DevExtreme().NamedTemplate("popup-content")) { <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Name</div> <div class="dx-field-value" data-field="FullName"> @(Html.DevExtreme().TextBox().InputAttr("aria-label", "Full Name")) </div> </div> <div class="dx-field"> <div class="dx-field-label">Title</div> <div class="dx-field-value" data-field="Title"> @(Html.DevExtreme().TextBox().InputAttr("aria-label", "Title")) </div> </div> <div class="dx-field"> <div class="dx-field-label">City</div> <div class="dx-field-value" data-field="City"> @(Html.DevExtreme().TextBox().InputAttr("aria-label", "City")) </div> </div> <div class="dx-field"> <div class="dx-field-label">State</div> <div class="dx-field-value" data-field="State"> @(Html.DevExtreme().TextBox().InputAttr("aria-label", "State")) </div> </div> <div class="dx-field"> <div class="dx-field-label">Email</div> <div class="dx-field-value" data-field="Email"> @(Html.DevExtreme().TextBox().InputAttr("aria-label", "Email")) </div> </div> <div class="dx-field"> <div class="dx-field-label">Skype</div> <div class="dx-field-value" data-field="Skype"> @(Html.DevExtreme().TextBox().InputAttr("aria-label", "Skype")) </div> </div> <div class="dx-field"> <div class="dx-field-label">Phone</div> <div class="dx-field-value" data-field="MobilePhone"> @(Html.DevExtreme().TextBox().InputAttr("aria-label", "Phone")) </div> </div> </div> <div class="dx-fieldset buttons"> @(Html.DevExtreme().Button() .Text("Update") .Type(ButtonType.Default) .OnClick("updateEmployee") ) @(Html.DevExtreme().Button() .Text("Cancel") .OnClick("cancelEditEmployee") ) </div> } <script type="text/javascript"> var currentEmployee = {}; var generatedID = 100; function onNodeInserting(values) { values.ID = values.ID || generatedID++; values.FullName = values.FullName || "Employee's Name"; values.Title = values.Title || "Employee's Title"; } function itemTypeExpr(obj) { return "employee"; } function itemCustomDataExpr(obj, value) { if(value === undefined) { return { "FullName": obj.FullName, "Prefix": obj.Prefix, "Title": obj.Title, "City": obj.City, "State": obj.State, "Email": obj.Email, "Skype": obj.Skype, "MobilePhone": obj.MobilePhone }; } else { obj.FullName = value.FullName; obj.Prefix = value.Prefix; obj.Title = value.Title; obj.City = value.City; obj.State = value.State; obj.Email = value.Email; obj.Skype = value.Skype; obj.MobilePhone = value.MobilePhone; } } function onRequestLayoutUpdate(e) { for(var i = 0; i < e.changes.length; i++) { if(e.changes[i].type === 'remove') e.allowed = true; else if(e.changes[i].data.HeadID !== undefined && e.changes[i].data.HeadID !== null) e.allowed = true; } } function editEmployee(employee) { currentEmployee = Object.assign({}, employee); var popup = $("#popup").dxPopup("instance"); popup.show(); popup.content().find(".dx-field-value").each(function() { var field = $(this).attr("data-field"); var edit = $(this).children().dxTextBox("instance"); edit.option({ value: currentEmployee[field], onValueChanged: function(e) { handleChange(field, e.value); } }); }); }; function deleteEmployee(employee) { var diagram = $("#diagram").dxDiagram("instance"); diagram.getNodeDataSource().store().push([{ type: 'remove', key: employee.ID }]); }; function updateEmployee() { var diagram = $("#diagram").dxDiagram("instance"); diagram.getNodeDataSource().store().push([{ type: 'update', key: currentEmployee.ID, data: { "FullName": currentEmployee.FullName, "Title": currentEmployee.Title, "City": currentEmployee.City, "State": currentEmployee.State, "Email": currentEmployee.Email, "Skype": currentEmployee.Skype, "MobilePhone": currentEmployee.MobilePhone } }]); var popup = $("#popup").dxPopup("instance"); popup.hide(); }; function cancelEditEmployee() { currentEmployee = {}; var popup = $("#popup").dxPopup("instance"); popup.hide(); } function handleChange(field, value) { currentEmployee[field] = value; } </script>