or


Now, I can archive the first, second and third requirements. However, I have the problem when I try to load data from JSON. The Images are missing, and the connections also lost. I try to solve the problem by using 'visualTemplate' by setting '<ShapeDefaultsSettings Visual="visualTemplate" />', but it breaks my diagram instead. I have attached my code below.
This is my drag & drop eventfunction setDropTargetOnDiagram(element) { $telerik.$(element).kendoDropTarget({ drop: function (e) { var draggable = e.draggable, element = e.dropTarget, diagram = element.getKendoDiagram(); if (draggable && draggable.hint) { var item = draggable.hint.data("data"), offset = draggable.hintOffset, point = new kendo.dataviz.diagram.Point(offset.left, offset.top), transformed = diagram.documentToModel(point); item.id += "_" + generateUUID(); item.x = transformed.x; item.y = transformed.y; var shape = createCustomShape(item); diagram.addShape(shape); } } });}function createCustomShape(item) { var shape = new kendo.dataviz.diagram.Shape(item); var image = new kendo.dataviz.diagram.Image({ source: "../Images/Diagram/" + item.content.ImageName, x: 0, y: 0, width: item.width, height: item.height, stroke: { width: 0 } }); var textBlock = new kendo.dataviz.diagram.TextBlock({ text: item.content.CustomText, color: "#000", fontSize: 12, x: item.content.TextX, y: item.content.TextY }); shape.visual.append(image); shape.visual.append(textBlock); return shape;}<div class="dragItem" data-data='{"id": "StartProcess", "content": {"CustomText":"Start", "TextX":"18", "TextY":"70", "ImageName":"64Play.png"}, "width":"64", "height":"64"}'> <asp:Image ID="imgPersonal" runat="server" ImageUrl="~/Images/Diagram/64Play.png" /></div>function saveJSON() { var json = diagram.save(); var jsonStr = Sys.Serialization.JavaScriptSerializer.serialize(json); var txtDiagramSave= document.getElementById("txtDiagramSave"); txtDiagramSave.value = js_beautify(jsonStr);}function loadJSON() { var txtDiagramSave= document.getElementById("txtDiagramSave"); diagram.load(Sys.Serialization.JavaScriptSerializer.deserialize(txtDiagramSave.value));}{ "shapes": [{ "id": "StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25", "hover": {}, "cursor": "pointer", "content": { "align": "center middle", "text": "", "CustomText": "Start", "TextX": "18", "TextY": "70", "ImageName": "64Play.png" }, "selectable": true, "serializable": true, "enable": true, "type": "rectangle", "path": "", "autoSize": true, "visual": null, "x": 134, "y": 104, "minWidth": 20, "minHeight": 20, "width": 65, "height": 65, "editable": { "connect": true }, "connectors": [{ "name": "Top", "description": "Top Connector" }, { "name": "Right", "description": "Right Connector" }, { "name": "Bottom", "description": "Bottom Connector" }, { "name": "Left", "Description": "Left Connector" }, { "name": "Auto", "Description": "Auto Connector" }], "rotation": { "angle": 0 }, "undoable": false }, { "id": "Personal_3993f4ff-956e-4d46-a939-18c84fcb4162", "hover": {}, "cursor": "pointer", "content": { "align": "center middle", "text": "", "CustomText": "Personal", "TextX": "8", "TextY": "70", "ImageName": "64ManPencil.png" }, "selectable": true, "serializable": true, "enable": true, "type": "rectangle", "path": "", "autoSize": true, "visual": null, "x": 295, "y": 99, "minWidth": 20, "minHeight": 20, "width": 65, "height": 65, "editable": { "connect": true }, "connectors": [{ "name": "Top", "description": "Top Connector" }, { "name": "Right", "description": "Right Connector" }, { "name": "Bottom", "description": "Bottom Connector" }, { "name": "Left", "Description": "Left Connector" }, { "name": "Auto", "Description": "Auto Connector" }], "rotation": { "angle": 0 }, "undoable": false }], "connections": [{ "from": { "id": "StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25" }, "to": { "id": "Personal_3993f4ff-956e-4d46-a939-18c84fcb4162" }, "id": "h4upyHsjPm", "hover": { "stroke": {} }, "cursor": "pointer", "content": { "align": "center middle", "text": "", "color": "#444444" }, "selectable": true, "serializable": true, "enable": true, "startCap": "none", "endCap": "ArrowEnd", "points": [], "stroke": { "width": 2, "color": "#6c6c6c" }, "selection": { "handles": { "width": 8, "height": 8, "fill": { "color": "white" }, "stroke": { "color": "#444444" } } } }]}{ "shapes": [{ "id": "StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25", "hover": { "opacity": 0.2 }, "cursor": "pointer", "content": { "align": "center middle", "text": "", "color": "#444444", "CustomText": "Start", "TextX": "18", "TextY": "70", "ImageName": "64Play.png" }, "selectable": true, "serializable": true, "enable": true, "type": "rectangle", "path": "", "autoSize": true, "visual": null, "x": 134, "y": 104, "minWidth": 20, "minHeight": 20, "width": 65, "height": 65, "editable": { "connect": true }, "connectors": [{ "name": "Top", "description": "Top Connector" }, { "name": "Right", "description": "Right Connector" }, { "name": "Bottom", "description": "Bottom Connector" }, { "name": "Left", "Description": "Left Connector" }, { "name": "Auto", "Description": "Auto Connector" }], "rotation": { "angle": 0 }, "stroke": { "width": 0 }, "fill": { "color": "#4cc5da" }, "connectorDefaults": { "fill": { "color": "#444444" }, "stroke": { "color": "white" }, "hover": { "fill": { "color": "white" }, "stroke": { "color": "#444444" } } }, "undoable": false }, { "id": "Personal_3993f4ff-956e-4d46-a939-18c84fcb4162", "hover": { "opacity": 0.2 }, "cursor": "pointer", "content": { "align": "center middle", "text": "", "color": "#444444", "CustomText": "Personal", "TextX": "8", "TextY": "70", "ImageName": "64ManPencil.png" }, "selectable": true, "serializable": true, "enable": true, "type": "rectangle", "path": "", "autoSize": true, "visual": null, "x": 295, "y": 99, "minWidth": 20, "minHeight": 20, "width": 65, "height": 65, "editable": { "connect": true }, "connectors": [{ "name": "Top", "description": "Top Connector" }, { "name": "Right", "description": "Right Connector" }, { "name": "Bottom", "description": "Bottom Connector" }, { "name": "Left", "Description": "Left Connector" }, { "name": "Auto", "Description": "Auto Connector" }], "rotation": { "angle": 0 }, "stroke": { "width": 0 }, "fill": { "color": "#4cc5da" }, "connectorDefaults": { "fill": { "color": "#444444" }, "stroke": { "color": "white" }, "hover": { "fill": { "color": "white" }, "stroke": { "color": "#444444" } } }, "undoable": false }], "connections": []}function visualTemplate(options) { var diagram = kendo.dataviz.diagram; var g = new diagram.Group(); var dataItem = options.dataItem; g.append(createCustomShape(dataItem)); return g;};<head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <telerik:RadSkinManager ID="rsm" runat="server" Skin="WebBlue"></telerik:RadSkinManager> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder></head>[NullReferenceException: Der Objektverweis wurde nicht auf eine Objektinstanz festgelegt.] Telerik.Web.UI.RadSkinManager.Page_PreRender(Object sender, EventArgs e) +67 System.EventHandler.Invoke(Object sender, EventArgs e) +0 System.Web.UI.Control.OnPreRender(EventArgs e) +92 System.Web.UI.Control.PreRenderRecursiveInternal() +83 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +974<telerik:RadTreeList ID="lstAanbod" runat="server" CssClass="_radgrid" OnNeedDataSource="lstAanbod_NeedDataSource" DataKeyNames="NR" ParentDataKeyNames="PARENT_NR" ClientDataKeyNames="DOSSIER_ID, PROFIEL_ID, GESELECTEERD" EnableEmbeddedSkins="false" BorderStyle="None" GridLines="None" ShowFooter="true" AutoGenerateColumns="false" AllowMultiItemSelection="true"> <ItemStyle HorizontalAlign="Left"></ItemStyle> <Columns> <telerik:TreeListSelectColumn HeaderStyle-Width="38px" UniqueName="SelectColumn"></telerik:TreeListSelectColumn> <telerik:TreeListBoundColumn HeaderStyle-Width="10%" DataField="CODE" HeaderText="Code"></telerik:TreeListBoundColumn> <telerik:TreeListBoundColumn HeaderStyle-Width="60%" DataField="TITEL" HeaderText="Titel"></telerik:TreeListBoundColumn> <telerik:TreeListBoundColumn HeaderStyle-Width="10%" DataField="NIVEAU" HeaderText="Niveau"></telerik:TreeListBoundColumn> <telerik:TreeListBoundColumn HeaderStyle-Width="10%" DataField="DOSSIER_ID" HeaderText="Niveau" Visible="false"></telerik:TreeListBoundColumn> <telerik:TreeListBoundColumn HeaderStyle-Width="10%" DataField="PROFIEL_ID" HeaderText="Niveau" Visible="false"></telerik:TreeListBoundColumn> </Columns> <ClientSettings Selecting-AllowItemSelection="true" Selecting-UseSelectColumnOnly="true" Selecting-AllowToggleSelection="true" ClientEvents-OnItemSelected="OnClientNodeSelected" ClientEvents-OnTreeListCreated="treeListCreated"></ClientSettings> </telerik:RadTreeList>function UpdateAllChildren(currNode, nodes, nodecount, checked) { var i; for (i = 0; i < nodecount; i++) { if (checked) { nodes[i].set_selected(true); } else { nodes[i].set_selected(false); } }}function treeListCreated(sender, args) { var items = sender.get_dataItems(); for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.get_dataKeyValue("GESELECTEERD") == "True") { item.set_selected(true); } }}Unhandled exception at line 808, column 27 in http://localhost:11488/ScriptResource.axd? ...0x800a138f - Runtime-fout JavaScript: Unable to get property '_selectedIndexes' of undefined or null referencedprotected void Page_Load(object sender, EventArgs e){ GetGestionDoc();}{ if (Session["NumStation"] != null) { int numStation = Convert.ToInt32(Session["NumStation"]); document = entities.V_RAPPORTSVALIDES.Where(p => p.ID_STATION == numStation).ToList(); List<DocumentObject> newList = new List<DocumentObject>(); foreach (var item in document) { DocumentObject o = new DocumentObject(item.TYPE_VISITE, item.TYPE_DOCUMENT, Convert.ToDateTime(item.DATE_DOCUMENT), Convert.ToInt16(item.ANNEE_RAPPORTANNUEL), item.NOM_TECHNICIEN); newList.Add(o); } RadCommentGrid.DataSource = newList; RadCommentGrid.DataBind(); ChangeHeaderName(); }}private void ChangeHeaderName(){ foreach (GridColumn column in RadCommentGrid.MasterTableView.AutoGeneratedColumns) { switch (column.OrderIndex) { case 2: column.HeaderText = "Date du document"; break; case 3: column.HeaderText = "Type de document"; break; case 4: column.HeaderText = "Nom du technicien"; break; case 5: column.HeaderText = "Type de visite"; break; case 6: column.HeaderText = "Année du rapport annuel"; break; } } GridColumn columnDateDoc = RadCommentGrid.MasterTableView.AutoGeneratedColumns.Where(p => p.UniqueName == "DATE_DOCUMENT").FirstOrDefault(); columnDateDoc.OrderIndex = 1; GridColumn columnTypeDoc = RadCommentGrid.MasterTableView.AutoGeneratedColumns.Where(p => p.UniqueName == "TYPE_DOCUMENT").FirstOrDefault(); columnTypeDoc.OrderIndex = 2; GridColumn columnTechnicien = RadCommentGrid.MasterTableView.AutoGeneratedColumns.Where(p => p.UniqueName == "NOM_TECHNICIEN").FirstOrDefault(); columnTechnicien.OrderIndex = 3; GridColumn columnVisite = RadCommentGrid.MasterTableView.AutoGeneratedColumns.Where(p => p.UniqueName == "TYPE_VISITE").FirstOrDefault(); columnVisite.OrderIndex = 4; GridColumn columnAnnee = RadCommentGrid.MasterTableView.AutoGeneratedColumns.Where(p => p.UniqueName == "ANNEE_RAPPORTANNEE").FirstOrDefault(); columnAnnee.OrderIndex = 5;}<telerik:RadComboBox ID="RadComboBoxTitle" DataSourceID="SqlDataSource2" DataTextField="ContactTitle" DataValueField="ContactTitle" Height="200px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ContactTitle").CurrentFilterValue %>' runat="server" OnClientSelectedIndexChanged="TitleIndexChanged"> <Items> <telerik:RadComboBoxItem Text="All" /> </Items> </telerik:RadComboBox>
