VisualTemplate with Drag & Drop

[Peerayu]

I would like to create the diagram that

• User can drag & drop the item (Image) into the diagram.
• User can create the connection to link each item.
• User can save the diagram into JSON.
• User can load the diagram from JSON
  

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 event

function 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;
}

This is my dragItem

<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>

This is the code for Save and Load JSON

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));
}

This is my saved JSON

{
    "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"
                }
            }
        }
    }]
}

However, after I loaded the saved JSON, it was changed to be like this. (I lost the showing images, and connection is blank)

{
    "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": []
}

I try to solve the load JSON problem by using "visualTemplate" like this, but it breaks the diagram

function visualTemplate(options) {
     var diagram = kendo.dataviz.diagram;
     var g = new diagram.Group();
     var dataItem = options.dataItem;

     g.append(createCustomShape(dataItem));
     return g;
};

[Slav]

Hi Peerayu,

Currently complex shapes that include elements like images cannot be exported in the JSON object literal. There is a logged feature request item on the matter: http://feedback.telerik.com/Project/108/Feedback/Details/136031-allow-export-to-json-for-complex-shapes. You can use it to vote for the feature, comment it and follow its status.

For the time being you can try setting a visual template in the ShapeDefaultsSettings property of RadDiagram. In the visual template method you can load different elements depending on a setting of the current shape, for example its id or type. A similar implementation is used for the Overview demo of the control: http://demos.telerik.com/aspnet-ajax/diagram/examples/overview/defaultcs.aspx.

The visual template setup you tried most probably does not work, because you create a new shape in the method, however you are applying the visual template to an already created shape, which result in a problem. Please check the correct format the method in the following help article: http://www.telerik.com/help/aspnet-ajax/diagram-shape-templates.html

Regards,
Slav
Telerik